The Scale
The story behind The Scale
Inspired by Self-similarity on Wikipedia
Built with Pure WebGL2 · GLSL Fragment Shader · Distance Estimation
Techniques Mandelbrot Iteration · Derivative Tracking · Smooth Coloring · Adaptive Glow
Direction You carry detail with you like a spotlight
Result A fractal that simplifies when you look away and deepens when you look closer
The Story
Self-similarity is nature’s favorite shortcut. A fern leaf is a miniature fern. A river delta branches like the tributaries that feed it. Lightning forks the same way at every scale, from cloud to ground. The property was formalized by Benoit Mandelbrot, who coined “fractal” from the Latin fractus — broken. The geometry of irregularity.
The Mandelbrot set is the canonical example. Generated by iterating z = z² + c for every point on the complex plane, it produces a shape of literally infinite boundary complexity. Zoom into any edge and you find miniature copies of the whole set, surrounded by spiraling filaments, surrounded by smaller copies, endlessly. The entire structure encoded in four characters of algebra.
What fascinates me is the relationship between iteration count and visible detail. Run the formula five times and you see a rough blob. Run it a hundred times and the boundary explodes with spirals, seahorse tails, and archipelagos of miniature Mandelbrots. The detail was always there — you just weren’t looking hard enough.
The Take
The fractal begins as a soft, glowing silhouette — an ambiguous shape that gradually resolves over twelve seconds into a recognizable Mandelbrot outline. The boundary glows with a wide, diffuse teal aura. It’s atmospheric but imprecise. Something is there, but the detail is withheld.
Move your cursor and the boundary sharpens beneath it. Where you look, the iteration count surges from 10 to 96 — revealing the full complexity of the fractal edge. Spiraling filaments, miniature bulbs, the delicate branching of the antenna. The glow tightens from a soft halo to a sharp luminous line. Move away and the detail dissolves back into softness. You carry resolution with you like a flashlight in fog.
The metaphor is precise: you don’t reveal a hidden image. You literally compute more of it. The fractal boundary has infinite detail at every point — the only question is how many iterations you’re willing to spend. Your cursor answers that question spatially.
The Tech
Mandelbrot with Distance Estimation
Every pixel maps to a complex number c and iterates z = z² + c from z = 0. Alongside z, the shader tracks the derivative dz/dc via the recurrence dz = 2·z·dz + 1. When the orbit escapes (|z|² > 1024), the distance to the set boundary is estimated as d = 2|z|·ln|z| / |dz/dc|. This gives a per-pixel distance field that drives the glow rendering — no edge detection, no post-processing. The boundary emerges from the mathematics.
Cursor-Driven Iteration Depth
The maximum iteration count varies per-pixel based on cursor proximity. A Gaussian falloff (exp(-d²·4)) maps cursor distance to a 0–1 proximity value, which interpolates maxIter between baseDetail (5–10, ramping with time) and 96 (near cursor). The proximity effect is gated on interaction — before the first cursor movement, no proximity boost applies, keeping the initial view simple.
The for loop runs to a fixed ceiling of 128 with an early break when i >= maxIter. GPU threads in the same warp share similar iteration counts (proximity is spatially coherent), so the branch is efficient.
Adaptive Glow Width
The glow isn’t just brighter near the cursor — it’s sharper. Two glow layers (core and halo) have widths that depend on the proximity value. Far from the cursor: core width 3px, halo 20px — producing a wide, atmospheric aura. Near the cursor: core 1px, halo 8px — tight, precise lines. The visual effect: the boundary glow contracts and focuses as your cursor approaches, reinforcing the “deepening” metaphor.
Smooth Coloring and Palette
Escaped pixels use the standard smooth iteration formula: n - log₂(log₂(|z|²)) + 4 for continuous coloring without banding artifacts. The smooth count indexes into a cyclic four-stop palette (teal → cyan → blue → violet), cycling at 0.05·smoothN — producing approximately five color bands across the exterior. Interior points use a subtle gradient based on the final orbit magnitude.
Idle Reveal
The base iteration count ramps with real time (u_time * 0.08), independent of cursor activity. At load, the fractal is a rough 5-iteration blob. Over 12 seconds, it refines to 10 iterations — enough to show the recognizable Mandelbrot silhouette with its main cardioid, period-2 bulb, and antenna. This passive reveal draws idle viewers in before the cursor interaction provides the payoff.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.