Fourier Epicycles — jaskamalkainth.github.io

What is this?

This demo shows a shape being redrawn by a chain of rotating circles, also called epicycles. The orange dot is attached to the last circle. As all circles rotate at their own speeds, the dot traces the selected shape.

The surprising idea is that almost any closed 2D drawing can be described as a sum of circular motions. Smooth curves usually need only a few circles. Sharp corners, jumps, and disconnected strokes need many smaller, faster circles.

In simple terms: Fourier analysis is a way to say, "What simple waves are hiding inside this complicated shape?" Epicycles turn those waves into visible rotating arrows.

How the animation works, step by step

Turn the drawing into points. The chosen shape is sampled into 256 points. Each point is stored as a complex number: x is the real part, y is the imaginary part.
Run the Discrete Fourier Transform (DFT). The DFT asks how much of each circular frequency is present in those points.
Sort the circles by importance. Bigger-amplitude coefficients are drawn first because they contribute the largest visible motion.
Add the rotating vectors tip-to-tail. Each circle starts where the previous circle ends. The final tip becomes the orange drawing point.
Trace one loop. As time moves from 0 to 2π, the tip follows the reconstructed path and then starts again.

The math behind it

A 2D drawing can be treated as one complex-valued signal. Instead of writing a point as (x, y), write it as:

z(t) = x(t) + i y(t)

The DFT represents the sampled path as a sum of complex exponentials:

c_k = (1 / N) Σ_j=0^N-1 z_j e^{-i 2πk j / N}

This asks: "How much does the drawing match a circle that spins k times per loop?"

z(t) ≈ Σ A_k e^{i(k t + φ_k)}

Reconstruction adds the strongest circles back together, where A_k is radius and φ_k is starting angle.

Euler's formula, e^iθ = cos(θ) + i sin(θ), is why each term is a circle. The real part moves left/right, the imaginary part moves up/down, and together they rotate around a center.

Frequency k How fast the circle spins. Positive and negative frequencies rotate in opposite directions.

Amplitude |c_k| The radius of the circle. Larger amplitudes describe the big outline of the shape.

Phase φ_k The starting angle. It decides where a circle begins at time zero.

More epicycles More Fourier terms. This improves detail, especially around corners and abrupt changes.

Why corners need more circles

A smooth curve changes gradually, so low frequencies capture it well. A sharp star corner changes direction suddenly. Sudden changes contain high frequencies, so the slider needs more epicycles to reproduce them cleanly.

If only a few high-frequency terms are used, corners may overshoot or ripple. That is the same Fourier behavior behind ringing artifacts in compressed images and filtered signals.

Simple intuition

Imagine describing a road trip by giving someone a stack of instructions: "walk in this big circle, while carrying a smaller spinning arrow, while that arrow carries another smaller spinning arrow." The final fingertip position is the drawing pen.

The largest circles describe the broad movement, like the overall width and height of the shape. The tiny circles correct the details, like corners, bends, and small wiggles. Moving the slider upward is like allowing the pen to use more correction instructions.

How to read this demo

Epicycles controls how many Fourier coefficients are used.
Speed changes animation speed only; it does not change the math.
Circles toggles the construction lines so you can focus on the traced path.
Try ∞ first: it is smooth and converges quickly. Then try ★: the corners show why high-frequency terms matter.

Use cases and why this matters

Audio compression and equalizers: sound is decomposed into frequencies, which lets systems boost bass, remove noise, or compress music.
Image processing: JPEG-like ideas use frequency components so smooth regions can be stored cheaply while important edges are preserved.
Signal cleanup: engineers remove unwanted high-frequency noise from sensor readings, medical signals, radio data, and financial time series.
Shape analysis: outlines can be compared, smoothed, compressed, or reconstructed from Fourier descriptors.
Animation and generative art: a complex drawing can be turned into a beautiful chain of rotating motions, as shown here.
Solving physics and engineering problems: heat flow, vibrations, waves, and circuits are easier to analyze when broken into sine and cosine components.