Fluid simulation · kimi-k3
Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.
transcript · 3 messages
thinking
Write a WebGL fluid sim in one index.html. Implement a standard stable fluids solver with semi-Lagrangian advection, vorticity, pressure projection. Keep compact.
/workspace/index.html (13749 bytes)Successfully wrote 13749 bytes to /workspace/index.html
thinking
One issue: `linearFilter` line is sloppy — `|| true` makes it always true; HALF_FLOAT linear filtering in WebGL2 requires OES_texture_float_linear only for float32; half float linear filtering is core in WebGL2? Actually OES_texture_half_float_linear doesn't exist in WebGL2 — half-float linear is core. Fine. Radius computation odd but fine. Done.
Created `index.html` — a self-contained WebGL2 fluid simulation (no external resources). It implements a real Navier–Stokes stable-fluids solver on the GPU: - **Pipeline**: curl → vorticity confinement (for swirls) → divergence → 20 Jacobi pressure iterations → gradient subtraction → semi-Lagrangian advection of velocity and dye - **Interaction**: pointer drag injects velocity + color splats (multi-touch supported, each pointer gets its own cycling hue); double-click/tap clears - Full-screen, devicePixelRatio-aware, resolution-independent sim/dye grids - Ambient auto-splats keep it alive before user input Open it in any modern browser and drag to push swirling dye around.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Colorful, swirling dye fluid simulation reacts vividly to click, drag, wheel, and even keyboard input.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.