All studies

Numerical fluid dynamics

Stable Fluids

Stir colored dye through a two-dimensional fluid. Diffusion, advection, and pressure projection evolve the field.

JavaScript · Canvas · Web Workers · Numerical fluid dynamics

View source on GitHub

Try it

Runs locally in your browser. Uploaded images stay on your device.

This scene is generated live in your browser.

Start the simulation, then drag across the canvas to inject dye and momentum. Pause to inspect a frame. Keyboard: focus the canvas and press arrows to stir.

Precomputed Stable Fluids example
Example · update to make your own

Ready when you are.

Worker processing · local inputs · downloadable output

How it works

Start the simulation, then drag across the canvas to inject dye and momentum. Pause to inspect a frame. Keyboard: focus the canvas and press arrows to stir.

  1. Inject forces and dye, then diffuse them across the grid.
  2. Trace backward through the velocity field to advect quantities.
  3. Solve for pressure and subtract its gradient to reduce divergence.

Read the original research
Jos Stam · 1999

Computed examples

Identical emitters, seed 42, and 110 steps (1.83 simulated seconds). Only viscosity changes.

Low viscosity · 0.0001
Higher viscosity · 0.003

These images are actual snapshots of the simulation. They were rendered from the computed branch geometry or fluid fields; they are not generated concept images.

Implementation and limits

A bounded two-dimensional grid with closed walls and numerical dissipation. Stability does not mean perfect accuracy or conservation; this is not a three-dimensional water renderer.

Interactive settings are bounded to keep the experiment practical in a browser. Higher detail can cost more processing time without guaranteeing a better result. The implementation and its tests are available in the source repository.