The Wake

Inspired by Kármán vortex street on Wikipedia

Built with Three.js · Scroll-driven simulation · Analytical velocity fields · ShaderMaterial particles

Techniques Potential flow + Rankine vortices · CPU-side particle advection · Vorticity-dependent coloring · Pre-warm simulation

The idea

Put a cylinder in a river. At very low speed, the water splits, flows around it, and rejoins — perfectly symmetric, as if nothing happened. Increase the speed and something beautiful emerges: alternating vortices peel off each side of the cylinder, drifting downstream in two staggered rows. This is the Kármán vortex street, one of the most recognizable patterns in fluid dynamics.

The Reynolds number controls everything. It’s the ratio of inertial to viscous forces — a single dimensionless number that determines whether flow is smooth, structured, or chaotic. Scroll drives Re from 1 to 10,000, and you watch the entire story unfold.

Velocity field

Running a full Navier-Stokes solver for 14,000 particles at 60fps is impractical in a browser. Instead, the simulation uses an analytical velocity field: potential flow around a cylinder (the exact solution for inviscid flow), plus explicit vortex contributions.

At Re 5–40, two steady eddies sit behind the cylinder — symmetric, attached. Above Re 40, vortices begin shedding alternately from each side using a Rankine vortex model. Each shed vortex drifts downstream, growing its core and decaying in strength. Above Re 300, sinusoidal perturbations corrupt the street into three-dimensional turbulence.

The particles don’t know any of this. They just follow the local velocity — and the pattern emerges.

Color as physics

Particles are colored by their vertical velocity component: cyan for downward, magenta for upward, neutral grey in the free stream. This makes the alternating rotation of each vortex immediately visible — the street appears as interlocking stripes of cyan and magenta. Opacity also scales with vorticity magnitude, so particles in the free stream stay dim while vortex cores glow.

Pre-warming

Without pre-warming, the first frame shows particles scattered randomly. The simulation runs 3 seconds of integration at the initial Reynolds number before the first render, so particles have already settled into streamlines when the page loads. The flow is already flowing.

The Tacoma Narrows

The final scroll section references the 1940 Tacoma Narrows Bridge collapse — the most dramatic real-world consequence of vortex-induced vibration. A steady 40 mph wind found the bridge’s resonant frequency through periodic vortex shedding. The same physics that creates beautiful patterns in a simulation destroyed a 2,800-foot suspension bridge.