Fourier Epicycle Drawer
Draw a shape and watch a chain of rotating circles retrace it. The tool treats your path as complex numbers, takes its discrete Fourier transform and gives each term a circle, largest first. The Circles slider shows how many terms a shape really needs.
How to Use
- Press and drag on the canvas to draw a shape; a closed loop works best. A point is taken each time the pointer moves more than 3 px, and at least 8 are needed.
- Release. The tool runs the discrete Fourier transform and a chain of circles starts retracing your drawing.
- Drag Circles to keep only the largest terms: fewer circles round off the corners.
- Set Speed from 0.1× to 5.0×. At 1.0× one loop takes one frame per point. Pause freezes it.
- Try the Star, Heart and Square presets (160, 220 and 240 points), or Clear and draw your own.
Press and drag on the canvas to draw a shape, then release — a chain of rotating circles will retrace it. Use the Circles slider to drop high frequencies and smooth the result.
Worked Example
The heart is 8 circles. The heart preset samples x = 16 sin³t, y = 13 cos t − 5 cos 2t − 2 cos 3t − cos 4t at 220 points and scales it by 9. Since sin³t = (3 sin t − sin 3t) ÷ 4, every term is a frequency between −4 and 4, so only 8 of the 220 DFT terms are non-zero. Their radii are 112.5 px (k = 1), 27 (k = 3), 22.5 (k = 2 and −2), 9 (k = −3) and 4.5 (k = −1, 4 and −4). Set Circles to 8 and the trace is exact. With 4 circles the worst point is 22.5 px off; with 1, the pen draws a plain circle of radius 112.5 px, up to 67.5 px off.
The square needs many more. The square preset is 240 points around a 240 px square. Only frequencies 1, −3, 5, −7, 9 … are non-zero, 60 terms in all, with radii 137.6, 15.3, 5.5, 2.8, 1.7 px: roughly 137.6 ÷ k². The worst point is 32.1 px off with 1 circle, 3.4 px with 10 and 0.24 px with 50.
The common mistake: forgetting to divide by N. The textbook DFT sum X(k) = Σ z(n)·e^(−2πikn/N) has no 1/N in front, so used directly as radii it makes every circle N times too big: the heart’s main circle would be 112.5 × 220 = 24,750 px instead of 112.5 px. The tool divides each sum by N, so the radii are in the drawing’s own pixels.
Show Work
Formulas
Epicycles, From Ptolemy to Fourier
Greek astronomers explained the wandering of the planets with circles riding on circles. Apollonius of Perga and Hipparchus developed the idea, and Ptolemy’s Almagest (about AD 150) used it to predict planetary positions for more than a thousand years. Copernicus still needed epicycles in De revolutionibus (1543); Kepler replaced them with ellipses in Astronomia nova (1609).
A chain of circles turning at whole-number speeds is a complex Fourier series, the tool Joseph Fourier introduced for heat flow in 1807 and published in 1822. With enough circles such a chain can follow any closed path, which is why the epicycle model could be tuned to fit the sky so well without being the right physics. The heart’s 8 circles and the square’s 60 show the same thing on a small scale.
About This Tool
This tool turns a freehand drawing or a preset into a complex signal, takes its discrete Fourier transform and animates the terms as a chain of circles, sorted from largest to smallest so the Circles slider always keeps the most important ones. Where the Fourier Signal Lab analyses a one-dimensional signal against time, this treats a two-dimensional path as one complex signal, so the result is something you can watch rather than a spectrum to read.
Everything runs in your browser; nothing is uploaded.
Related tools: Fourier / Signal Math Lab, Complex Numbers Calculator, and Graphing Calculator.
Frequently Asked Questions
How does a drawing become circles?
Each point becomes a complex number z = x + iy. The discrete Fourier transform rewrites the N points as N terms X(k)·e^(ikt): a circle of radius |X(k)| that turns k times per loop and starts at angle arg X(k). Put tip to tip, the circles pass through every point. The star preset has 160 points, so 160 terms, but only 17 are non-zero, and the largest has a radius of 105 px, the average of the star’s 150 px and 60 px radii.
How many circles does a shape need?
It depends on how smooth it is. The heart preset is x = 16 sin³t, y = 13 cos t − 5 cos 2t − 2 cos 3t − cos 4t, scaled by 9, which contains frequencies up to 4 only: 8 of its 220 terms are non-zero and the rest are exactly zero. The square has corners, so 60 of its 240 terms are non-zero, and they only fade as 1/k².
Why are the circles sorted by size?
So the slider always drops the smallest terms first, which gives the best fit for a given number of circles. For the square preset, the worst point is 32.1 px off with 1 circle, 8.5 px with 4, 3.4 px with 10 and 0.24 px with 50 (the square is 240 px wide).
Why do corners need so many circles?
A corner is a sudden change of direction, and no finite sum of smooth rotations can turn instantly. For a square traced at constant speed the radii fall as 1/k² (137.6, 15.3, 5.5, 2.8 px for k = 1, −3, 5, −7), so each extra circle still helps a little and the corners stay slightly rounded until every term is in.
Can I draw an open curve or a signature?
Yes, but the transform treats every path as a closed loop, so the circles also draw a jump from your last point back to the first, and that jump costs many small circles. The tool uses a plain DFT, which does N × N steps: about 1,000,000 for a 1,000-point drawing, still under a second in a modern browser.
How do I use the Fourier Epicycle Drawer?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Teaching the DFT
Show 220 sampled points of a heart collapsing to 8 numbers.
Truncating a series
Slide the square from 1 circle (32 px off) to 50 (0.24 px off).
Complex numbers
See e^(ikt) as a circle that turns k times per loop.
Classroom demos
Run the star at 0.1× to follow each of its 17 working circles.
Creative animation
Turn a signature or doodle of a few hundred points into a looping drawing.
Last updated: