💧 Real-Time Fluid Simulation

A 2D Navier–Stokes solver using Jos Stam's unconditionally stable semi-Lagrangian method. Click and drag on the canvas to inject velocity and dye. The solver handles diffusion, advection, and pressure projection each frame to keep the flow divergence-free (incompressible). 🇺🇦 Українська

Display

Presets

Max speed0
Total density0
Grid size—

The Navier–Stokes Equations

The incompressible Navier–Stokes equations govern fluid motion: ∂u/∂t = −(u·∇)u + ν∇²u + f paired with the continuity constraint ∇·u = 0. Stam's method splits each time step into three stages: (1) Add forces — inject velocity/density from mouse input; (2) Diffuse — spread quantities using an implicit Gauss–Seidel solver; (3) Advect — trace particle positions backward in time (semi-Lagrangian) and interpolate; then (4) Project — remove divergence from the velocity field using a Helmholtz decomposition. This approach is unconditionally stable for any time step, unlike explicit methods that blow up when dt is large.

About Real-Time Fluid Simulation

This simulation solves the incompressible Navier–Stokes equations on a 100×100 grid to model how a 2D fluid moves and how dye carried within it spreads. It uses Jos Stam's unconditionally stable scheme: each frame adds forces, diffuses velocity and density with an implicit Gauss–Seidel solver, advects quantities by tracing characteristics backward in time (semi-Lagrangian), then projects the velocity field to remove divergence (∇·u = 0).

Drag on the canvas to inject velocity and dye. The Viscosity slider sets how strongly momentum smooths out, Diffusion controls how the dye spreads, and Fade decays density each frame so trails dissipate. The Density, Velocity and Both buttons switch the colour map, and the Vortex, Shear and Plume presets seed classic flow patterns. Such solvers power smoke, water and fire effects in games, film and visual effects.

Frequently Asked Questions

What does this simulation actually show?

It shows a 2D incompressible fluid in motion, visualised either as a coloured dye (density) field, a velocity field coloured by direction, or both combined. When you drag on the canvas you add momentum and dye, and the solver advects and diffuses them frame by frame so you see swirling, plumes and shear layers develop.

What method is used to solve the fluid equations?

It implements Jos Stam's "Stable Fluids" method. Each time step is split into add-force, diffuse, advect and project stages. Diffusion and the pressure solve use roughly 20 iterations of a Gauss–Seidel linear solver, and advection uses a semi-Lagrangian backtrace, which makes the method unconditionally stable for any time step.

What does the projection step do?

Projection enforces incompressibility (∇·u = 0) by computing a pressure field whose gradient is subtracted from the velocity. This is a Helmholtz–Hodge decomposition: it removes the divergent part of the flow, keeping the fluid mass-conserving so it neither compresses nor expands.

What does the Viscosity slider control?

Viscosity sets how quickly velocity differences smooth out, modelling the fluid's internal friction (the ν∇²u term). The slider maps logarithmically from about 1e-6 to 1e-2; low values give thin, turbulent, swirly flow, while high values give thick, syrupy motion that damps quickly.

What is the difference between Viscosity and Diffusion?

Viscosity acts on the velocity field, smoothing momentum so neighbouring regions drag on each other. Diffusion acts on the dye (density) field, spreading the visible colour outward regardless of flow. You can have a low-viscosity, fast-moving fluid that still has highly diffusive, blurry dye, or the reverse.

What does the Fade slider do?

Fade multiplies the density field by a factor (0.80–1.00) each frame, so dye gradually dissipates rather than accumulating forever. At 0.99 trails linger and build up; lower values make injected dye vanish quickly, which is useful for seeing the current velocity rather than the full history.

What do the Vortex, Shear and Plume presets do?

Vortex seeds a rotating velocity field in a central disc to create a spinning eddy. Shear sets opposing horizontal velocities in the top and bottom halves, seeding a Kelvin–Helmholtz-style shear layer. Plume injects upward velocity and dye along the bottom, producing a rising buoyancy-free jet of fluid.

Is this physically accurate?

It is a faithful qualitative solver for the incompressible Navier–Stokes equations, but it is not quantitatively precise. The semi-Lagrangian advection adds numerical diffusion that damps small-scale detail, the grid is only 100×100, and there is no buoyancy or gravity, so it favours visual stability and speed over exact engineering accuracy.

What do the displayed statistics mean?

Max speed is the largest velocity magnitude found anywhere on the grid, in cell-units per second. Total density is the summed dye amount across all cells, which falls as the Fade factor decays it. Grid size shows the simulation resolution, here 100×100 interior cells plus a one-cell boundary ring.

Where are solvers like this used in the real world?

Stable-fluids solvers underpin real-time smoke, fire, water and cloud effects in video games and film visual effects, where speed and stability matter more than exact physics. The same Navier–Stokes equations, solved with higher-fidelity methods, drive engineering computational fluid dynamics for aerodynamics, weather and pipe flow.