Notes & Tones · An interactive essay

Drawn
by
Circles

Give me a stack of spinning circles, each turning at its own steady speed, and I can draw your signature, a heart, or the outline of a cello. That is a Fourier transform.

Scroll to begin ↓

A single circle, turning at a constant rate, draws the most boring thing in the world: a circle. Mount a smaller circle on the rim of the first and let it spin faster, and the pen at its edge already traces something stranger, a looping, petalled curve. Keep stacking circles, each smaller and quicker than the last, and there is no shape you cannot draw. A square wave. A treble clef. The coastline of Britain.

That is not a party trick; it is one of the deepest ideas in all of applied mathematics. Any signal, any wiggling line, any outline you can draw without lifting the pen, can be rebuilt as a sum of simple round motions. The recipe that tells you exactly which circles to use, how big and how fast, is the Fourier transform. It is the reason your photos compress, your music streams, and a hospital scanner can turn radio echoes into a picture of your knee. Let us build it from the ground up, starting with the simplest wiggle there is.

01 A wave made of waves

Begin with sound, because that is where Fourier's idea feels most natural. A pure tone is a sine wave: one frequency, endlessly smooth. Real sounds are not pure, but here is the claim that started everything, made by Joseph Fourier in 1807 and disbelieved by half of Paris: any repeating wave, however jagged, is just a stack of pure sine waves added together, each with its own frequency and loudness.

Take the hardest case, a square wave, all flat runs and vertical cliffs, seemingly the opposite of a smooth sine. Fourier says even this is only sines in disguise: the fundamental, plus a third as much of a wave three times as fast, a fifth as much at five times, and so on through the odd numbers. Add the first few and you get a lumpy approximation. Add more and the cliffs sharpen. Drag the slider and watch a curve built from nothing but sines lurch towards a square.

3 harmonics highest frequency ×5
Faint grey: the square wave we are aiming for. Coloured: the sum of sine waves so far. Watch the little overshoot at each cliff.

Two things to notice. The approximation gets better everywhere the wave is flat, but a stubborn little spike refuses to leave the corners; it only gets thinner, never shorter, hovering at about nine per cent above the true height however many waves you add. That overshoot has a name, the Gibbs phenomenon, and it is a permanent tax on describing a sharp edge with smooth curves. The recipe of amplitudes, "one of the fundamental, a third of the third harmonic, a fifth of the fifth", is exactly what a Fourier transform hands you.

Pythonimport numpy as np

x = np.linspace(0, 1, 1000)
wave = np.zeros_like(x)
for k in range(1, 2*H, 2):          # odd harmonics: 1, 3, 5, ...
    wave += (4/np.pi) * np.sin(2*np.pi*k*x) / k

02 A drawing is a signal too

Sound is a one-dimensional signal: loudness changing over time. A drawing seems different, but there is a lovely sleight of hand that makes it the same problem. Walk a pen around the outline of a shape and record its position at every step. Now write each position not as two numbers but as one complex number, the horizontal part as the real bit and the vertical part as the imaginary bit. Suddenly the outline is just a signal again, a single stream of numbers marching in time, and the very same Fourier transform applies.

Python# each point on the outline becomes one complex number
coords = x + 1j * y

# decompose the whole outline into rotating circles
fft   = np.fft.fft(coords)
freqs = np.fft.fftfreq(len(coords), d=1/len(coords))

radius = np.abs(fft)  / len(fft)    # how big each circle is
phase  = np.angle(fft)              # where it starts out
speed  = freqs                      # how fast it spins

What comes back is a list of circles. Each number the transform returns describes one circle: how big it is, how fast it turns, and where it starts. Stack them tip to tail, biggest and slowest at the base, and set them spinning. The pen at the very end traces your original shape, exactly. Below, pick a shape and press play. Then drag the slider to add or remove circles, biggest first, and watch how few it takes before the outline is recognisable.

Shape:
24 circles out of 256 available
The rainbow line is the pen's path. Nested circles are the rotating vectors; the biggest carries the slowest, largest motion.

A handful of circles gives you the rough gist, the big lobes and the overall sweep. The fine detail, the sharp point of the star, the crisp notch at the top of the heart, is carried by the small, fast circles at the tip of the stack. This is the whole personality of the Fourier transform in one picture: it sorts a shape into coarse structure and fine structure, slow circles and fast ones, and lets you dial in exactly how much detail you want.

03 Throw away the small circles

That dial is worth more than it looks. Notice what the slider actually does: it keeps the biggest circles and discards the smallest. When you draw a passable heart with twenty circles instead of two hundred and fifty-six, you have just described the same shape with a tenth of the numbers. You have compressed it, and the only thing you lost was detail so fine you could barely see it.

Pythondef reconstruct(fft, n):
    keep = np.zeros_like(fft)
    idx  = np.argsort(-np.abs(fft))[:n]   # the n biggest circles
    keep[idx] = fft[idx]
    return np.fft.ifft(keep)              # back to an outline

This is not a toy analogy; it is very nearly how real compression works. A JPEG chops your photo into little tiles and keeps only the strongest few frequencies of each, throwing away the subtle ones your eye would never miss. MP3 and its cousins do the same to sound, discarding frequencies you cannot hear. Both lean on close relatives of the transform you have been dragging. "Keep the big circles, bin the small ones" is, more or less, the entire idea of lossy compression.

The same move cleans up noisy data. Random noise tends to live in the small, fast components; strip those away and rebuild from the big slow ones, and the signal underneath comes back smoother. Turn the slider on the drawing above down low and you can watch it happen: the jitter goes first, the shape survives.

04 So what?

The Fourier transform is one of those rare ideas that stops being a topic and becomes a lens. Once you have it, you start seeing everything as a recipe of frequencies. A chord is a short list of loud circles. An image is a two-dimensional field of them. An earthquake, a stock chart, the brightness of a distant star, all yield their secrets to the same question: what simple, steady rhythms, added together, would produce this mess?

And it earns its keep everywhere. The fast algorithm that computes it, the FFT, runs in a whisker over linear time and quietly powers your wifi, your noise-cancelling headphones, and the radio in your pocket. A hospital MRI does not photograph you at all; it collects raw measurements in frequency space and runs an inverse transform to conjure the image. The engineer analysing a bridge's vibrations, the astronomer hunting a planet's tug on its sun, the app tuning your guitar, are all, underneath, asking for the list of circles.

If you would like to see this run on a real photograph rather than tidy parametric shapes, its companion code-along, Drawing Rudolph with Maths, works the whole pipeline in Python: a festive project that turns a reindeer into a signal and draws it back.

Every shape is a chord you can see, and every sound is a drawing you can hear. The Fourier transform is only the dictionary between them.