Lab
Fourier Epicycles
Draw any shape and watch a chain of rotating circles retrace it. A live Fourier series, built from your own scribble.
Draw a shape, get a chain of spinning circles
Pick a shape
Showing: Heart
Controls
Canvas
Click "Draw your own" above, then drag to draw any closed shape. The circles will spin to retrace whatever you make.
What's actually happening?
Every shape is a sum of circles
Fourier proved that any closed path you can draw, heart, signature, squiggle, doesn't matter, is the same as the tip of a chain of circles, each spinning at its own steady speed. The big slow circles sketch the outline. The small fast circles fill in the corners and spikes.
More circles = more detail
With just one circle you get a circle. With two you get an oval. With ten you get the rough silhouette. With a hundred you get every spike and corner. Drag the Circles slider while watching, that's the Fourier series being truncated and un-truncated live.
Why corners are hard
A perfect circle needs one harmonic. A square needs hundreds — corners are sharp, and sharp edges hide tiny fast-spinning circles that take a long time to add up. Watch the Square preset shimmer with 10 circles, then click the slider up and see it snap into shape.
Where you see this for real
JPEG and MP3 compression throw away the smallest, fastest circles — the parts your eye and ear can't notice, and keep only the big slow ones. Same math. The ancient Greeks also used epicycles to describe planetary orbits, centuries before Fourier or Ptolemy gave them a name.
Challenge 1: Draw your name
Scenario: Click "Draw your own", then slowly trace your initial or your full name in one unbroken line. End roughly where you started.
Observe: The circles retrace your signature. Crank Circles up to 200, every wobble in your hand comes back exactly.
It works even with very wobbly drawings. The Fourier math doesn't care if your hand was shaky.
Challenge 2: Watch the square heal
Scenario: Pick the Square preset. Drag the Circles slider down to 5.
Observe: The reconstruction wobbles and won't hit the corners. Slowly raise the slider, at maybe 20 circles it looks like a rounded square; at 100 it looks crisp.
Those overshoots at the corners are the Gibbs phenomenon, Fourier always slightly overshoots at discontinuities, no matter how many circles you add.
Challenge 3: Spot the dominant frequency
Scenario: Pick the Circle preset and set Circles to 1.
Observe: One circle is enough. Now try the Spiky preset with 1 circle (looks like a small circle), 8 circles (the spikes appear), 9 circles (spikes get sharper). Eight spikes, eight fast circles needed.
Pattern: an N-fold symmetric shape needs frequency N in its Fourier series. Sniff this out for the Star and Triangle presets too.
Security model
Everything runs in your browser. No data is sent anywhere. The DFT, coefficient sorting, epicycle animation, and pointer-drawing all execute locally in JavaScript on your device.