Showcase 03 · Fluid simulation
Ink
Violet, pink and frozen-blue ink drifts through a glass dish. The Moralo wordmark stands in the current, and eddies peel off behind it. Stir with your mouse or finger; a click dissolves the mark into ink, a second click pulls it back together.
The live demo needs JavaScript and WebGL 2. The picture shows the eddies behind the wordmark; the explanation below reads fine without it.
- Grid
- –
- Pressure iterations
- –
- Frames/s
- –
- Simulation
- WebGL 2 · GPU
How it works
The graphics card solves the equations of an incompressible fluid with Jos Stam's “Stable Fluids” method. Every frame the flow carries itself along, small eddies are reinforced (vorticity confinement) and a pressure field, found in many Jacobi iterations, makes sure fluid is never created or lost anywhere.
The wordmark is a solid obstacle: a mask sets the flow inside the letters to zero and turns their edges into walls. Nothing else is drawn in advance. The eddies that peel off behind the letters, alternately above and below, come from the physics alone, like the Kármán vortex street behind a bridge pier. Three dyes ride on the flow; in the dark design they glow with bloom, in the light one they mix like ink on paper. The colours come from the design tokens.