The Scatter | Blog | Artificial Noodles

Inspired by Chaotic scattering on Wikipedia

Built with WebGL2 · Custom fragment shaders · CPU billiard simulation

Techniques Fractal basin boundary computation · Elastic billiard physics · Progressive scan accumulation

Direction The fractal map of chaos — ten thousand fates painting an infinitely complex boundary

Result A neon triptych of deterministic outcomes whose boundaries are infinitely uncertain

The Story

In 1989, Pierre Gaspard and Stuart Rice posed a deceptively simple problem. Arrange three hard discs in an equilateral triangle. Fire a particle at them. The particle enters, bounces elastically off the discs, and eventually exits through one of three gaps. No friction, no spin, no randomness whatsoever — pure Newtonian mechanics, as deterministic as a system can be.

And yet the outcome is chaos.

Change the particle’s impact parameter by one ten-thousandth and it exits through a completely different gap. The boundary between “exits left” and “exits right” is not a clean line — it is a fractal, an infinitely nested interleaving of fates where every magnification reveals more structure, more sensitivity, more uncertainty. The Gaspard-Rice scattering system became a landmark in chaos theory because it demonstrated something profound: determinism does not imply predictability. The equations are exact. The initial conditions are not. And in that gap between mathematical precision and physical measurement lives an infinity of possible outcomes.

The human truth is disquieting. To predict which gap a particle exits, you need to know its entry angle to infinite decimal places. Certainty requires infinite precision, and we are finite beings. Every measurement truncates. Every prediction eventually fails. The fractal basin boundary is where that failure lives — not as a defect in the physics, but as a fundamental feature of deterministic chaos.

The Take

The experience turns this mathematics into a fractal painting machine. The screen represents parameter space: each pixel encodes a unique combination of impact parameter and entry angle. For every pixel, a particle is fired into the three-disc system and its fate is tracked — which gap does it escape through? The answer becomes a color.

Your cursor drives a scanning beam that fires thousands of trajectories per second, painting exit colors across the canvas in real time. At first the results look like noise — scattered pixels of scarlet, chartreuse, and violet with no apparent pattern. But as the scan accumulates, fractal order emerges from the chaos. Broad regions of solid color appear where nearby initial conditions share the same fate. Between them, the basin boundaries resolve into infinitely intricate filaments where all three colors interleave in nested stripes thinner than a pixel.

The void-black pixels are the most interesting. These mark trajectories where the particle bounced more than 256 times without escaping — trapped in a near-periodic orbit between the discs, computation exhausted before fate was determined. They trace the fractal skeleton of the system, the set of initial conditions that lead to infinite bouncing. The edge of certainty, rendered as absence.

Move the cursor slowly across a basin boundary and watch the colors shatter into finer and finer stripes. That visual fragmentation is the fractal dimension made tangible — the closer you look, the more complexity you find, forever.

The Tech

The simulation runs as a hybrid CPU-GPU pipeline, with the billiard physics computed on the CPU and the visualization composited on the GPU.

Billiard simulation: For each pixel in parameter space, the CPU fires a particle from coordinates (b, theta) where b is the impact parameter and theta is the entry angle. The particle trajectory is computed analytically: ray-circle intersection tests against three discs of radius 1.0 with centers spaced 2.5 apart in an equilateral triangle. On each collision, the velocity reflects elastically using v’ = v - 2(v . n)n where n is the surface normal at the impact point. The simulation iterates up to 256 bounces per trajectory.
Exit classification: When a particle’s trajectory clears the bounding region of the disc triangle, its exit gap is determined by the angle of the escape velocity vector relative to the triangle’s geometry. Three gaps yield three colors — a clean triadic classification.
Progressive accumulation: Basin colors are written to an RGBA texture, with the alpha channel serving as a scan mask. The cursor-guided beam computes approximately 5000 pixels per frame for responsive interactivity. A background fill processes 500 pixels per frame to steadily complete the image. When the cursor is idle, a spiral auto-scan radiates outward from center, ensuring the full basin map eventually renders without user input.
Neon triadic palette: Scarlet (#ff2d55), chartreuse (#c6ff00), and violet (#7c4dff) on void black (#08080c). The three colors were chosen for maximum chromatic separation — they sit at roughly 120-degree intervals on the color wheel — so that fractal basin boundaries remain visually readable even at sub-pixel interleaving scales.
WebGL2 composite shader: A single fullscreen quad samples the basin texture and applies the final presentation layer: radial vignette to draw focus inward, a soft glow around the scan beam position to indicate active computation, and film grain to break up banding in the solid-color regions.

Experience: The Scatter

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.