Draw Anything with Circles

by Jason Kuma Updated 0 views

Any closed outline, from a star to a fish to your own signature, can be drawn by nothing but circles spinning at steady speeds.

Here is the machine. Pin each circle's center to the edge of the circle before it, and spin every circle at its own steady speed. Put a pen on the edge of the last circle. The machine has no straight edges and no corners, yet the pen can trace any closed shape at all.

The idea is almost 2,000 years old. Around 150 AD, the astronomer Ptolemy puzzled over the planets. A planet drifts across the stars, then stops, moves backwards for weeks, and moves forwards again. Ptolemy's answer, simplified: the planet rides a small circle, and the small circle's center rides a big circle.

Drawing
A sketch, not to scale. Seen from Earth, a planet riding a small circle on a big circle now and then loops backwards.

Astronomers predicted the planets this way for about 1,400 years. But circles riding on circles can draw far more than planet paths. How many circles does a shape need?

Make your guess. Circles will redraw a music note, never straying from the outline by more than 3% of the note's height. How many circles does the pen need?

  1. 3
  2. About 17
  3. About 170
  4. No number of circles can do it
Show answer

B. About 17

Exactly 17. With 16 circles, the pen still misses part of the note. Most people guess far more. Check it in the game below.

  • Race to draw a note, a star and a fish with the fewest circles, then make circles sign your name.
  • Build an oval, a heart, a triangle and a star from just two spinning arrows.
  • Stack smooth waves into a sharp cliff, and meet a horn that never shrinks.
  • Uncover a star's hidden circles yourself, with one trick: turn back, then average.

How few circles?

Press + until the blue pen stays inside the grey band all the way around, then try to win with fewer circles.

The star, with five sharp points, needs only 5 circles. The smooth fish needs 13, and the note needs 17. Sharp points look like the hardest thing to draw with round circles, so why is the star the easiest shape? To find out, start with one circle.

One arrow, one circle

Picture an arrow pinned at its tail and turning at a steady speed, with a pen on the arrow's tip. The pen draws a circle, and nothing else.

Drawing
One arrow turning around its pin draws one circle.

What happens when a second arrow rides on the first arrow's tip?

Add a second arrow

Pin a shorter arrow to the tip of the first arrow, and give the second arrow its own speed. The pen now sits on the second arrow's tip.

Drawing
Arrow 1 turns once per lap and arrow 2 turns twice, so the pen draws a loop with a dent.

Make your guess. The first arrow turns forwards once per lap. The second arrow turns backwards once per lap. What does the pen draw?

  1. A bigger circle
  2. An oval
  3. A figure eight
  4. A heart
Show answer

B. An oval

An oval. The two arrows are mirror images across a level line. Side to side, their pushes add, so the pen swings wide. Up and down, their pushes partly cancel, so the pen barely moves: an oval.

Change the second arrow's speed and length until your blue pen covers the dashed target, then press Next shape.

Match the shape

Now count how many times each shape repeats as you go once around it. The oval looks the same after half a turn, so the oval repeats 2 times. The heart has one dent, so the heart repeats once.

ShapeArrow 2 speedRepeats
Heart21
Oval−12
Triangle−23
Star−45

See the pattern? The first arrow always turns at speed 1, and the repeats equal the gap between the two speeds. Speed −2 sits 3 steps from speed 1, so the triangle repeats 3 times.

The second arrow turns forwards 6 times per lap. How many times does the pen's shape repeat around?

  1. 5
  2. 6
  3. 7
  4. 12
Show answer

A. 5

5 times. Speed 6 sits 5 steps away from speed 1.

So the speeds decide the pattern. Does the rule also run backwards, so that a shape's pattern decides the speeds?

Why the star is easy

The rule does run backwards, for any number of arrows. The star repeats 5 times around, so every arrow in the star must turn at a speed whose gap from 1 is a multiple of 5: speeds 1, 6, 11 and so on, or −4, −9 and so on. An arrow at any other speed would break the 5-fold pattern.

