Fourier Drawing — Epicycles
Two chains of rotating arms — one for x(t), one for y(t) — draw a knight, a bat, a heart, a star and more, live. Slide N from 1 to 50 harmonics per axis and watch detail arrive, with the mean error printed as it falls.
Teal chain sets x(t), gold chain sets y(t); the pen sits where their guides cross. Mean distance between pen and outline at N = 20: 0.15% of the shape's height. At N = 1 both coordinates are pure sinusoids, so the pen can only draw an ellipse-like blob — detail arrives with the higher harmonics.
How we got it — the example, step by step
- Each outline is sampled at 256 points. Each coordinate gets its own real Fourier series: x(t) = a₀ + Σ aₖcos(kt) + bₖsin(kt), and the same for y(t) with its own coefficients.
- A cosine and a sine of frequency k make one arm of length √(aₖ² + bₖ²) turning k times per lap; on screen each harmonic is drawn as two counter-rotating arms so every circle is a true term of the series.
- The teal chain adds up to x(t), the gold chain to y(t), and the pen sits where their dashed guides cross.
Check it backwards
Questions people also ask
Why two chains instead of one?
Because x and y are separate functions of time, each with its own series. The crossing of the two guides is the point (x(t), y(t)) — pin the pen to both chains and the outline draws itself.
Where do the knight and bat outlines come from?
They are the same outlines used in the Fourier epicycle videos this page is modelled on — sampled, coefficient-ed and drawn by the identical mathematics, here running live in your browser instead of in a video.
Can I draw my own outline?
Not yet — the shapes are presets whose sampled points ship with the page. The coefficients are recomputed in your browser from those points, so the maths is identical for every shape.