What Epicycle does

Epicycle turns a shape you draw into a Fourier series and animates it as a chain of nested spinning circles. Draw a stroke with your mouse or finger and the app samples it into evenly spaced points, runs a discrete Fourier transform, and rebuilds the path as rotating vectors. The tip of the last circle traces your original drawing, one loop at a time. It is the “spinning circles draw a picture” idea from 3Blue1Brown’s Fourier video, except the picture is yours and it is computed live in your browser.

How to use it

1. Draw any shape on the canvas, or pick a star, heart, or infinity preset.
2. Watch the circle chain spring up and retrace your stroke.
3. Drag the Circles slider: fewer harmonics give a looser, wobblier trace, more give a crisp one.
4. Adjust the speed, pause, or restart the loop.
5. Save a PNG of the current frame, or export a WebM of one full loop.

Everything runs in the browser. There is no login, no upload, and your drawing never leaves the page. The last shape you drew is saved locally so it is waiting when you come back.

Why circles can draw any shape

Any closed 2D path can be read as a complex signal over time. Its discrete Fourier transform breaks that signal into rotating vectors of different frequency, amplitude, and phase. Stack the vectors tip to tail, spin each at its own rate, and their combined endpoint retraces the original path. More circles means a closer match to sharp corners; a handful gives you the smooth, ghostly approximation.

FAQ

Does it work on a phone?

Yes. The canvas takes touch input, so you can draw with a finger, and the layout stacks the canvas above the controls at phone width.

Do I need to install anything?

No. Epicycle is a static page: open it and draw. To run it locally, clone the repo and serve the site/ folder.

Can I save the animation?

Yes. “Save PNG” grabs the current frame. “Export video” records a WebM covering one complete retrace loop, where your browser supports canvas recording.

What are the spinning circles actually doing?

Each circle is one term of the Fourier series: a vector rotating at a fixed frequency. Summed together, their tip follows your drawing. The Circles slider controls how many terms are used.

Is my drawing sent anywhere?

No. The drawing, the transform, and the export all happen in your browser. Nothing is uploaded.