Make your guess. The game builds the star from 300 points on its outline, which allows 299 circles. How many of those 299 circles have any size at all?

  1. All 299
  2. 150
  3. 60
  4. 5
Show answer

C. 60

Only 60. Just 1 speed in 5 fits the star's pattern, so the other 239 circles have a radius of exactly zero. Of the 60 left, the biggest 5 already trace the star. That is why the star was the easiest shape in the game.

Turning arrows decide the shape of a drawing. The same turning arrows also describe sound, light and heat. How can a circle describe a sound?

Every circle is a wave

Watch only the height of an arrow's tip as the arrow turns. The height rises and falls in a smooth curve called a sine wave.

Drawing
As the arrow turns, the height of its tip traces a sine wave.

A faster arrow makes more wiggles per lap, and a shorter arrow makes a smaller wave. So stacking circles tip to tail is the same as adding waves together.

Smooth waves easily add up to smooth curves. A square wave is different: a square wave sits flat, then drops straight down in no time. Can smooth waves build a sudden jump?

Make your guess. Add sine waves one at a time to build a square wave. Next to each jump, the sum overshoots in a little horn. What happens to the horn as you add more and more sine waves?

  1. The horn shrinks away to nothing
  2. The horn gets thinner, but the horn's height stays the same
  3. The horn grows taller
Show answer

B. The horn gets thinner, but the horn's height stays the same

The horn gets thinner and thinner, but the horn's tip always stays about 9% of the jump above the flat top. This stubborn horn is called the Gibbs phenomenon.

Press Add 10 a few times and watch the blue horn height: does the horn ever drop below 9%?

A square wave from sine waves
The horn gets thinner, never shorter
Sine terms addedHorn height (% of the jump)Horn width (% of a period)
0
113.6635.62
210.0219.07
39.4212.87
49.219.69
59.127.76
69.076.48
79.035.55
89.014.86
994.32
108.993.89
118.983.54
128.983.24
138.972.99
148.972.78
158.972.6
168.972.43
178.962.29
188.962.16
198.962.05
208.961.95
218.961.85
228.961.77
238.961.69
248.961.62
258.961.56
268.961.5
278.951.44
288.951.39
298.951.34
308.951.3
318.951.26
328.951.22
338.951.18
348.951.15
358.951.11
368.951.08
378.951.05
388.951.03
398.951
408.950.97
From the widget above: the horn's height settles near 8.95% of the jump, while the horn's width shrinks toward zero.

So smooth waves can build a jump, with one thin horn left over. In 1807, while studying how heat spreads through metal, the French mathematician Joseph Fourier made a bold claim: any curve, jumps and corners included, is a sum of sine waves. Great mathematicians of the day, Joseph-Louis Lagrange among them, doubted the claim, and Fourier's book on heat only came out in 1822. Fourier was right, and his idea reached far beyond heat.

Profound study of nature is the most fertile source of mathematical discoveries.

Joseph Fourier, The Analytical Theory of Heat (1822; English translation by Alexander Freeman, 1878)

Fourier's claim means every drawing has a recipe of circles. But how do you work out how big each circle should be?

Find the hidden circles

Here is the trick, on the star. Give every point a time stamp: the moment in the lap when the pen passes that point. Then, to test one speed:

  1. Turn every point backwards at that speed. At speed 1, a point stamped halfway through the lap turns back half a turn.
  2. Now the arrow with that speed stands still. Every other arrow still turns whole laps, so each of those arrow tips averages out onto its pin.
  3. Average all 300 points. Only the still arrow survives, and the average point's distance from the center is that circle's radius.

Press + and − to test speeds from −12 to 12, and find the 4 hidden circles where the dots bunch to one side.

Find the hidden circles

The hidden circles turn at speeds −9, −4, 1, 6 and 11. Each gap from 1 is a multiple of 5, just as the star's pattern demanded. Turning back and averaging, once per speed, is the whole recipe. What does the recipe look like in math?

The recipe in math

