🌀 Fourier Epicycles
Draw any closed shape and watch a chain of rotating circles redraw it. Interactive 2D Fourier epicycle visualization built from the Discrete Fourier Transform.
About Fourier Epicycles
Any periodic 2D path can be decomposed into a sum of rotating circles — epicycles — which is the geometric interpretation of the complex Fourier series. Each term aₙe^(inωt) represents a circle of radius |aₙ| rotating at angular frequency nω, with initial phase arg(aₙ). The first (lowest-frequency) epicycle sets the coarse shape; successive smaller, faster circles add finer detail. This is exactly how Ptolemy's astronomical model worked: planets were placed on epicycles to approximate their observed retrograde motion, and Fourier's mathematics vindicates the approach — any periodic orbit can indeed be modelled this way to arbitrary precision with enough circles.
Draw any closed shape in the canvas and the simulation computes the DFT of the path coordinates, then reconstructs it as an animated chain of epicycles sorted by decreasing radius. You can pause the animation, add or remove terms, and watch how each additional circle improves the approximation.
Frequently Asked Questions
How does the Fourier series connect to epicycles?
A complex Fourier series z(t) = Σₙ cₙ e^(inωt) represents the path as a sum of phasors (rotating complex exponentials). Each term cₙ e^(inωt) is a circle of radius |cₙ| rotating at rate n times the fundamental frequency. Chaining these circles tip-to-tail — with each circle rotating on the tip of the previous — produces the animated epicycle picture. The DFT of the sampled path directly gives the coefficients cₙ.
How many epicycles are needed to reproduce a shape accurately?
For a path sampled at N points, the DFT produces exactly N frequency components, so N epicycles reproduce the path with zero error at the sample points. In practice, most shapes can be approximated well with far fewer: a circle needs 1, a square about 20 (the odd harmonics 1, 3, 5, … produce the corners), and a realistic portrait sketch might need a few hundred. The approximation error decreases as O(1/n) for smooth curves and O(1/n²) for curves with continuous derivatives.
Did Ptolemy's epicycles actually work?
Yes — Ptolemy's Almagest (c. 150 AD) used epicycles, deferents, and equant points to predict planetary positions to within about 1° of arc, sufficient for naked-eye astronomy. The system was geocentric (wrong model) but mathematically equivalent to a finite Fourier approximation of the true elliptical orbits (Kepler). With enough epicycles any planetary motion can be approximated; the heliocentric Copernican model was preferred not because it needed fewer epicycles initially, but because Kepler's ellipses gave a simpler physical explanation.
What is the Gibbs phenomenon?
The Gibbs phenomenon is the overshoot that appears when a Fourier series approximates a signal with a jump discontinuity (such as a square wave). Near the discontinuity, the partial sum overshoots the true value by about 9% of the jump height, regardless of how many terms are included — the overshoot does not disappear, it just moves closer to the discontinuity. This is visible in the epicycle animation as a "ringing" at sharp corners. It can be reduced by using window functions (Lanczos sigma factor) or Fejér summation instead of partial sums.
Can the epicycle method reconstruct non-periodic paths?
Yes, with modifications. For a non-periodic path you can either treat a finite segment as one period (introducing a jump discontinuity at the endpoints, causing Gibbs ringing), or use the Discrete Cosine Transform (DCT) instead of the DFT — the DCT implicitly mirrors the path to create a periodic extension with no jump. Alternatively, the path can be parameterised to close it (e.g., by adding a return stroke), making it genuinely periodic. The JPEG image compression standard uses 8×8-pixel DCT blocks for exactly this reason.
What is the difference between real and complex Fourier series?
The real Fourier series expresses a function as Σ (aₙ cos(nωt) + bₙ sin(nωt)), using pairs of sine and cosine terms for each frequency. The complex Fourier series uses complex exponentials Σ cₙ e^(inωt) for n = −∞ to ∞, where c₋ₙ = cₙ* (complex conjugate) for real signals. The complex form is more compact and maps directly to epicycles: positive n gives counter-clockwise circles, negative n gives clockwise circles. Most signal-processing derivations use the complex form for algebraic convenience.
How does the animation order epicycles?
The simulator sorts epicycles by their radius |cₙ| in decreasing order — largest first. This is the most visually informative ordering, as the largest circles (lowest-amplitude, coarsest-frequency components) set the overall shape while the smaller, faster circles add fine detail. Mathematically, any ordering produces the same final path; the choice only affects the animation's visual progression and the intermediate tip positions of the chain.
What happens if only odd harmonics are kept?
Keeping only odd harmonics (n = 1, 3, 5, 7, …) corresponds to the Fourier series of an odd-symmetric signal — one where f(t + T/2) = −f(t). Visually, the resulting path has 180° rotational symmetry: the second half of the drawing is the first half rotated by half a turn. Square waves, triangle waves, and sawtooth waves (in their half-wave symmetric form) consist entirely of odd harmonics, which is why their epicycle chains show this elegant 2-fold symmetry.
Can Fourier epicycles draw text or portraits?
Yes — this has been a popular mathematical visualisation since 3Blue1Brown's 2019 video popularised it. The path of a handwritten letter or portrait outline is sampled, its DFT computed, and the resulting epicycles animate to trace the shape. A typical portrait outline sampled at 1,000 points needs roughly 200–300 significant epicycles to look convincing. The technique is essentially the same as SVG path compression: keeping only the dominant frequency components discards fine, imperceptible detail.
Draw any closed shape and watch a chain of rotating circles redraw it. The radii, frequencies and phases come from the complex DFT of your path — Fourier series made visual.
3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install