How Spinning Circles Draw Anything

Pluck a guitar string and hum the same note, and you hear two different sounds with the same pitch. Draw a cat on a napkin, and you have a shape no formula seems to describe. Both, it turns out, can be built out of the simplest motion there is: a point going round a circle at a steady speed. Put a circle on the rim of a circle, another on the rim of that, and so on, give each one a whole-number speed, and the last point can trace any wave that repeats and any closed drawing.

Here is an eighth note drawn that way. The pen is the blue dot at the end of a chain of turning circles, and the slider sets how many circles the chain has. Slide it down to a handful and watch the note melt, then back up:

With one circle the pen just goes round. With five it draws a loop that only hints at a flag; with ten the head, stem, and flag are there but soft; with forty the note is crisp, and with a hundred and twenty the copy sits on the dashed original. Every circle in that chain turns at a steady whole-number speed: once per lap, twice, three times, some clockwise and some counterclockwise. Nothing else moves.

The idea behind this goes back to Joseph Fourier, who used it in 1807 to work out how heat spreads through a solid . It now runs inside every phone: in how sound is recorded and squeezed into small files, how photos are stored, and how radios pick one station out of the air. I'll build it up from a single circle.

One circle

Take one circle and a dot that goes round it at a steady speed, counterclockwise. Ignore everything about the dot except its height above the center line. Press play, or drag the dot, and watch its height drawn out over time on the right:

The curve on the right is a sine wave. It isn't a curve that happens to look like the circle. It is the circle, unrolled along time: the top of the circle is the crest, the bottom is the trough, and the steep middle of the wave is where the dot moves straight up or down past the center line. One turn of the dot draws one complete wave, and the next turn draws the same wave again.

I'll measure time by how far a dot of speed 1 has turned, in radians, so one full turn takes 2π. That's why the time axis is marked in multiples of π. The height at time t is then just \sin t, which is what the sine button on a calculator gives.

Three things set a wave like this. The first two are the size of the circle and how fast the dot goes round. Make the radius bigger or smaller, and step the speed up to several turns per lap, keeping an eye on the dashed speed-1 wave for comparison:

The radius is the wave's amplitude, how far it rises above the middle line. The speed is its frequency, how many complete waves fit into the same time. At speed 3 the dot goes round three times while the dashed wave makes one, so three crests sit where the dashed wave has one. A wave with radius \orange{r} and speed k has height \orange{r}\sin(kt).

The third thing is where the dot starts. So far every dot set off from the right-hand side of its circle, at height zero, heading up. Turn the knob to start the dot further round, at the brass mark, and compare the new wave with the dashed one that starts at zero:

The starting angle is the wave's phase. Moving the start further round doesn't change the wave's shape at all. It slides the wave earlier in time by exactly the angle you turned, because the dot reaches every point that much sooner. Start it a quarter turn round, at the top, and the wave begins at its crest: that's the cosine wave, \cos t. Sine and cosine aren't two different shapes. They are one circle, watched from two starting points.

Circles on circles

One circle makes one smooth wave. To make anything more interesting, put a second, smaller circle on the rim of the first, with its own dot going round at its own speed. The first dot now carries the second circle around with it, and the pen is the dot on the second circle. Step the second circle's speed up and change its size, and watch how the blue height wave is built from the two thin ones:

The pen's height is the first dot's height plus the second dot's height above the first, so at every moment the blue wave is the gray wave plus the orange wave, added point by point. Where both are high, the sum is higher still; where one is up and the other down, they partly cancel. With a small circle at speed 3 the big wave gets flattened shoulders. With speed 2 it leans to one side like a shark fin. Two plain sine waves already make shapes that look nothing like sine waves.

Adding waves this way is called superposition, and it is what real waves do. Two ripples crossing on a pond, or two instruments playing at once, add their heights in exactly this way.

There is a reason I keep the speeds whole numbers. Look at the path the pen draws in the plane, not just its height. I'll make the second speed a slider that can stop between whole numbers. Watch whether the pen, after one full turn of the big circle, lands back on the orange ring where it started. The blue cross marks where the first turn ends:

