Fourier Series

Fourier Epicycles A Fourier series says that any periodic curve is a sum of rotating circles. Each circle has its own radius, speed and start angle. Wikipedia

Original work

• Joseph Fourier (1822): Théorie analytique de la chaleur

How it works

The drawn shape is treated as a closed polygon and resampled to 256 points with equal arc-length spacing. Each point is a complex number x + i·y. A direct discrete Fourier transform (two nested loops, O(N²) = 65,536 steps) gives one circle per frequency with radius, start angle and rotation speed. The circles are sorted by radius.

• Frequencies run from 0 to N−1; everything above N/2 counts as a negative frequency so circles can also turn backwards.
• Each frame adds up the circle centers (O(circles)); the tip of the last circle goes onto the trace. After one full period the trace is cleared.
• Drawing uses Canvas 2D with requestAnimationFrame outside the Angular zone. dt is the time between two frames, so the speed does not depend on the frame rate.
• Presets: heart and star are formulas, the square is four corner points, the dog is a point list smoothed with three Chaikin passes (corner cutting).
• Fewer circles act like a low-pass filter: only the largest radii stay, the shape gets smoother.

Source code:fourier.service.ts

Note This demo does it in three steps.

• Your shape is resampled to 256 equally spaced points.
• Each point is a complex number x + iy. A direct discrete Fourier transform gives one circle per frequency.
• The circles are sorted by radius. The slider keeps only the biggest N circles.

Fewer circles give a smoother approximation. With all circles the curve passes exactly through all 256 points.