Run Detail
completedgemini-3.7-flashRecorded for these videos
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
16:54Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)
Sep 16, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
52.1s
Total Tokens
8,518
Input Tokens
681
Output Tokens
7,837
Reasoning Tokens
2,831
Reasoning Effort
default
Est. Cost
$0.0299
Started
8/31/2026, 3:34:09 AM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1788147250-HtnYUodlQVDaOAr8PO4t
Turns (1)
Turn #1
681 in7,837 out2,831 reasoning8,518 total52.1s
user
You are a graphics engineer who has spent a lot of time finding out why things are slow.
I want a hundred thousand things moving on screen at sixty frames a second, in one HTML file, with no libraries.
What to build
- A canvas, 900 × 600.
- 100,000 particles, each with its own position and velocity, each one individually updated and drawn every frame.
- They move through a flow field — a smooth, slowly evolving vector field that pushes them around. Curl, drift, eddies. It should look like weather, or ink in water, not like confetti.
- Particles that leave the canvas are recycled back in, so the count never drops.
- The field itself must evolve over time. A static field that particles merely settle into is not what I asked for.
On screen, always visible
- A live FPS readout, honestly measured — a frame-time average, not a number you decided on.
- The particle count, read from the actual data structure holding them, not a constant you typed in the HTML.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - No libraries. No WebGL helper you paste in. If you want to use WebGL, write it yourself.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB— sandboxed frame, they throw. - Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The plan
One paragraph, before the file. Your data layout, your draw strategy, and the one thing you expect to be the bottleneck.
The file
The single fenced html block.
The prediction
This is the section I care most about. Be specific and commit to numbers:
- FPS I expect on a 2023 laptop, integrated graphics, Chrome — give a single number, not a range wider than about ten.
- Where the time goes — roughly what share is update versus draw, and why.
- The first thing that breaks if I raise the count to a million.
- What you'd need to go ten times faster. Name the technique, not "optimize further".
If you fell short
If you could not do 100,000 at 60fps and shipped fewer, or a cheaper effect than a real flow field, say so here, plainly, and say what you shipped instead. Write Nothing dropped. if you delivered the brief in full.
How this is scored
I am going to open the file and read the FPS counter.
Then I am going to compare it against your prediction. A model that says "about 45fps, fill-rate bound" and measures 43 has understood its own code. A model that says 60 and measures 4 has not, however elegant the code is — and that gap is most of what I am testing here. An honest prediction of a mediocre number beats a confident prediction of a good one.
assistant
The plan
We allocate two ping-pong Vertex Buffer Objects (VBOs) holding interleaved 6-float structs [x, y, vx, vy, age, maxLife] for exactly 100,000 particles (2.4 MB VRAM total). Simulation runs entirely on the GPU via a WebGL 2 Transform Feedback pass that samples a time-varying, divergence-free 2D curl noise field computed analytically from the gradient of multi-octave trigonometric potential functions, eliminating JS execution overhead. Rendering reads the active buffer directly with additive blending and a fractional alpha background blit for ink-like persistent trails; the expected bottleneck on integrated silicon is framebuffer blending memory bandwidth (RBF/ROP fill rate) rather than compute.
The file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow Field 100k</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #020408;
color: #cbd5e1;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
#wrapper {
position: relative;
width: 900px;
height: 600px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
background: #040711;
}
canvas {
display: block;
width: 900px;
height: 600px;
}
#hud {
position: absolute;
top: 12px;
left: 12px;
padding: 8px 12px;
background: rgba(4, 7, 17, 0.75);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.05em;
pointer-events: none;
user-select: none;
}
.val { color: #38bdf8; font-weight: bold; }
</style>
</head>
<body>
<div id="wrapper">
<canvas id="glcanvas" width="900" height="600"></canvas>
<div id="hud">
FPS: <span id="fps" class="val">--</span><br>
PARTICLES: <span id="count" class="val">--</span>
</div>
</div>
<script>
(() => {
const TOTAL_PARTICLES = 100000;
const canvas = document.getElementById('glcanvas');
const fpsEl = document.getElementById('fps');
const countEl = document.getElementById('count');
const gl = canvas.getContext('webgl2', {
alpha: false,
depth: false,
stencil: false,
antialias: false,
preserveDrawingBuffer: true,
powerPreference: 'high-performance'
});
if (!gl) {
document.body.innerHTML = '<p style="color:red;padding:20px;">WebGL 2 not supported.</p>';
return;
}
// --- Initial Particle Data Layout ---
// Struct: [posX, posY, velX, velY, age, maxLife] -> 6 floats = 24 bytes/particle
const STRIDE = 6;
const rawData = new Float32Array(TOTAL_PARTICLES * STRIDE);
for (let i = 0; i < TOTAL_PARTICLES; i++) {
const o = i * STRIDE;
rawData[o + 0] = Math.random() * 900.0;
rawData[o + 1] = Math.random() * 600.0;
rawData[o + 2] = (Math.random() - 0.5) * 10.0;
rawData[o + 3] = (Math.random() - 0.5) * 10.0;
rawData[o + 4] = Math.random() * 300.0;
rawData[o + 5] = 200.0 + Math.random() * 300.0;
}
// Display particle count read directly from the data buffer
countEl.textContent = (rawData.length / STRIDE).toLocaleString();
// --- Shaders ---
// 1. Update (Simulation) Shader
const simVS = `#version 300 es
precision highp float;
layout(location = 0) in vec2 a_pos;
layout(location = 1) in vec2 a_vel;
layout(location = 2) in vec2 a_life; // x: age, y: maxLife
out vec2 v_pos;
out vec2 v_vel;
out vec2 v_life;
uniform float u_time;
uniform float u_dt;
// Pseudo-random generator for particle recycling
float hash(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}
// Multi-frequency stream potential
float streamPotential(vec2 p, float t) {
vec2 p1 = p * 0.0035;
vec2 p2 = p * 0.0080;
vec2 p3 = p * 0.0180;
return sin(p1.x + t * 0.35) * cos(p1.y + t * 0.28) * 140.0
+ sin(p2.y - t * 0.45 + 1.3) * cos(p2.x + t * 0.52) * 70.0
+ sin(p3.x + p3.y + t * 0.75) * 35.0
+ cos(p1.y * 1.5 - t * 0.2) * 50.0;
}
// Divergence-free curl of potential field: v = (dPsi/dy, -dPsi/dx)
vec2 getCurl(vec2 p, float t) {
const float eps = 1.0;
float n1 = streamPotential(p + vec2(0.0, eps), t);
float n2 = streamPotential(p - vec2(0.0, eps), t);
float n3 = streamPotential(p + vec2(eps, 0.0), t);
float n4 = streamPotential(p - vec2(eps, 0.0), t);
return vec2((n1 - n2) / (2.0 * eps), -(n3 - n4) / (2.0 * eps));
}
void main() {
float age = a_life.x + 1.0;
float maxLife = a_life.y;
vec2 pos = a_pos;
vec2 vel = a_vel;
// Reset if expired or out of canvas bounds (+ 30px margin)
if (age >= maxLife || pos.x < -30.0 || pos.x > 930.0 || pos.y < -30.0 || pos.y > 630.0) {
vec2 seed = vec2(pos.x + u_time * 100.0, float(gl_VertexID) * 0.013);
pos = vec2(hash(seed) * 900.0, hash(seed + 1.7) * 600.0);
vel = vec2(0.0);
age = 0.0;
maxLife = 200.0 + hash(seed + 4.9) * 300.0;
} else {
vec2 flow = getCurl(pos, u_time);
// Smooth steering integration
vel = mix(vel, flow, clamp(u_dt * 3.5, 0.0, 1.0));
pos += vel * u_dt * 60.0;
}
v_pos = pos;
v_vel = vel;
v_life = vec2(age, maxLife);
}
`;
const simFS = `#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(0.0);
}
`;
// 2. Render Particle Shader
const renderVS = `#version 300 es
precision highp float;
layout(location = 0) in vec2 a_pos;
layout(location = 1) in vec2 a_vel;
layout(location = 2) in vec2 a_life;
out vec4 v_color;
void main() {
// Transform screen coords [0, 900] x [0, 600] to NDC [-1, 1]
vec2 ndc = (a_pos / vec2(900.0, 600.0)) * 2.0 - 1.0;
ndc.y = -ndc.y; // Match screen space top-down
gl_Position = vec4(ndc, 0.0, 1.0);
float speed = length(a_vel);
float lifeRatio = a_life.x / a_life.y;
float fadeInOut = sin(lifeRatio * 3.14159265);
// Color gradient based on speed & flow dynamics
vec3 slowCol = vec3(0.08, 0.42, 0.88); // Deep cyan/blue
vec3 midCol = vec3(0.15, 0.90, 0.75); // Luminous teal
vec3 fastCol = vec3(0.98, 0.85, 0.42); // Amber highlight
vec3 col = mix(slowCol, midCol, clamp(speed * 0.018, 0.0, 1.0));
col = mix(col, fastCol, clamp((speed - 50.0) * 0.02, 0.0, 1.0));
float alpha = clamp(fadeInOut * 0.65, 0.0, 1.0);
v_color = vec4(col * alpha, alpha);
gl_PointSize = 1.25;
}
`;
const renderFS = `#version 300 es
precision mediump float;
in vec4 v_color;
out vec4 fragColor;
void main() {
fragColor = v_color;
}
`;
// 3. Trail Fade (Full Screen Quad) Shader
const fadeVS = `#version 300 es
layout(location = 0) in vec2 a_pos;
void main() {
gl_Position = vec4(a_pos, 0.0, 1.0);
}
`;
const fadeFS = `#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
// Slowly attenuates previous frame for smooth ink dissipation
fragColor = vec4(0.015, 0.027, 0.065, 0.095);
}
`;
function createShader(gl, type, source) {
const s = gl.createShader(type);
gl.shaderSource(s, source);
gl.compileShader(s);
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(s));
gl.deleteShader(s);
return null;
}
return s;
}
function createProgram(gl, vsSource, fsSource, varyings = null) {
const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
if (varyings) {
gl.transformFeedbackVaryings(prog, varyings, gl.INTERLEAVED_ATTRIBS);
}
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(prog));
gl.deleteProgram(prog);
return null;
}
return prog;
}
const simProg = createProgram(gl, simVS, simFS, ['v_pos', 'v_vel', 'v_life']);
const simUniformTime = gl.getUniformLocation(simProg, 'u_time');
const simUniformDt = gl.getUniformLocation(simProg, 'u_dt');
const renderProg = createProgram(gl, renderVS, renderFS);
const fadeProg = createProgram(gl, fadeVS, fadeFS);
// Setup Buffers & VAOs for Ping-Pong Transform Feedback
const buffers = [gl.createBuffer(), gl.createBuffer()];
const simVAOs = [gl.createVertexArray(), gl.createVertexArray()];
const renderVAOs = [gl.createVertexArray(), gl.createVertexArray()];
const BYTES = Float32Array.BYTES_PER_ELEMENT;
const STRIDE_BYTES = STRIDE * BYTES;
for (let i = 0; i < 2; i++) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffers[i]);
gl.bufferData(gl.ARRAY_BUFFER, i === 0 ? rawData : rawData.byteLength, gl.DYNAMIC_COPY);
// Setup Sim VAO
gl.bindVertexArray(simVAOs[i]);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE_BYTES, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, STRIDE_BYTES, 2 * BYTES);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, STRIDE_BYTES, 4 * BYTES);
// Setup Render VAO
gl.bindVertexArray(renderVAOs[i]);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE_BYTES, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, STRIDE_BYTES, 2 * BYTES);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, STRIDE_BYTES, 4 * BYTES);
}
// Setup Fade Quad VAO
const fadeVAO = gl.createVertexArray();
const fadeVBO = gl.createBuffer();
gl.bindVertexArray(fadeVAO);
gl.bindBuffer(gl.ARRAY_BUFFER, fadeVBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1, 1, -1, -1, 1,
-1, 1, 1, -1, 1, 1
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.bindVertexArray(null);
// Clear background on start
gl.viewport(0, 0, 900, 600);
gl.clearColor(0.015, 0.027, 0.065, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
let readIdx = 0;
let lastTime = performance.now();
let startTime = lastTime;
let frameCount = 0;
let fpsTimer = lastTime;
let smoothFps = 60.0;
function frame(now) {
const deltaMs = now - lastTime;
lastTime = now;
const dt = Math.min(deltaMs * 0.001, 0.0333); // Clamp to prevent explosions on tab unfocus
const elapsed = (now - startTime) * 0.001;
// Honest FPS moving average calculation
frameCount++;
if (now - fpsTimer >= 250) {
const instantFps = (frameCount * 1000) / (now - fpsTimer);
smoothFps = smoothFps * 0.65 + instantFps * 0.35;
fpsEl.textContent = smoothFps.toFixed(1);
frameCount = 0;
fpsTimer = now;
}
const writeIdx = 1 - readIdx;
// 1. Simulation Step (Transform Feedback)
gl.useProgram(simProg);
gl.uniform1f(simUniformTime, elapsed);
gl.uniform1f(simUniformDt, dt > 0 ? dt : 0.0166);
gl.enable(gl.RASTERIZER_DISCARD);
gl.bindVertexArray(simVAOs[readIdx]);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, buffers[writeIdx]);
gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, TOTAL_PARTICLES);
gl.endTransformFeedback();
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
gl.disable(gl.RASTERIZER_DISCARD);
// 2. Dissipation / Motion Trail Step
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.useProgram(fadeProg);
gl.bindVertexArray(fadeVAO);
gl.drawArrays(gl.TRIANGLES, 0, 6);
// 3. Render Particles Step
gl.blendFunc(gl.ONE, gl.ONE); // Additive blending for luminous fluid feel
gl.useProgram(renderProg);
gl.bindVertexArray(renderVAOs[writeIdx]);
gl.drawArrays(gl.POINTS, 0, TOTAL_PARTICLES);
// Swap indices
readIdx = writeIdx;
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The prediction
- FPS I expect: 60 (solid, locked at vsync on any 2023 integrated graphics such as Intel Iris Xe, AMD Radeon 680M/780M, or Apple M2/M3).
- Where the time goes: ~80% GPU Blending/Memory Write Bandwidth, ~15% GPU Transform-Feedback Vertex Arithmetic, ~5% CPU/DOM Overhead. The CPU does almost zero computation—it issues only three draw/dispatch calls per frame. The GPU compute is light (100k vertex evaluations), but blending 100,000 sub-pixel points additively plus a full-screen alpha blend quad every frame tests the GPU's memory bus and ROP cache write bandwidth.
- The first thing that breaks: At 1,000,000 particles, point rasterization and memory bus saturation during the additive blend pass will cause frame drops down to ~22–28 FPS on integrated chips.
- What you'd need: WebGPU Compute Shaders writing directly into a 2D atomic/storage density texture (or a 16-bit packed indirect point buffer), bypassing fixed-function vertex stream overhead and aggregating blending in shared workgroup local memory (LDS/SRAM).
If you fell short
Nothing dropped.
Attachments
google/gemini-3.7-flash — page