At a whole-number speed like 3, the small circle makes exactly three turns while the big one makes one, so both are back where they started at the same moment, and the pen is on its ring. Then the whole motion repeats, exactly. At 2.5 the small circle is half a turn off after the first lap, the pen misses, and it takes two laps to line up. At 2.2 it takes five.

That is the whole reason for whole numbers. A wave that repeats every turn can only be made of circles that all come back to the start every turn, which means circles turning 1, 2, 3, or any whole number of times per turn. The slowest of them sets the beat, and is called the fundamental. The others, at whole-number multiples of its speed, are its harmonics. Every repeating wave on this page is built from a fundamental and its harmonics, and nothing else.

A square wave from smooth ones

The hardest test for this idea is a square wave: flat at +1 for half a turn, flat at −1 for the other half, with instant jumps between. It's what a switch flicked on and off at a steady beat produces. Every circle we have makes a smooth, round wave.

The recipe, which I'll show how to find in a later section, uses only odd speeds: 1, 3, 5, 7, and so on, with the wave of speed n made n times smaller than the first. Add the waves one at a time with the stepper. The orange wave is the one just added, and the blue wave is the sum so far. Press Play to hear the sum as a note while you add waves:

The first wave is a rough guess: right sign, wrong shape. The speed-3 wave is a third as tall, and it pushes the sum down at the middle of each half and up near the edges, flattening the top. The speed-5 wave flattens it more. By fifteen waves the tops are almost level and the jumps almost vertical. Each wave is smaller and faster than the one before, so it fixes a finer detail.

Here is the same sum built from circles. Each odd speed gets its own circle, stacked on the one before, with the newest in orange. Add circles and watch the pen's height sharpen into a square wave:

The big circle does most of the work, carrying the pen up for half a turn and down for the other half. Each smaller circle rides on the rim of the one before and, because it turns three, five, or seven times as fast, swings the pen a little up or down at just the right moments to flatten the top. Nothing in the chain ever stops or jumps. Every circle turns steadily, and yet the pen's height jumps.

Now look closely at the corners. Near each jump the blue sum doesn't stop at 1: it overshoots, rings, and settles. It's natural to expect the overshoot to fade as waves are added. Drag the number of waves up into the hundreds and watch the red line, which marks how high the first peak goes:

The ringing gets narrower as waves are added, squeezing in toward the jump, but it doesn't get shorter. At 10 waves the first peak reaches 1.180; at 200 waves it still reaches 1.179. The right-hand view stretches the region next to the jump so the ringing always fills the same width, and there it hardly changes at all. The overshoot settles at about 9% of the full jump from −1 to +1, and stays there forever .

This is the Gibbs phenomenon. It doesn't contradict the claim that the sum becomes the square wave. Pick any moment away from the jump, and with enough waves the ringing moves past it and the sum there settles to exactly 1. The overshoot never dies; it just moves closer to the jump.Henry Wilbraham worked it out first, in 1848 . It turned up again fifty years later in an exchange of letters in Nature about adding up waves, which Albert Michelson, who had just built a machine that added them mechanically , took part in. J. Willard Gibbs described the overshoot in his letter of 1899, and Maxime Bôcher gave it Gibbs's name in 1906. Exactly at the jump, every sine wave is zero, so the sum lands halfway, at 0.

Multiply and average

So far I've handed you the recipe. The real question runs the other way: given a wave, how do you find out which circles it's made of, and how big each one is? It sounds hopeless, since the waves are all added together into one curve. The trick that untangles them is to multiply the wave by a test wave and take the average over one turn.

Start with two plain sine waves, and multiply them point by point. Where both are positive or both negative, the product is positive; where they disagree, it's negative. Set the two speeds with the steppers and watch the purple product, its shaded area above and below zero, and its average:

With different speeds the product swings up and down, and the filled area above zero exactly balances the hatched area below, so the average is 0. Try any pair of different whole-number speeds and the balance holds every time. With the same speed, the product is a sine wave times itself. It's never negative, it rocks between 0 and 1, and its average is exactly ½.

