The Invariant
The story behind The Invariant
Inspired by Hutchinson operator on Wikipedia
Built with Pure WebGL2 · GL_POINTS · GL_LINES · Additive blending
Techniques CPU-side chaos game iteration · IFS affine transforms · spring-damped preset morphing · trail ring buffers · HSL per-particle hue variance
Direction Structure is inevitable — randomness is just the path there
Result Twelve thousand particles converging from noise to fractal attractor, morphing between five IFS presets, reshaped by your cursor
The Story
In 1981, John Hutchinson formalized something that had been lurking in fractal geometry: take a finite set of contractive affine transformations, apply them collectively and repeatedly to any starting shape, and the result always converges to the same unique fixed set — the attractor. It doesn’t matter what you start with. A circle, a square, a random scattering of points. The operator contracts everything toward the same destination.
The chaos game makes this tangible. Pick any random point. Choose a transformation at random. Apply it. Plot the result. Repeat. After a few dozen iterations, the point is indistinguishable from the attractor. Do this with thousands of points simultaneously, each making independent random choices, and they all end up in the same place. Every random path leads to the same destination.
The human truth: structure doesn’t emerge despite randomness — it emerges through it. The randomness isn’t noise obscuring a signal. It IS the signal.
The Take
The Invariant makes this convergence visible. Twelve thousand particles spawn as random static across the screen — visual noise, no structure. Each particle independently runs the chaos game, picking a random contraction from the current IFS and applying it to its position every frame. Within two seconds, the Sierpinski triangle crystallizes from nothing. That moment — when geometric order snaps into focus from pure randomness — is the emotional core.
But the experience doesn’t stop at one fractal. Every twelve seconds, the IFS parameters spring-interpolate to a new preset: Sierpinski triangle morphs into Barnsley fern, fern spirals into dragon curve, dragon unfurls into logarithmic spiral, spiral pinwheels into vortex. During each transition, the particles track the changing mathematics — the old attractor dissolves as the new one emerges, and every particle finds the new destination without being told where it is.
Your cursor reshapes the mathematics in real time. Horizontal movement adds rotation to every transformation, twisting the attractor into spiral variants. Vertical movement adjusts contraction ratios, compressing or expanding the fractal. Fast movement scatters particles off the attractor with gaussian noise — and they re-converge. Every time. The mathematics are inevitable.
The Tech
CPU-Side Chaos Game
All 12,000 particles iterate on the CPU in a Float32Array. Each frame, for each particle: generate a random number, walk the cumulative probability distribution to select an IFS map, apply the affine transformation p_new = s * R * p_old + t. The entire iteration costs ~0.3ms per frame — cheap enough to leave headroom for everything else.
Each IFS map is defined as { scale, rotation_angle, translation_x, translation_y, probability }. The Barnsley fern uses weighted probabilities (stem 1%, left leaflet 7%, right leaflet 7%, main frond 85%) — a single probability distribution producing the entire fern geometry.
Trail Ring Buffers
Each particle maintains a ring buffer of its last 6 positions. These render as GL_LINES with linearly decreasing alpha. During convergence, the trails show visible paths from chaos to order — long streaks collapsing inward. In steady state, trails become micro-hops within the attractor’s self-similar regions. The trails make the dynamics visible: you can see particles circulating, not sitting still.
Additive Density Luminance
Particles render as GL_POINTS with blendFunc(SRC_ALPHA, ONE) — pure additive blending. Where particles overlap (attractor vertices, high-density regions), the colors accumulate toward white. The fractal’s structure reveals itself through brightness, not outlines. No post-processing needed — the math produces its own glow.
Each particle has a fixed random hue offset of +/-30 degrees around a cyan base (190 degrees), converted via HSL-to-RGB in the fragment shader. The result: teal-to-violet color variation across the particle field, with bright white hotspots where dozens of particles coincide.
Spring-Damped Preset Morphing
IFS presets have different numbers of maps (Sierpinski: 3, Barnsley: 4, Dragon: 2). During transitions, the shorter set is padded with identity-like maps (scale 0.01, zero probability) so interpolation always operates on equal-length arrays. Parameters interpolate over 3 seconds using smoothstep easing. The particles track the changing attractor continuously — no discontinuity, no teleportation.
Cursor-to-Mathematics Mapping
Mouse X maps to a rotation offset applied to all IFS transformations (+/-0.3 radians). This twists the attractor — a Sierpinski triangle becomes a Sierpinski spiral. Mouse Y adjusts scale factors (+/-0.08), compressing or expanding the attractor’s extent. Mouse velocity adds gaussian scatter noise (sigma proportional to speed), with spring-damped decay (k=8.0) pulling particles back to the attractor.
An idle auto-animation kicks in after 5 seconds without input (immediately on mobile), producing gentle sinusoidal parameter oscillation so the fractal breathes on its own.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.