How to play
There is nothing to win: this is a sandbox for a moving fluid, and a preset starts as soon as the page loads. Drag across the dark canvas to push the fluid and leave a trail of coloured dye. Other tools stir without colour, paint walls that the fluid must flow around, or place permanent sources that keep blowing dye one way. Try the five presets, then move one slider at a time.
Controls
- Mouse: press and drag on the canvas; a faster drag pushes harder. The buttons above the canvas choose what a drag does.
- Touch: drag with one or several fingers; every finger is its own emitter. The page does not scroll while you touch the canvas, so scroll beside it.
- Source tool: press where the source should sit and drag the way it should blow; a longer drag makes a stronger jet. Tap a source to remove it.
- Keyboard: Space plays or pauses, S steps once, R resets the preset, C clears the dye, 1–5 pick a tool, D cycles the display mode.
Settings, the last preset and its walls and sources are remembered in this browser.
How the simulation works
The canvas is divided into a grid of cells. The simulator stores a velocity field: how fast the fluid crosses each edge of every cell. Dye is three colour values per cell, carried along by the flow. The motion follows the Navier–Stokes equations for a fluid that cannot be compressed:
∂u/∂t = −(u·∇)u − (1/ρ)∇p + ν∇²u + f
∇·u = 0
- ∂u/∂t is how the velocity u at one fixed spot changes with time.
- −(u·∇)u is advection: the fluid carries its own motion along, which is why a swirl travels.
- −(1/ρ)∇p is the pressure force, pushing fluid from high pressure towards low pressure (ρ is the density).
- ν∇²u is viscosity: neighbouring bits of fluid rub against each other, which evens out differences in speed.
- f is everything pushed in from outside: your pointer, the sources, buoyancy.
- ∇·u = 0 says that exactly as much fluid enters every cell as leaves it.
Each time step handles these parts in turn, a scheme known as “stable fluids”. Advection asks of every cell “where did the fluid that is here now come from?”, follows the velocity backwards for one step and copies the blended value found there. Because it only copies averages of existing values, nothing can grow without limit, so the method stays stable however hard you stir, where simpler schemes blow up. Viscosity is solved as a set of linked equations for the same reason.
Afterwards some cells receive more fluid than they lose. The pressure projection repairs that: it finds the pressure that cancels the imbalance by repeating a neighbour-averaging sweep (red-black Gauss–Seidel with over-relaxation) as often as the Solver iterations slider says, then subtracts the pressure gradient from the velocity. The Divergence readout is the average imbalance |∇·u| left over; more iterations make it smaller. No fluid may cross the face of a wall cell, so the flow bends around obstacles.
Vorticity confinement finds where the fluid rotates and adds a small force around each vortex to spin it back up, replacing fine swirls that the solver smears out. Buoyancy lifts each cell in proportion to the dye it holds, like hot smoke.
What is simplified: the flow is two-dimensional, and real three-dimensional turbulence behaves differently. Tracing backwards blurs the flow a little on every step (numerical dissipation), so even at viscosity 0 the fluid acts slightly syrupy and dye is not conserved exactly. The grid is coarse: details smaller than a cell are lost and round obstacles are built from square blocks. Speeds are capped, and units are grid cells per step, not metres per second.
Things to try
- Open Wind tunnel and switch Display to Curl: vortices of opposite spin peel off the obstacle in turn and drift downstream, a pattern called a vortex street.
- Still in the wind tunnel, raise Viscosity to the maximum: the wake stops flapping and becomes a steady trail.
- Set Solver iterations to 2 and watch the Divergence readout climb as fluid is created and destroyed.
- In Smoke plume, set Buoyancy to 0: the smoke only coasts on the jet. Raise it and the plume speeds up and mushrooms.
- Compare Vorticity confinement at 0 and at its maximum in Ink jets.
- In Lid stir, stir once in a circle, switch to Speed and time how long the motion lasts at low and at high Viscosity.
- Aim a source at a wall and look at Pressure: it builds up where the jet hits.
Frequently asked questions
Is this real physics?
It solves the real equations of an incompressible fluid, but in two dimensions, on a coarse grid and with a fast approximate solver. The behaviour is qualitatively right; the numbers are not engineering data.
Why does the dye thin out even with Dye fade at 0?
Each step blends neighbouring cells a little, and that blending does not keep the total amount of dye exactly constant.
Why does the picture look soft?
The fluid is computed on a small grid and stretched to the canvas. The grid is chosen for your device and lowered automatically if frames take too long; you can set it by hand under Settings.
What do Pressure and Curl show?
Pressure is high (warm colours) where the flow is slowed or turned aside, such as where a jet hits a wall, and low (cool colours) inside a vortex. Curl shows local rotation: one colour for clockwise spin, the other for anticlockwise.
Does it work offline?
Yes. Everything runs in your browser and nothing is sent anywhere.