The reason is that the product of two waves is itself two waves, one at the sum of the speeds and one at the difference (\sin a \sin b = \tfrac12\cos(a-b) - \tfrac12\cos(a+b)). A wave of any whole-number speed makes whole turns in one lap and averages to zero, except one of speed zero, which is a constant. Only when the speeds match is the difference zero, and only then does something survive the average. Waves of different whole-number speeds are called orthogonal.

Now use it. Here is a wave made of a few sine waves of unknown sizes and speeds. Step the green test wave through speeds 1 to 8; at each one, the figure multiplies, averages, and doubles the result to undo the ½. The bars on the right keep a record of what you've measured:

At speed 3 the product balances out and the bar stays flat: there's no speed-3 wave inside. Step through the rest. Speeds 2 and 5 come out positive, 0.9 and 0.5; speed 7 comes out at −0.3, which means that wave is upside down; everything else is zero. Those are exactly the numbers I used to build the hidden wave. The test wave of speed 2 is blind to the other components, because each of them is orthogonal to it.

The figure never reads the hidden numbers. It only multiplies and averages, over a thousand moments in one turn.

There's a catch. My hidden waves all started at height zero, like sines. A wave with a different phase gives a smaller average against the sine test, and a cosine gives nothing at all. The fix is to test with a cosine too. Turn the knob to slide the hidden wave's phase, and watch the two measured amounts, plotted as a point:

As the phase turns, the sine part shrinks while the cosine part grows, and the other way round, but the point they make never leaves the dashed circle. Its distance from the center is the wave's size, 0.8, whatever the phase. Its angle is the phase itself. So the two averages together pin down a wave completely: one number for how much, one for when it starts.

That is the full method. For each whole-number speed n, take twice the average of the wave times \green{\sin nt}, and twice the average of the wave times \green{\cos nt}:

The bar over a product means its average over one turn. Then the wave is the sum of all its pieces, f(t) = a_0 + \sum_n \left(a_n \cos nt + b_n \sin nt\right), where a_0 is the plain average of the wave, its middle level. This sum is called the wave's Fourier series.

The spectrum

Once the amounts are measured, the wave can be drawn a second way: not as height against time, but as a row of bars, one per speed, each as tall as the size of that speed's circle. That picture is the wave's spectrum. Pick a wave, and point at a bar to see the piece of the wave it stands for in orange:

The square wave's bars are the recipe from before, measured instead of handed over: nothing at even speeds, and 4/\pi n at odd ones, 1.27, 0.42, 0.25, and on down. The sawtooth uses every speed, with sizes falling as 1/n. The triangle uses odd speeds again, but its bars die away much faster. The pulse, on for a sixth of each turn, has a bar at speed 0, its middle level of 1/6, and gaps at speeds 6, 12, and 18.

The spectrum and the wave hold the same information: given the bars, plus the phases I've left out of the picture, you can rebuild the wave exactly. One describes it in time, the other in speed.

Why do the triangle's bars shrink so much faster than the square's? The square jumps, and the triangle only has corners. Sharp features need fast waves to draw them. Smooth the square's jumps into ramps and watch the high speeds on this scale, where each step down is ten times smaller:

With a sharp jump the bars follow the upper guide, 1/n: the speed-31 wave is still 3% of the first. Give the jump a short ramp and the bars follow 1/n for a while, then bend down onto a line as steep as 1/n^2. The wider the ramp, the earlier they bend. At the triangle, speed 31 is down to 0.1%.

This is a general rule. A jump costs sizes that fall as 1/n, a corner costs 1/n^2, and the smoother a wave is, the faster its spectrum falls away. Fine detail in time means a wide spread in speed.

Sound

Sound is the everyday place where all of this is real. A sound is air pressure going up and down at your ear, and a steady note is a pressure wave that repeats a few hundred times a second. Its repeat rate sets the pitch: the standard tuning note, the A above middle C, repeats 440 times a second. Its spectrum sets everything else about how it sounds.

