Fourier Epicycles: Drawing an Image with Two Chains of Rotating Circles

You choose an image, wait a moment, and the same image is redrawn by two chains of rotating circles. That is the idea behind the Fourier Epicycles demo: the browser extracts the outline of the image, computes two independent Fourier series for the X and Y coordinates, and moves a pen along the resulting path.

Try the live demo now: Fourier Epicycles. No image is uploaded to a server, and every calculation runs in your browser.

1. What Is an Epicycle, and Why Fourier?

Any periodic motion can be broken into a sum of simpler motions. In a Fourier series, each term is a rotating vector: a circle with a fixed radius that turns at a constant angular speed. Place several rotating vectors end to end, and the tip of the chain traces a complex path. These nested circles are called epicycles, the same idea ancient astronomers used to describe the motion of planets.

This demo differs from the classic single-chain animation because it keeps two independent series:

x(t) = a0 + Σ [ak cos(kt) + bk sin(kt)]
y(t) = c0 + Σ [ck cos(kt) + dk sin(kt)]

For each axis, the amplitude and phase of every harmonic are computed separately. After sorting by amplitude, the largest circles are drawn first and the smaller details follow.

2. From an Image to a Closed Path

The browser first draws the image onto an offscreen canvas and scales it to a maximum of 300 pixels on the longer side. Then it runs the following pipeline:

1. Check the alpha channel. If the image has transparency, the alpha mask becomes the silhouette.
2. Otherwise, convert to grayscale and use an Otsu threshold, with a border-based check to decide which side is the foreground.
3. Select the largest connected component to discard scattered noise.
4. Trace the outer boundary with Moore-neighbor tracing to obtain an ordered path.
5. Smooth the path, then resample it by arc length to 1000 evenly spaced points.

A transparent PNG or a solid subject on a plain background gives the cleanest result. Busy photos often work, but the extracted outline may include part of the background.

3. Why Two Chains and One Pen?

A single-chain visualization usually uses one complex Fourier series to describe the whole 2D path. This demo keeps two real, independent series: one for X and one for Y. The horizontal chain at the top produces the X coordinate, and the vertical chain on the left produces the Y coordinate. A dashed guide line leaves each chain, and the intersection of the two guides is the pen position.

The split is deliberate. If X and Y are swapped, the guide intersection moves toward the edge of the canvas and the shape is drawn incorrectly. With the current layout, the vertical guide from the top chain and the horizontal guide from the side chain meet exactly at the drawing point.

4. Coefficients, Amplitude, and RMS Error

The coefficients come from a discrete Fourier transform over the 1000 samples. Each harmonic stores an amplitude and a phase, and the harmonics are sorted by amplitude in descending order. The Nyquist term at the end of the spectrum uses a special coefficient so the reconstruction is exact at N=500.

The displayed error is the RMS distance between the approximated path and the original path, normalized by the original path's RMS radius. In other words, the error is measured relative to the size of the shape. For a five-point star, the measured values in the demo were:

The exact numbers depend on the input shape and the contour quality, but the trend is always the same: more harmonics mean a smaller error and a closer match.

5. Controls and the Interactive Experience

The harmonic slider runs from 1 to 500 and updates both chains immediately. The speed slider changes the angular speed, the Pause button stops the animation, and Clear trace removes the current drawing.

• Built-in heart, star, and circle paths for a quick start
• Live readout of harmonic count, sample count, and RMS error
• Drag and drop, plus paste an image from the clipboard
• Keyboard shortcuts: Space to play or pause, R to clear, H for heart, S for star, and C for circle

6. Limits and Practical Notes

This demo is built for learning and experimentation, not for exact reconstruction of every photo. Keep these points in mind:

• Sharp corners can show small oscillations when the harmonic count is low. This is the Gibbs phenomenon, and it fades as N grows.
• The working image is capped at 300 pixels so the browser stays fast. Details smaller than that may be lost.
• Simple thresholding does not always isolate a clean subject in a busy photo. A transparent PNG is the safest input.
• All processing happens on the client. No image is uploaded.

7. Try It

Upload a logo, a heart, or a transparent shape, and move the N slider from 5 to 200. You will see the difference between a simple ellipse and a complete outline right away. If you create something interesting, share a link in the comments below.

Open the Fourier Epicycles demo