A real fluid solver swirls colored dye like ink in water.
This is Jos Stam's Stable Fluids method on a small grid: velocity is diffused, advected along itself, and projected so the fluid stays incompressible, which is what creates the curling vortices. Dye is carried along by the velocity field. The grid is rendered into ImageData and smoothly scaled up to fill the canvas.
Try it. Drag through the water to push it and pour in ink.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a real-time fluid simulation that swirls colored ink, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Follow Jos Stam's "Stable Fluids" method on a grid of about 128 x 80 cells, scaled up to fill the window with drawImage and image smoothing turned on.
- Store velocity (vx, vy) and dye density in Float32Arrays.
- Each frame: add forces and dye, advect the velocity along itself (semi-Lagrangian: trace each cell backward by velocity * dt and bilinearly sample the old field there), then project it so it is divergence free. To project, compute the divergence, run about 20 Gauss-Seidel iterations to solve for pressure, and subtract the pressure gradient.
- Advect the dye with the same velocity and let it fade by about 0.5% per frame.
- When the mouse drags, add velocity in the drag direction and inject dye in a soft Gaussian blob around the pointer.
- Render the dye into an ImageData buffer on an offscreen canvas over a near-black background.
Once that works, make it beautiful:
- Store dye as three channels (red, green, blue) and inject a color that slowly cycles through a vivid palette, so streams of different colors mix.
- Add vorticity confinement (push velocity toward regions of stronger curl) so the swirls stay crisp instead of smearing out.
- Add two or three invisible stirrers that orbit the screen when nobody is touching it, so it is always alive.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as MacCormack advection for sharper ink, obstacles the fluid flows around, or a higher-resolution dye grid than the velocity grid.