A guitar string shows where a spectrum comes from. Pulled aside at one point and let go, it starts as two straight lines meeting at a corner. That shape, like any shape of a string pinned at both ends, is a sum of the string's own modes: half a sine wave between the ends, a whole one, one and a half, and so on, each vibrating at its own whole-number multiple of the lowest pitch. Move the pluck point and watch which modes the shape needs, and press Pluck to hear it:

Plucked a fifth of the way along, the string holds every mode except the 5th and 10th. Those modes have a still point, a node, exactly where the finger was, so they can't help make a shape whose biggest bend is there. Pluck in the middle and all the even modes vanish, since each has a node at the center. Pluck near the end, the way a sharp, bright guitar sound is made, and the higher modes grow.

Each mode vibrates at its own whole-number multiple of the lowest frequency, so the sound the string makes is a repeating wave whose spectrum is these bars. I've computed the motion as nothing more than the sum of the modes, each swinging at its own speed. The corner that runs back and forth along the string is what that sum looks like .

Now compare sounds with the same pitch but different spectra. Choose a recipe and press Play:

The pure tone is a single circle, and it sounds thin and flat, like a tuning fork or a test beep. The plucked recipe uses the mode sizes of the string from the last figure, plucked a fifth of the way along. The bowed one has every harmonic falling as 1/n, the sawtooth, which is close to what a violin string does while the bow drags it . The hollow one keeps only odd harmonics, the square wave's recipe, a little like a clarinet's low notes .

All four repeat 220 times a second, so they have the same pitch. What differs is the shape of each repeat, and the shape is set by the bars. Musicians call the difference timbre. Your inner ear does something close to this measurement: different spots along the cochlea respond to different frequencies, so the ear hears a sound partly as its spectrum.

Arrows that turn

The pair of numbers from the phase figure, a sine part and a cosine part that together act like one arrow, is a hint. Mathematicians have a number system in which arrows are the numbers: the complex numbers. Each one is a point in a plane, or the arrow from the center to it. The arrow one step right is 1; the arrow one step up is called i. Adding two complex numbers puts the arrows tip to tail, as with the circles. Multiplying them is where it gets useful. Drag the tips of the blue and orange arrows and watch their product:

The product always points at the sum of the two angles, and its length is the product of the two lengths. So multiplying by an arrow of length 1 does nothing but turn. Multiplying by i, which points straight up, turns any arrow a quarter turn counterclockwise; doing it twice turns it half a turn, which is why i \times i = -1. Multiplying by −1 turns it half a turn. Multiplication is turning.

Now take the arrow of length 1 at angle \theta. Its tip is at \cos\theta across and \sin\theta up, so it's the complex number \cos\theta + i\sin\theta. This arrow has a famous short name, e^{i\theta}, for reasons in the note below, and the only thing to know about it here is that it's a turn by \theta. Let \theta grow with time and the arrow spins. Turn the view to see the spinning tip spread out along time:

Looked at end on, it's the circle from the start of this page. From the side, the height of the tip draws \sin t. From above, its sideways position draws \cos t, in green. One spinning arrow, e^{it} = \cos t + i \sin t, carries both waves.Why the exponential? Grow \theta a little and e^{i\theta} gets multiplied by e^{i\,d\theta} \approx 1 + i\,d\theta, a tiny step at right angles to the arrow. Steps always at right angles to the arrow keep its length fixed and walk its tip round a circle. That's Euler's formula, e^{i\theta} = \cos\theta + i\sin\theta. A dot at speed k on a circle of size c is then just c\,e^{ikt}, and its starting angle can be folded into c by letting c be an arrow too.

That makes negative speeds easy to say: e^{-it} spins the other way, clockwise. And a plain up-and-down wave turns out to be two arrows spinning in opposite directions. Here an arrow spinning counterclockwise carries a second one spinning clockwise at the same speed. Change the second arrow's length, and watch the path of the tip:

With the arrows the same length, whatever one does upward the other does downward, and the tip just slides back and forth along the line: the plain wave \cos t = \tfrac12 e^{it} + \tfrac12 e^{-it}. With unequal arrows the tip leaves the line and goes round an ellipse. So the sine and cosine waves of the earlier sections were each a matched pair of circles, one per direction, and the two numbers measured for each speed are the arrow describing that pair.

