Measuring the Strangeness of Strange Attractors
The story behind The Convergence
Inspired by Correlation sum on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer (UnrealBloomPass) · Canvas 2D Overlay
Techniques RK4 Integration · Bloom · Vignette · Film Grain · Log-Log Scale Visualization
Direction Hide a Lorenz attractor inside 20,000 particles of noise and let scroll position run the Grassberger-Procaccia algorithm to reveal it
Result A scroll-driven measurement where apparent static resolves into butterfly wings and a real-time correlation dimension converges to 2.05
The Story
In 1963, Edward Lorenz was running a weather simulation on a Royal McBee computer. To save time, he restarted a run from the middle, typing in values from an earlier printout. The printout showed 0.506. The computer had stored 0.506127. The rounding error was one part in five thousand. Within a few simulated months, the weather diverged completely. Chaos, as a mathematical discipline, was born from a typo.
Twenty years later, Peter Grassberger and Italo Procaccia asked a question that sounds simple and turns out to be profound: if you have a set of points — a trajectory recorded from some system — how do you tell whether the system is chaotic or just random? Both look the same. A Lorenz attractor and a cloud of white noise are visually indistinguishable when you scatter them on a screen.
Their answer was the correlation sum. Take every pair of points. Count how many pairs are closer than some distance r. As r shrinks, the count drops — but the rate at which it drops is different for chaos and noise. For noise, the count scales with the full dimension of the space (3D noise drops as r³). For a strange attractor, it scales with the fractal dimension — a number that isn’t an integer. The Lorenz attractor is approximately 2.05-dimensional. Not a surface. Not a volume. Something in between.
The correlation sum is the measurement that reveals hidden structure in apparent formlessness. We wanted to make that measurement into an interaction.
The Take
A dark screen. Twenty thousand blue dots scattered across it in what looks like random static. Title: THE CONVERGENCE. Subtitle: Is this noise, or is this something? A faint circle follows your cursor — the threshold radius, the r from the Grassberger-Procaccia equation. Inside it, thin lines flash between nearby point pairs.
Scroll down. The radius doesn’t shrink (that would be too literal). Instead, something subtler happens: the noise dissolves. The random offsets that disguise the underlying structure fade away, and the points begin to cluster. Filaments appear. Two lobes emerge. The Lorenz butterfly — the most famous strange attractor in mathematics — was being traced from the first frame, hidden in plain sight under Gaussian noise.
In the bottom-right corner, a log-log plot builds itself point by point. The dots form a line. The slope of that line is the correlation dimension. A readout ticks toward 2.05. And when it locks: D₂ ≈ 2.05. This was never noise.
The Tech
The pipeline has four layers: the dynamical system, the particle renderer, the proximity mechanics, and the correlation computation.
The Lorenz system generates all 20,000 points via fourth-order Runge-Kutta integration (σ=10, ρ=28, β=8/3, dt=0.004). A 500-step burn-in lets the trajectory settle onto the attractor before sampling begins. Each point records its true attractor position and a pre-computed Gaussian noise offset (Box-Muller transform, three independent axes). The noise amount is controlled by scroll progress through a smoothstep easing — stays high for the first half of scrolling, then drops dramatically in the second half, producing a delayed-revelation arc where structure suddenly snaps into focus around 70-80% scroll.
The particle renderer uses THREE.Points with a custom ShaderMaterial. The vertex shader scales point size by pixel ratio and inverse depth, with a noiseBoost factor that makes particles slightly larger during the noise phase (denser cloud) and smaller at convergence (individual dots tracing the attractor). The fragment shader draws circular point sprites with soft edges via smoothstep, shifts color from dim blue-grey (#4477aa) toward bright cyan (#88ccff) as scroll progresses, and applies depth-based fade so further particles read as atmospheric rather than flat. Alpha is 0.5 with normal blending — additive blending was attempted first but 20,000 overlapping sprites summed to nuclear white.
Connection lines use THREE.LineSegments with a pre-allocated buffer (6,000 vertex slots). Every 100ms, the system scans for point pairs within the threshold radius near the cursor. The threshold circle is a THREE.RingGeometry positioned at the mouse’s 3D projection onto the z=0 plane, scaled by the scroll-driven radius. The search is brute-force within a capped sample of 500 nearby points — fast enough at 10Hz update rate, and the visual result (flickering connection lines inside the cursor’s circle) sells the idea of measuring proximity.
The correlation integral is pre-computed on the true attractor positions (no noise) using 1,500 well-spaced sample points (every 13th point from the 20,000 trajectory). Fifteen radii are tested from 0.02 to 0.786 world units, focused on the scaling region where the power-law behavior is cleanest. Linear regression on the log-log data produces a slope that converges toward ~2.05 — the known correlation dimension of the Lorenz attractor. The log-log plot renders on a 2D canvas overlay, revealing data points and the best-fit line progressively with scroll.
Post-processing runs three passes through EffectComposer: a render pass, UnrealBloomPass with strength that ramps from 0.15 (subtle atmosphere) to 0.5 (glowing attractor at convergence), and a custom atmosphere shader that adds vignette darkening and animated film grain.
The Experience
You open it. Noise. Twenty thousand dots that could be anything — white noise, sensor drift, radio static. The title asks: Is this noise, or is this something?
You scroll. Nothing changes for a while. The smoothstep easing holds the noise steady through the first half — patience is part of the measurement. Then the dots begin to tighten. A concentration appears. Two clusters, separated by a narrow gap. Filaments connect them. You’re watching the Lorenz butterfly resolve from randomness, wing by wing.
The log-log plot builds in the corner. The data points fall on a line. The slope reads 2.05. Not 3 (which would mean noise filling space). Not 2 (which would mean a flat surface). 2.05 — a fractal, a strange attractor, a deterministic system masquerading as chaos.
D₂ ≈ 2.05. This was never noise.
The butterfly was there from the first frame. The chaos was deterministic from the first calculation. You didn’t create the structure — you revealed it, by scrolling through the same narrowing-radius logic that Grassberger and Procaccia used in 1983. Science as interaction design. The user as measuring instrument.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.