Épicycloïde
Draw a shape and watch a chain of spinning circles redraw it
Trace a silhouette with the mouse, or import an image whose outline is extracted by a hand-coded Canny edge detector or Otsu threshold. A discrete Fourier transform then breaks the curve into a chain of rotating circles (up to 800), sorted by size, that redraw it live in a second canvas. Sliders set the number of samples and harmonics, the speed and the circles' visibility, and show that a handful of rotations is enough to retrace a horse or an elephant.
What shines
- Hand-written discrete Fourier transform, with coefficients sorted by amplitude so the big circles are drawn first
- Image import and contour extraction with no library at all: blur, Sobel, non-maximum suppression and hysteresis (Canny), Otsu threshold, tracing of the longest contour
- Two synchronized p5 instances: a drawing canvas (with edge preview) and a render canvas with a persistent trail
- Up to 4,096 samples and 800 harmonics, adjustable live
- Fully rewritten on the same day: the first version (6 a.m.) only allowed drawing, the 9 a.m. version added image import
How to use it
Draw a closed shape on the left (or import an image, then "Extract"), click "Run" and watch the circles redraw it
Made with
- p5.js 1.9.3 (mode instance, 2 sketches)
- JavaScript
- Canvas 2D (canvas offscreen)
- HTML/CSS