Draw → Fourier Epicycles

The Discrete Fourier Transform (DFT) asks: how much of each pure spin e^(i·2π·k·n/N) lives inside your signal? It takes your N sample points as a complex signal z_n = x_n + i·y_n and projects them onto N complex exponentials — one for each integer frequency k. Each output X_k is a complex number whose magnitude tells you the radius of a circle spinning k times per loop, and whose angle tells you where that circle starts. The shape is literally the sum of those circles drawn tip-to-tail.

An epicycle is a circle whose center rides on the circumference of another circle. Ptolemy stacked them to model planetary retrograde motion centuries before calculus existed. Fourier proved mathematically that any closed curve — no matter how jagged — can be expressed as an infinite sum of circles spinning at integer multiples of a base frequency. The playground computes a finite approximation using N=140 terms: the largest circles carry the overall silhouette, and the smallest circles add fine detail. The final tip of the last circle is exactly one point on the reconstructed path.

A Fourier series represents a periodic function as a sum of sines and cosines. The epicycle visualization is the same idea rotated into the complex plane: each term X_k·e^(i·2π·k·t) is a circle of radius |X_k| rotating at frequency k. The real part gives x(t), the imaginary part gives y(t). So your drawing on the 2D canvas is literally a periodic complex-valued function z(t) = x(t) + i·y(t), and the DFT gives you its Fourier coefficients. It is the exact same math as a spectrogram, just with the time axis traded for position along the curve.

With N=140 sample points, the highest frequency you can represent without aliasing is k = N/2 = 70 (the Nyquist frequency). Any shape detail smaller than about 1/70 of the loop is undersampled — sharp corners, tight zig-zags, or hand tremor faster than that spatial frequency will alias into lower frequencies. The resampling to 140 uniform arc-length points also erases your drawing speed: fast strokes and slow strokes become equally dense along the path, so only the geometry matters. Shapes with features finer than ~1/140 of the total arc length will be blurred or lost.

Reconstruction is the synthesis step: start at the centroid, add the largest circle first (its tip becomes the center of the next), then chain circles tip-to-tail in amplitude-sorted order. At any time t between 0 and 1, each term contributes r_k·cos(2π·f_k·t + φ_k) to x and r_k·sin(2π·f_k·t + φ_k) to y. The final (x, y) is a point on the reconstructed curve. Using all N terms passes exactly through every one of the N sample points; between them the rebuilt curve can stray slightly from the straight segments you drew. Using fewer terms — controlled by the slider — keeps the biggest circles and drops the smallest, which gives a smoothed approximation. Because the order is by size rather than by speed it is not strict low-pass filtering, though on most hand-drawn shapes the small circles are mostly the fast ones. This is the same principle behind JPEG compression (dropping high DCT coefficients) and MP3 encoding (dropping inaudible high frequencies).

A Fourier epicycle is one term of the discrete Fourier series of a closed path: a circle with a radius, a whole number of turns per loop (negative turns the opposite way) and a starting angle. Chained tip to tail, the circles trace the path. In the first worked example above, a square 200 px on a side sampled at 16 points comes out as 4 circles: the largest has radius 116.1 px and turns 1 time per loop, the next has radius 14.32 px and turns 3 times per loop in the opposite direction.

Draw a closed shape on the canvas with a mouse or finger, or press one of the six presets (Circle, Star, Infinity, Heart, Spiral, MP). When you lift the pen the page resamples your stroke to 140 evenly spaced points, closes the loop, computes the DFT and plays the largest circles back tip to tail; the Terms slider sets how many circles are used, up to 60. The page takes drawings from the pointer only: it does not import image or SVG files and does not export the list of circles.

It is the analysis half of one. It turns a closed shape into a Fourier series of 140 samples (a radius, a turns-per-loop rate and a start angle for each circle) and animates the result, so you can see how a drawing breaks into circles. It does not turn text or images into a drawing, and it shows the circles on screen rather than exporting them. The JavaScript section lists the DFT and reconstruction functions, which you can copy into your own canvas project.

It depends on the shape and on how close counts. For the five-pointed Star preset at 140 samples, 6 circles bring the RMS distance between the samples and the rebuilt points down to 2 px, while 28 circles are needed to get all 140 samples back exactly. With only 3 circles the star keeps 99.89% of the series energy but is still 3.454 px off in RMS terms. A square sampled at 16 points needs 4 circles to hit its samples exactly, yet the curve between samples still strays up to 3.36 px from the straight edges.

As a drawing, epicycles are a teaching and demonstration device: they show what a Fourier series does to a closed curve, and Ptolemy stacked circles in the same way to model planetary motion. The mathematics underneath is used widely: the DFT turns audio into spectra, and compression schemes such as JPEG and MP3 drop small high-frequency coefficients. Describing a closed outline by the leading coefficients of its complex DFT is known as Fourier descriptors in shape analysis. This page is a teaching tool and does none of those jobs itself.