Drawing / Harmonic motion
Fourier Drawing
Draw a line and rebuild it with rotating circles. Explore Fourier terms, original example paths and the quiet precision of epicycles.
An original loop is ready. JavaScript and Canvas2D enable playback and drawing.
The current reconstructed trace, endpoint and visible epicycles/reference path, or your active drawing. PNG targets 2× or a 2,000 px long edge, capped at 4 million pixels and 4,096 px per side.
JavaScript and Canvas2D are required for interaction. This static example shows a real Fourier reconstruction.
A drawing, written in circles.
Your line becomes 128 complex samples, spaced equally along its length. A discrete Fourier transform finds each rotating vector’s amplitude, phase and signed frequency. Adding those vectors reconstructs the periodic path. Larger terms enter first; more terms reduce sampled reconstruction error.
Open strokes close with a straight segment, so the return journey is part of the drawing. Up to 2,048 input points are retained. The bounded trace samples the same Fourier sum at 769 positions; coefficients are computed only when the input changes. Reduced motion keeps the composition still and Step advances the reconstruction.
How to play
Select Folded loop, Fivefold bloom or TINXR signal and press Play. Or choose Draw a path, draw a single stroke, then Reconstruct. Adjust 1–128 amplitude-ordered terms, speed, epicycles and original-path visibility. Open strokes close with a straight segment. Clear starts a new drawing; Reset restores Folded loop and default settings. Export the current frame as PNG or true vector SVG.
Built with
Astro · TypeScript · Canvas2D · Complex DFT
Playback starts paused. Reduced motion keeps the reconstruction still and Step advances it. Original example paths provide a keyboard alternative to drawing. A real static Fourier example remains without JavaScript or Canvas2D.