Draw → Fourier Epicycles

The coordinate mapping. The canvas is the complex plane. Every point $(x,y)$ you draw is treated as $z = x + i y$. The left edge maps to negative real values, the right edge to positive real values, and the Y-axis is the imaginary axis. This is not just a coordinate trick — it is what makes rotation become multiplication by $e^{i\theta}$ with zero matrix overhead.

Epicycle circles and arms. Each term draws a faint circle of radius $r_k = |X_k|/N$ centered at the previous term's tip, plus a radial arm from that center to its own tip. Circles smaller than 1.5 px are skipped visually but still contribute to position. The arms chain tip-to-tail in amplitude-sorted order — largest first — so you see the structure emerge from the biggest contributors down to the fine detail.

How a drawing becomes a path. Mouse or touch events collect raw screen coordinates on pointerdown/pointermove/pointerup. The raw polyline is resampled to $N=140$ uniformly arc-length-spaced points via resamplePath, erasing drawing speed. The path is then treated as closed: the last point connects back to the first via modulo indexing. That closure edge is the only synthetic geometry — everything else is your hand.

The terms slider. Maps $M$ from 1 to $\min(60, N)$. At $M=1$ you see only the centroid (the DC term, which does not spin — it is the average position). Each step adds the next-largest circle. The slider is disabled until a path is finalized. Changing it clears the trail to avoid mixing reconstructions from different term counts.

The render loop. There is no numerical integration and no differential equation. Each frame computes $t = ((now - loopStart) \bmod 9000) / 9000$, steps through $M$ terms computing $x_{k+1}=x_k+r_k\cos(2\pi f_k t+\phi_k)$ and $y_{k+1}=y_k+r_k\sin(2\pi f_k t+\phi_k)$, pushes the final $(x,y)$ into a 420-point trail buffer, and draws. Pure trigonometric reconstruction — the epicycles are the formula, not a simulation of the formula.

The presets. Six hardcoded paths: a circle (pure $k=1$), a 5-point star (spikes at $k=\pm5,\pm10,\dots$), a lemniscate (needs balanced $k=1$ and $k=-1$), a parametric heart, a logarithmic spiral (closed by a return line to center), and an MP monogram (multiple straight segments — Fourier hates straight lines). Each preset exercises a different spectral property.

The DFT algorithm. $O(N^2)$ naive DFT — two nested loops, no FFT. For each frequency $k$, the inner loop accumulates $re += \tilde{x}_n\cos\phi + \tilde{y}_n\sin\phi$ and $im += -\tilde{x}_n\sin\phi + \tilde{y}_n\cos\phi$ with $\phi=2\pi k n / N$, then divides by $N$. At $N=140$, that's ~19,600 complex multiply-adds — instant in JS, and clearer to read than importing an FFT library.

Term sorting by amplitude. After computing all $X_k$, the array is sorted descending by $|X_k|$. This means the slider peels away importance rather than arbitrary high frequency. For a star, $k=5$ outranks $k=2$ despite being higher frequency — symmetry demands it. You see structure emerge, not noise. This is perceptual low-pass filtering, not classical frequency-cutoff low-pass.

Centroid subtraction. Before the DFT, the mean $(c_x, c_y)$ is subtracted from every point. This zeroes the DC component so the animation origin sits at the shape's center instead of at some canvas corner. Without this, the $k=0$ term would dominate with an enormous radius to the page corner, and everything else would be a tiny orbiting detail.

Path resampling and frequency mapping. The raw polyline is resampled to $N=140$ uniform arc-length points via resamplePath — a linear walk along each segment at constant step size. This erases drawing speed and leaves only geometry. The frequency mapping $f_k = k \text{ if } k \le N/2 \text{ else } k-N$ converts standard DFT ordering (which packs positive frequencies in the first half and negative in the second) into signed integers: positive = counter-clockwise, negative = clockwise. Both directions are essential — a figure-8 needs $k=1$ and $k=-1$ with near-equal amplitude.