Drawing with circles

Back to the note at the top. A drawing isn't a wave going up and down; it's a pen moving around a plane. But a point in a plane is a complex number, so a drawing traced once around, over one turn of time, is a repeating complex wave. Its pieces are single arrows c\,e^{ikt}, and nothing forces them into matched pairs any more. Speeds can be positive or negative, and each one stands alone.

Here is the smallest example: a big circle turning counterclockwise at speed 1, with a smaller one on its rim. Step the small circle's speed through negative and positive values and watch the closed path the pen draws:

At −2 the pen draws a rounded triangle, at −3 a rounded square, at +3 a peanut, and at −1 an ellipse. Two circles already make a family of shapes, and every one closes after one turn because both speeds are whole numbers.

To find the circles hidden in a drawing, the multiply-and-average trick works almost unchanged. Multiplying by e^{-ikt} turns each point back by kt, so it unspins the drawing at speed k. The circle that was turning at exactly that speed now stands still, while every other circle still turns a whole number of times and averages away. Here is a path made of three circles, at speeds 1, −2, and 3. Step the unspinning speed and watch the unspun path and its average, the purple arrow:

At −2 the purple path circles around a point off center, and the arrow to that point is the speed −2 circle: size 0.40, starting angle 30°. At 1 the arrow is the big circle, size 1. At 0 or 2 the purple path wraps evenly around the center and the average is nothing. One arrow per speed, each found on its own, exactly as the sine and cosine tests did for waves: the arrow is the pair of numbers in one.

That's everything needed to draw. Take a square, traced at a steady pace, and find its circles. Add them one at a time, biggest first:

One circle is a circle. Two, the second turning three times as fast the other way, pull it into a rounded square. By six the sides are nearly straight. The speeds come out as 1, −3, 5, −7, 9: every fourth one, alternating direction, because the square looks the same after a quarter turn and only those speeds respect that. A square has corners but no jumps, so its sizes fall as 1/k^2 and there's no overshoot.

Now the drawings. Pick a shape, slide the number of circles, or choose your own and draw any closed shape with one stroke:

The fish with 5 circles is a lumpy egg; with 20 it has a tail; with 80 the notch in the tail is sharp. The star needs more, because its ten corners are sharp. Whatever you draw, the same steps run: the drawing is cut into 512 evenly spaced points, each speed from −255 to 256 gets its arrow by unspinning and averaging, and the arrows are chained biggest first. With all 512 the pen passes through every one of the points exactly.

Greek astronomers built the same machine on paper. To follow the planets, Hipparchus and Ptolemy put the planet on a small circle, an epicycle, riding on a big one. In 1960 Norwood Russell Hanson pointed out that enough epicycles can follow any closed path at all, even a square .

Most of the drawing lives in a few circles. Here are the note's circles in order of size, on a scale where each step down is ten times smaller. Slide the cut and watch how close the copy stays:

The sizes fall off fast. The biggest circle has radius 0.43, on a note 1.8 units tall; the 10th is 0.026, and the 30th is under 0.002, a two-hundredth of the first. With 30 circles, 60 numbers instead of the 1,024 that list the 512 points, the copy never strays more than about 2% of the note's height, and the worst place is the sharp tip of the flag. With 100 it stays within half a percent.

Keeping the biggest

That last figure is the idea behind most of the compression in your pocket. Describe a signal by its spectrum, keep the big amounts, throw away the small ones, and store far fewer numbers for nearly the same result. Here is a sliver of sound, 256 measurements of the air pressure, made of a note with a little hiss on top. Slide how many frequencies to keep, biggest first:

With 5 frequencies, 4% of the numbers, the blue copy is the note without the hiss, and it differs from the original by only the hiss itself. With 1 it's a pure tone. Keeping 20 starts to bring back the hiss's biggest pieces, and little else changes. Real audio formats like MP3 and AAC cut sound into short overlapping windows like this one, describe each with a close cousin of these waves, and then spend their bits by a model of hearing: amounts the ear can't notice, often because a louder sound at a nearby frequency drowns them out, are stored coarsely or not at all .

