The Eddy
The story behind The Eddy
Inspired by Homogeneous isotropic turbulence on Wikipedia
Built with Three.js · InstancedBufferGeometry · Custom ShaderMaterial · EffectComposer
Techniques Multi-octave curl noise · Canvas text atlas · Per-instance word particles · HDR bloom with Reinhard tone mapping · Five-phase scroll narrative
Direction The words of a poem about turbulence become the turbulence — cascading, breaking apart, and dissipating according to the physics they describe
Result A scroll-driven journey from a readable four-line poem into a vortex field where 21 words and their echoes obey Kolmogorov’s energy cascade, dissolving one by one until “viscosity” is the last word standing
The Story
In 1922, the English mathematician Lewis Fry Richardson summarized his theory of atmospheric turbulence in a quatrain: “Big whorls have little whorls / Which feed on their velocity / And little whorls have lesser whorls / And so on to viscosity.” The verse describes the energy cascade — the central mechanism of turbulent flow. Energy enters at the largest scales, transfers through progressively smaller eddies, and is finally destroyed by viscous friction at the smallest scales. Andrey Kolmogorov would later formalize this as the -5/3 power law: the energy spectrum of turbulence falls off as the wavenumber raised to the negative five-thirds power. Richardson compressed the entire theory into twenty-one words.
What makes the poem extraordinary is its lineage. Richardson was paraphrasing Jonathan Swift, who wrote in 1733: “So, naturalists observe, a flea / Hath smaller fleas that on him prey; / And these have smaller still to bite ‘em, / And so proceed ad infinitum.” Swift was describing parasitism. Richardson repurposed the recursive structure for fluid dynamics. A poem about self-similarity across scales, paraphrased from a poem about self-similarity across scales — creating a hundred-year chain of self-similar verse about self-similarity. The medium and the message collapse into one another, like an eddy feeding on its own momentum.
The twenty-one words also encode their own hierarchy. “Big” and “whorls” belong to the energy-containing range. “Little,” “feed,” “velocity” sit in the inertial subrange. “Lesser,” “so,” “viscosity” mark the dissipation range where motion ends. And the word “whorls” appears at every level — line one, line three, the echo particles — because whorls are what turbulence IS, at every scale.
The Take
The experience makes Richardson’s poem a literal particle system. You begin with four lines of warm gold italic text — readable, still, a poem on a page. As you scroll, the words lift off their baselines and enter a curl noise velocity field. Each word finds its place in the energy cascade: “Big” drifts in slow, sweeping arcs driven by the lowest-frequency octave. “Little” and “feed” respond to two octaves and move faster. “Viscosity” and “so” feel all three octaves — jittery, small-scale, rapidly changing direction. The poem describes its own destruction as it happens.
Echo particles multiply the effect. The word “whorls” appears at every cascade level — five copies at energy scale, eight at inertial, twelve at dissipation — because whorls are the fundamental unit at every stage. Other words echo at their assigned scales: dozens of “on” and “to” and “so” filling the dissipation range like debris in a wake. During the final phase, dissipation-range words heat to amber, drive a 4x emissive multiplier through the bloom pass, and fade out. “Viscosity” is the last word to die — its death is deliberately delayed, lingering 40% longer than its peers. The thing that ends turbulence is the last thing to go.
The Tech
Multi-Octave Curl Noise
The velocity field is built from three octaves of 2D simplex noise passed through a curl operator — computing the perpendicular gradient to produce divergence-free (incompressible) flow. Octave 1 uses a spatial frequency of 0.3 and full amplitude for slow, large-scale circulation. Octave 2 uses frequency 1.2 at 55% amplitude. Octave 3 uses frequency 4.0 at 20% amplitude for rapid small-scale jitter. Energy-containing particles (cascade level 0) feel only octave 1. Inertial particles (level 1) feel octaves 1 and 2. Dissipation particles (level 2) feel all three. The amplitude ratios roughly follow Kolmogorov’s -5/3 power law. Each cascade level also has a speed multiplier — 0.6, 1.0, 1.6 — so smaller-scale particles move faster through their octaves.
Canvas Text Atlas
All 14 unique words are pre-rendered to a single canvas atlas using Instrument Serif italic at 64px. Each word is measured with measureText() and centered in its row with generous padding. The atlas stores per-word UV offset, UV scale, and aspect ratio, which are uploaded as per-instance attributes. This avoids any runtime text rendering — every word is a textured quad sampling the same atlas.
Instanced Word Particles
The word mesh uses InstancedBufferGeometry wrapping a single PlaneGeometry(1,1). Each of the approximately 90 instances (21 poem words plus ~67 echo particles) carries eight per-instance attributes: offset (vec2), scale (float), rotation (float), opacity (float), color (vec3), UV offset (vec2), UV scale (vec2), and aspect ratio (float). All attributes are updated every frame from the CPU simulation and flagged with needsUpdate. The vertex shader applies aspect-ratio scaling, rotation, and world-space offset. The fragment shader samples the atlas and multiplies by per-instance color and opacity.
HDR Post-Processing Pipeline
The renderer uses THREE.NoToneMapping and LinearSRGBColorSpace to preserve HDR values in the scene. A HalfFloatType render target feeds into EffectComposer with three passes: RenderPass, UnrealBloomPass (strength ramps from 0.45 to 1.6 during dissipation), and a custom FinalComposite shader. The composite shader applies Reinhard tone mapping (c / (1 + c)), not ACES — critical for keeping non-emissive words visible against the dark background. It adds a vignette and integer-hash film grain (no sine-based artifacts). Dissipation-range particles get a 4x emissive color multiplier to drive the bloom pass hard, creating the amber glow as words burn out.
Five-Phase Scroll Narrative
The 800vh scroll spacer is divided into six phases via threshold breakpoints. Phase 0 (0-10%): the poem sits readable at home positions, warm gold, no advection. Phase 1 (10-25%): lift-off — words leave their baselines, advection strength ramps from 0 to 1, echo particles fade in, poem color transitions from gold to cascade colors. Phase 2 (25-55%): cascade — the camera zooms from frustum 10 to 5, large vortices carry words in visible circulation. Phase 3 (55-75%): inertial range — camera tightens to frustum 3, maximum visual density, chaff particles fully visible, bloom begins to strengthen. Phase 4 (75-90%): dissipation — dissipation-range words heat to amber with emissive boost, fade out, “viscosity” lingers with a 40% death delay, inertial words begin fading. Phase 5 (90-100%): stillness — camera pulls back to frustum 6, remaining words fade, advection decays, the field empties.
200 Chaff Particles
Two hundred point-sprite particles fill the dissipation range — tiny dots (0.02-0.06 world units) advected by all three curl noise octaves at the fastest speed. They pulse with a sinusoidal opacity wobble and heat to emissive amber during dissipation, matching the word particles. They are the smallest eddies — below the scale of language, where turbulent energy finally becomes heat.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.