Fourier epicycles

Rotating circles chained end to end trace Formula 1 circuits, your own drawing, or the outline of an uploaded image. The server breaks the curve into rotating vectors with a real discrete Fourier transform (DFT), in PHP; the more circles you allow, the more closely they follow every corner of the curve.

What should the circles draw?

Circles used: 1 / 1

The PHP code that actually runs (excerpt)

// X_k = sum_n (x_n + i*y_n) * e^(-2*pi*i*k*n/N)
for ($k = 0; $k < $n; $k++) {
    $sumRe = 0.0;
    $sumIm = 0.0;
    for ($i = 0; $i < $n; $i++) {
        $theta = -2.0 * M_PI * $k * $i / $n;
        $sumRe += $points[$i]['x'] * cos($theta) - $points[$i]['y'] * sin($theta);
        $sumIm += $points[$i]['x'] * sin($theta) + $points[$i]['y'] * cos($theta);
    }
    $amplitude = sqrt($sumRe ** 2 + $sumIm ** 2) / $n;
    $phase = atan2($sumIm, $sumRe);
}

How does the Fourier transform break a curve into rotating circles?

Every point on the curve is treated as a complex number (x + iy), and the discrete Fourier transform (DFT) breaks that sequence of points down into a sum of complex exponential "rotating vectors" at different frequencies - each frequency component contributes one circle spinning at a constant speed.

A circle's amplitude (radius) shows how strongly that frequency is present in the curve - a simple, roundish shape is dominated by one large circle, while an angular or detailed shape needs many smaller-amplitude circles for an accurate approximation.

The circles are chained end to end (these are the epicycles), and the tip of the outermost circle traces the original curve - the more circles (frequency components) you allow, the closer the approximation; in theory, infinitely many circles would reproduce the original exactly.

The same mathematical principle (Fourier analysis) underlies audio processing (equalizers, noise reduction), JPEG compression and radio technology - the idea of "breaking a complex signal into simple, repeating components" is an extremely general tool.