Pictures work the same way, in two directions at once. JPEG cuts a photo into blocks of 8 by 8 pixels and describes each block as a mix of 64 fixed patterns, each a cosine wave across times a cosine wave down . Step through the patterns, or point at one:

The top-left pattern is flat: it sets the block's average shade. Patterns further right or further down change faster, like the faster circles. Finding how much of each pattern a block holds is the same multiply-and-average as before, done across and down. Drag the orange square to pick a block of the picture, and keep only its biggest amounts:

On a block of smooth sky, one amount, the average shade, is enough. This block has an edge running across it, so its amounts pile up in the first column, the patterns that change only downward. With 1 it's a flat gray square, with 4 the edge is there but soft and ringing, and with 12 it's sharp. Here is the whole picture, every block keeping only its biggest few:

With one amount per block the picture is a mosaic of flat 8-pixel tiles. With four, 6% of the numbers, the scene is all there, with smudges where edges cross blocks. With ten it's hard to tell from the original at this size. JPEG doesn't keep a fixed count per block. It rounds every amount to a coarse step, coarser for the fine patterns the eye notices least, and most small amounts round to zero . The big amounts stay; the small ones go.

Circles everywhere

Every figure on this page did the same two things. It found circles by multiplying and averaging, and it rebuilt something by adding them back up. Computers do the finding with the fast Fourier transform, which gets every amount for N points in about N \log_2 N steps instead of N^2. For a million points that's about twenty million steps instead of a trillion. James Cooley and John Tukey published it in 1965 , and it turned out Gauss had used the same trick around 1805, in work published only after his death .

The idea reaches well past sound and pictures. Fourier invented it to follow heat, because each circle's worth of temperature fades at its own steady rate, so the hard problem splits into many easy ones . The same split handles vibrating drums, quantum particles, and tide tables. And not every signal repeats: a single clap or one heartbeat doesn't. Let the repeat get longer and longer and the whole-number speeds crowd together until they fill in every speed between them, which is the subject of the last note below.

A pen at the end of a chain of turning circles turned out to be enough to copy a note, a fish, or a scribble. Every repeating wave and every closed drawing is a recipe of circles, and the recipe can be read off the shape by multiplying and averaging. The only places it struggles are the sudden jumps, where the 9% overshoot never goes away.

References

1. Joseph Fourier, Théorie analytique de la chaleur, Paris, 1822. English translation by Alexander Freeman, The Analytical Theory of Heat, Cambridge University Press, 1878.
2. J. Willard Gibbs, “Fourier's series”, Nature 59 (1899), 606.
3. Henry Wilbraham, “On a certain periodic function”, The Cambridge and Dublin Mathematical Journal 3 (1848), 198-201.
4. A. A. Michelson and S. W. Stratton, “A new harmonic analyser”, Philosophical Magazine, series 5, 45 (1898), 85-91.
5. T. W. Körner, Fourier Analysis, Cambridge University Press, 1988. Short chapters on the mathematics and its history, including Dirichlet's proof and the Gibbs phenomenon.
6. Neville H. Fletcher and Thomas D. Rossing, The Physics of Musical Instruments, 2nd edition, Springer, 1998.
7. Hermann von Helmholtz, On the Sensations of Tone as a Physiological Basis for the Theory of Music, translated by Alexander J. Ellis, Longmans, Green, and Co., 1875 (German original 1863).
8. Norwood Russell Hanson, “The mathematical power of epicyclical astronomy”, Isis 51(2) (1960), 150-158.
9. Karlheinz Brandenburg, “MP3 and AAC explained”, AES 17th International Conference on High-Quality Audio Coding, 1999.
10. Gregory K. Wallace, “The JPEG still picture compression standard”, Communications of the ACM 34(4) (1991), 30-44.
11. James W. Cooley and John W. Tukey, “An algorithm for the machine calculation of complex Fourier series”, Mathematics of Computation 19 (1965), 297-301.
12. Michael T. Heideman, Don H. Johnson, and C. Sidney Burrus, “Gauss and the history of the fast Fourier transform”, IEEE ASSP Magazine 1(4) (1984), 14-21.