01
Splat
Mouse velocity injected into velocity and dye fields
per pointer move
Navier-Stokes. Solved every frame. In your browser.
512 × 288
24 per frame
— 001
This page is one idea, executed with no concessions. There are no sliders. There is no parallax. There is no second screen of products. There is a fluid — computed from first principles — and a single word of type for it to disturb.
Behind the canvas, a shader pipeline solves the incompressible Navier-Stokes equations: velocity is advected along itself, divergence is computed, pressure is resolved through twenty-four Jacobi iterations, and the gradient is subtracted to keep the field true to the continuum.
When you drag, you inject energy. The dye moves because the velocity moved it, not because we animated it. This is simulation, not animation.
Mouse velocity injected into velocity and dye fields
per pointer move
Semi-lagrangian advection. Field moves along itself
∂u/∂t + (u·∇)u
Compute ∇·u per texel, store in scalar field
∇·u → b
Solve ∇²p = ∇·u via 24 Jacobi passes
∇²p = b
u ← u − ∇p. The field is now divergence-free
∇·u = 0