Fold a Julia fractal until the math finally makes sense

Multiplying two complex numbers is really rotating and stretching. Say that in a math class and eyes glaze. Show it as a grid that visibly twists when you multiply, and the fractal at the end stops being magic.

How to Fold a Julia Fractal, by Steven Wittens, is an essay that builds the Mandelbrot and Julia sets from the ground up, and every step is a live WebGL diagram rather than a static picture. The numbers rotate, the grid folds, the famous shape assembles itself out of an operation you can now feel. Wittens published it on January 5, 2013, and the diagrams still run, thirteen years of browser churn later, which for WebGL content is its own small miracle.

The essay does not stop at the pretty shape, either. It walks from what a complex number even is, through the repeated fold-and-stretch that generates the fractal, out to why the same arithmetic underpins waves and quantum mechanics. The footer credits the whole show in four words: diagrams powered by MathBox.

The library that draws the math

MathBox is a library Wittens built for exactly this job: presentation-grade mathematical graphics in the browser. It sits on Three.js, the standard WebGL toolkit, with his ShaderGraph compiler assembling the GPU programs underneath. It is MIT-licensed and sits around 1,500 GitHub stars.

What separates it from raw Three.js is that it is declarative. The quick start reduces every scene to four decisions: a camera, a coordinate system, some data, and a shape to draw the data as. Wittens declares a cartesian grid, an interval of sample points, a curve. When the essay needs the grid to fold, he declares the folded state and the library animates the transition between the two.

So the essay is not illustrated with renders of math. It is illustrated with the math itself, running, which is why you can watch the transformation instead of trusting a caption.

The wider lesson is about what the web is for. A printed page can show you the Mandelbrot set. Only a page that computes can show you the folding motion that produces it, one frame at a time, keyed to the sentence explaining it.

Fold one yourself

mathbox.org carries dozens of live examples, field lines to a full solar system, each one linking straight to its source. And the quick start above is shorter than it sounds: it walks you from an empty HTML file to an animated sine wave with a handful of declared primitives, camera, axes, grid, curve, play. The distance between reading this essay and drawing your own moving math is one free afternoon.

More math and machinery you learn by moving it: a mechanical watch you disassemble in the browser, and a circuit that re-solves itself while you watch.