Write each point of the drawing as one number that holds both of its coordinates: the complex number \(z = x + iy\). Let \(t\) run from \(0\) to \(2\pi\) as the pen goes once around. An arrow that turns \(k\) times per lap is written \(c_k e^{ikt}\), and the drawing is every arrow added tip to tail:

\[z(t) = \sum_{k=-\infty}^{\infty} c_k\, e^{ikt}\]
  • \(|c_k|\) is the radius: how big the circle is.
  • The angle of \(c_k\) is where the arrow points at the start.
  • \(k\) is the speed: turns per lap. A negative \(k\) turns backwards.
  • \(c_0\) is the center: the average point of the drawing, where the first arrow is pinned.

To find one \(c_k\), turn the drawing back \(k\) times per lap by multiplying by \(e^{-ikt}\), then average over one lap. With \(N\) points instead of a smooth curve, the average becomes a sum called the discrete Fourier transform:

\[\begin{aligned} c_k &= \frac{1}{2\pi}\int_0^{2\pi} z(t)\, e^{-ikt}\, dt \\ &\approx \frac{1}{N}\sum_{n=0}^{N-1} z_n\, e^{-2\pi i k n/N} \end{aligned}\]
Derivation: why the average finds \(c_k\)

Start from the sum of arrows. Turn the sum back \(m\) times per lap by multiplying by \(e^{-imt}\), then average over one lap:\[ \frac{1}{2\pi}\int_0^{2\pi} z(t)\,e^{-imt}\,dt = \sum_k c_k \cdot \frac{1}{2\pi}\int_0^{2\pi} e^{i(k-m)t}\,dt \]Look at one term on the right. When \(k \ne m\), the factor \(e^{i(k-m)t}\) is an arrow that turns a whole number of times per lap, so the factor averages to zero. When \(k = m\), the factor is \(e^{0} = 1\), so the factor averages to 1. Every term vanishes except one, and the one term left is \(c_m\).

With \(N\) evenly spaced points, the integral becomes a sum, and the same cancellation is exact. So 300 points give exactly 300 numbers: the center \(c_0\) and 299 circles. With all 299 circles, the pen passes through all 300 points exactly.

The game at the top runs this recipe in four steps:

  1. Space 300 points evenly along the outline of the drawing.
  2. For each of 300 speeds, turn the points back and average them. Each average gives one circle.
  3. Sort the circles from biggest to smallest.
  4. Add the circles tip to tail, as many as you ask for.

Sorting biggest first is why so few circles get so close. A handful of big circles carry the shape, and hundreds of tiny circles only add the fine print.

How far the pen misses, as circles are added
Circles (biggest first)Music noteFishStar
120.614.310
2159.54.2
49.660.9
82.82.60.36
160.830.680.14
320.30.230.06
640.110.10
Measured in the game above, as the average distance between the pen and the shape. Each step doubles the circles. By 64 circles, every shape is off by less than 0.2% of its size.

Keeping the big waves and dropping the tiny ones works for far more than drawings. Where else does the trick show up?

Where you meet it

Splitting a signal into waves, then keeping only the waves that matter, runs inside technology you use every day:

  • JPEG photos split each block of 8 by 8 pixels into waves, then drop the smallest waves to save space.
  • MP3 and AAC audio split short slices of sound into waves, then drop the waves your ears barely notice.
  • MRI scanners record the body as a mix of waves, then add the waves back up into a picture.
  • Wi-Fi, 4G and 5G split one radio channel into many waves, so many streams of data share the air side by side.

The dots, connected

  • Any shape. Every closed drawing is a sum of spinning arrows, and turning back then averaging finds each arrow.
  • The easy star. A 5-fold pattern lets only 1 speed in 5 through, so 5 big circles do almost all the work.
  • Your phone. Photos and songs are stored as waves, and the tiny waves get dropped, just as the game drops tiny circles.

Ask Phy

  • Why does a drawing with 300 points give exactly 300 circles, no more and no fewer?
  • How does a JPEG decide which waves to throw away?
  • Why does the Gibbs horn never get any shorter?