Learning · A Math Garden
The Math Garden
Those hypnotic pictures and videos made from equations aren't magic, and they aren't hard. Most of them come from two ideas: a point going round a circle (sine and cosine) and doing something simple over and over (iteration). Ten little gardens, in order, each with its equation, sliders to play with, and a few things to try. Everything runs live in your browser, and every garden can save a picture or record a short video to post.
1 · sin and cos
Circles make waves
Walk a point around a circle. Its height, plotted against time, is a sine wave; its left-right position is cosine. That's all sin and cos are. Stack a few circles riding on each other, each spinning at its own speed, and you can build almost any wave shape. That trick is called a Fourier series, and it's how your phone stores sound.
Try this: start with 1 circle (a pure sine), then slide up. With 12 circles the wave is almost a perfect square, but there are always little ears at the corners. They never go away, however many circles you add. That's the Gibbs phenomenon.
2 · two waves at once
Two waves make a curve
Now let one wave drive a pen left and right while another drives it up and down. When the two speeds make a simple ratio, 3 to 2 say, you get a Lissajous figure, the shape on old oscilloscopes and the ABC logo. Add a little friction so the swings die away, and you have a harmonograph, the pendulum drawing machine of the 1800s.
Try this: a = 3, b = 2 is a pretzel. Nudge a to 3.01 and turn the friction up a little: the curve slowly drifts and spirals in, and that's a harmonograph. Whole-number ratios close up into loops; messy ones never repeat.
3 · wheels in wheels
The spirograph
Remember the toy? A small gear rolls around inside a big ring, and a pen through a hole in the gear draws loops. It's garden 1 again, one circle riding on another, but now the pen leaves a trail. The curve is called a hypotrochoid. When the two wheel sizes make a simple fraction the drawing closes into a flower; otherwise it keeps going, slowly filling the ring.
Try this: r = 0.25 makes a clean four-lobed star; r = 0.37 takes a long time to close. Push the pen past the wheel's edge (d above r) and the loops get little curls.
4 · equation art
Equations that draw with lines
Many of the equation pictures on Instagram are made like this. Draw 2,000 straight lines. Line number k starts at one point and ends at another, and both points come from sin and cos of k. No single line is interesting. Together they weave curved shapes nobody drew, made only of straight lines, the way string art works. Mathematician and artist Hamid Naderi Yeganeh is known for drawing birds, boats and flowers this way.
Try this: set all four to 1 and you get a simple loop. Small whole numbers (1 to 4) give clean, symmetrical flowers and butterflies; bigger ones fill the canvas with lace.
5 · nature's favorite angle
The golden angle
Plant seed number n a little farther out than the last, and turn by the same angle each time. At most angles you get boring straight spokes, with gaps between them. At 137.5°, the golden angle, the seeds pack perfectly with no gaps, and two sets of spirals appear, running opposite ways. Count them and you'll get neighboring Fibonacci numbers, like 21 and 34. That's how sunflowers, pinecones and daisies do it.
Try this: drag the angle slowly away from 137.51°. Even a tenth of a degree off, the spirals turn into spokes with gaps. At 137.51° there's never a gap, however many seeds you add.
6 · order from chance
The chaos game
Pick three corners of a triangle and a starting dot. Roll a die, jump halfway toward the corner it picks, mark the spot, and repeat. Pure chance, and yet out comes the Sierpiński triangle, holes within holes forever. Swap the rule for four little stretch-and-turn moves, chosen with the right odds, and the same game grows Michael Barnsley's fern, every frond a copy of the whole.
Try this: watch the first few hundred dots: they look like noise. By a few thousand the shape is unmistakable, and nothing in the rules ever mentions a fern.
7 · iteration
A strange attractor
Now the other big idea: take a point, push it through a formula, and feed the answer back in. Again, and again, a million times. These formulas are credited to the writer and mathematician Clifford Pickover. The point jumps around chaotically, never exactly repeating, but it always lands somewhere on the same ghostly ribbon. The glow is just where the points pile up. Change four numbers and you get a completely different creature.
Try this: slide one number slowly and watch the ribbon morph. Some settings collapse into a few dots: the point has found a loop and gives up the chaos. "Surprise me" keeps rolling until it finds one that doesn't.
8 · the butterfly effect
The Lorenz butterfly
In 1963 the meteorologist Edward Lorenz boiled the weather down to three equations and found something unsettling: two runs that start almost exactly the same soon go completely different ways. Here two points start one millionth apart, one rust and one blue. For a while they move as one. Then they split, each looping around the two wings of the "butterfly" on its own schedule. That's why no forecast can see more than a couple of weeks ahead.
Try this: watch the distance in the corner. It grows and grows until the two points have nothing to do with each other. Then turn ρ down below about 24: the chaos stops, and both points settle onto a wing and stay there.
9 · complex numbers
The Mandelbrot set
The most famous picture in math, from the shortest formula. Every point on this map is a number c. Start with z = 0 and repeat z → z² + c. For some c the numbers stay small forever: those points are black, the set. For the rest the numbers run away to infinity, and the color says how fast. The edge between the two is endlessly detailed. Click to zoom in, and you'll keep finding spirals, seahorses and tiny copies of the whole set.
Try this: go to Seahorse Valley and keep clicking into a spiral. After about a hundred-thousand-times zoom the picture turns blocky. That's not the math giving out, it's your graphics card running out of decimal places.
10 · the other half
Julia sets
Same formula, z → z² + c, with the roles swapped: now c stays fixed and each point on the map is the starting z. Every point of the Mandelbrot set has its own Julia set. Pick c from inside the black and the Julia set is one connected piece; pick it from outside and it shatters into dust. Move over the little Mandelbrot map to choose c.
Try this: run along the edge of the black on the little map. Right at the boundary the Julia sets are at their most intricate: lightning bolts, dragons, rabbits.
Go deeper
3Blue1Brown — Grant Sanderson's animated math videos. His Fourier series and complex numbers videos are the best way into gardens 1 and 9.
Numberphile — mathematicians with brown paper and markers, including several on the Mandelbrot set.
The Coding Train — Daniel Shiffman codes these live, from the Mandelbrot set to Fourier drawings, explaining every line.
Paul Bourke: Clifford attractors — the attractor in garden 7, with dozens of beautiful settings to try.
Inigo Quilez — the master of drawing with formulas in shaders, the same trick the Mandelbrot here uses.
Plain JavaScript, a 2D canvas for gardens 1 to 8 and a WebGL shader for 9 and 10. Every pixel is computed in your browser; nothing is downloaded. View source to see each equation in code.