Dragging through the demo adds dye and gives the fluid a push. The dye makes the motion visible: it follows a velocity field rather than moving as a collection of independent particles.
The simulation adapts Pavel Dobryakov’s WebGL Fluid Simulation, published under the MIT license. Its solver and shaders run locally in the browser.
What the solver updates #
The fluid is represented on a grid. Each cell stores a velocity, while another texture stores the dye color. On each step, the solver transports these quantities through the flow, adds forces, and estimates a pressure field that reduces divergence in the velocity field.
For an incompressible fluid, the constraint is
where is velocity. A projection step corrects the velocity using a pressure gradient. The browser solves an approximation on a finite grid; the smooth colors are a rendering of that discrete calculation.
Advection answers a practical question: where did the fluid at this cell come from? Sampling backward through the velocity field gives the previous value to transport forward. Interpolation makes this approach stable for interactive use, but also introduces numerical dissipation.
Vorticity and dissipation #
Vorticity measures local rotation. In two dimensions, its out-of-plane component is
The Vorticity control adjusts a force that reinforces small swirling structures lost on the grid. It is useful for exploring flow and producing visible eddies, but its setting is not a calibrated material property.
Dissipation controls how quickly the visible dye fades. Increasing it makes marks disappear sooner. It should not be interpreted as a direct measurement of the fluid’s physical viscosity.
Using the controls #
Drag across the canvas to inject dye and momentum, or choose Add dye for a burst. Pause holds the flow while you change settings. Reset clears the simulation so two settings can be compared from a fresh state.
Try the same short stroke at low and high vorticity. Then hold vorticity fixed and compare how long the mark remains visible at different dissipation settings. These two controls change different parts of what you see.