Fourier Epicycles Simulator Back
Signal Processing

Fourier Epicycles Simulator

Draw any closed curve with your mouse — the DFT decomposes it into spinning circles (epicycles). Adjust the number of circles to see how Fourier approximation quality changes in real time.

Fourier Epicycles

Draw a curve — DFT decomposes it into spinning circles

Mode
Number of Epicycles
Circles N

Adjust to observe approximation quality change

Animation Speed
Speed
×
Presets
0
Sample points
0
Circles used
0%
Progress
1.0×
Playback speed
Approx. error
$$X[k] = \sum_{n=0}^{N-1}x[n]\, e^{-2\pi i k n / N}$$

Circle $k$: radius $|X[k]|$, angular vel. $2\pi k/T$, phase $\arg(X[k])$

Main

✏️ Draw a curve

Mouse drag or touch to draw any shape.
DFT decomposition runs automatically.

What are Fourier Epicycles?

🙋
What exactly are "epicycles"? I've heard them mentioned with old astronomy models, but what do they have to do with drawing shapes on a screen?
🎓
Great question! Basically, an epicycle is just a circle whose center is moving along the path of another circle. In this simulator, we use them as a visual tool for Fourier analysis. When you draw a closed shape, the tool breaks it down into a sum of these rotating circles. Try drawing a simple square or triangle above and watch the circles appear!
🙋
Wait, really? So the wiggly line my mouse makes can be perfectly recreated just by adding spinning circles together? How does it know which circles to use?
🎓
Exactly! The magic is in the math. The tool samples points from your drawing and uses the Discrete Fourier Transform (DFT) to calculate the perfect set of circles. Each circle gets a specific size, spin speed, and starting angle. In practice, you don't need all possible circles. Try using the "Circles N" slider to reduce the number—you'll see how a few circles can already capture the rough shape.
🙋
So the "Speed" slider just makes them spin faster? What's the point of seeing them spin at different speeds?
🎓
It's more than just a visual effect. The speed is tied to the frequency of each circle. A circle with a higher frequency spins faster. Changing the global "Speed" helps you see how the relative timing of these rotations builds the path over time. For instance, slow it right down to watch the "pen" at the end of the last circle trace the shape step-by-step, which is how a Fourier synthesis actually works.

Physical Model & Key Equations

The core of the simulator is the Discrete Fourier Transform (DFT). It analyzes a set of N sampled points from your drawing (treating the x and y coordinates as separate complex numbers) and outputs a set of complex coefficients, one for each frequency component.

$$X[k] = \sum_{n=0}^{N-1}x[n]\, e^{-2\pi i k n / N}$$

Here, $x[n]$ is the n-th sampled point of your drawing (as a complex number: $x + iy$). $X[k]$ is the complex Fourier coefficient for frequency $k$. The magnitude $|X[k]|$ is the radius of the k-th circle, and the argument $\arg(X[k])$ is its starting phase (angle).

The reconstruction, which you see as the epicycle animation, is the Inverse DFT. Each term describes a vector rotating at a specific frequency. The sum of all these rotating vectors traces your original path.

$$x[n] = \frac{1}{N}\sum_{k=0}^{N-1}X[k]\, e^{2\pi i k n / N}$$

In the animation, each term $X[k] e^{2\pi i k t / T}$ represents one epicycle. Its angular velocity is $\omega_k = 2\pi k / T$. The final "pen" position is the vector sum of all these rotating arms. When you adjust the "Circles N" slider, you're changing how many terms of this sum are used in the approximation.

Frequently Asked Questions

Increasing the number of circles improves approximation accuracy. However, the number of points (N) on the original curve is the maximum limit. Additionally, drawing the curve slowly and carefully reduces noise and improves DFT accuracy.
The number of points N on the drawn curve is the maximum number of circles that can be used. The closer the number of circles is to N, the more perfectly it matches the original curve. With fewer circles, only the rough shape is reproduced.
Yes. By changing the number of circles, you can intuitively understand how low-frequency components represent the rough shape and high-frequency components represent the details. It is ideal as a visual introduction to Fourier series expansion.
Since DFT assumes a closed curve, if the start and end points do not match, discontinuities occur, leading to distortion and oscillation during reproduction. To achieve smooth reproduction, please draw a curve that is as closed as possible.

Real-World Applications

Signal Compression (JPEG/MP3): Fourier analysis is the backbone of modern compression. For instance, an MP3 encoder uses a similar transform to break down audio into frequency components, then discards the ones humans are less likely to hear, drastically reducing file size.

Medical Imaging (MRI): Magnetic Resonance Imaging machines don't take a direct picture. They measure the Fourier transform of the spin of atoms in your body. The complex image is then reconstructed using the inverse Fourier transform, just like this simulator rebuilds your drawing.

Radio & Communications: Every Wi-Fi or Bluetooth signal relies on manipulating different frequency components. By assigning data to specific Fourier components (a method called OFDM), multiple devices can share the same radio channel without interfering.

Vibration & Structural Analysis: Engineers use Fourier transforms to diagnose problems in machinery. For example, by measuring vibrations from a car engine and decomposing them into frequencies, they can pinpoint which rotating part (like a specific bearing) is wearing out.

Common Misconceptions and Points to Note

When you start using this simulator, many people encounter similar questions or mistakes. Let me explain three key points you should grasp first.

1. "Does maximizing the number of circles N guarantee perfection?"
It's true that in theory, using as many circles as the original number of points allows for perfect reproduction. However, the "number of points" itself is finite within the simulator; even the smooth curve you draw with your mouse is captured as a collection of discrete points. Therefore, even with N maximized, the reproduction is merely "passing through discrete points." In practice, finding the "minimum N that achieves the required accuracy" is more important than perfect reproduction. Think of it like MP3 compression cutting inaudible high frequencies above 20kHz.

2. "Can the rotation speed of each circle be chosen freely?"
While you change the "speed" with the slider, it's easy to misunderstand: the ratio of relative rotational speeds between circles is fixed. The angular velocity of the k-th circle is determined by $\omega_k = \frac{2\pi k}{T}$, making it an integer multiple of the fundamental speed. Consider what you're changing in the tool as the overall "playback speed," which uniformly speeds up or slows down this fundamental speed. To change frequencies in actual design, you need to alter the number or spacing of the sampling points themselves.

3. "Is the phase (initial angle) just decorative?"
Though less flashy than radius or speed, phase is a critically important parameter that determines the shape. For example, two circles with the same radius will trace completely different elliptical paths for the pen tip depending on whether their phases are offset by 90 degrees. When reconstructing a signal from Fourier coefficients in practice, incorrect phase information badly distorts the waveform. In this simulator too, you can see that each circle's arm starts pointing in a different direction from the very beginning.

What is Fourier Epicycles Simulator?

Fourier Epicycles Simulator is a fundamental topic in engineering and applied physics. This interactive simulator lets you explore the key behaviors and relationships by directly manipulating parameters and observing real-time results.

By combining numerical computation with visual feedback, the simulator bridges the gap between abstract theory and physical intuition — making it an effective learning tool for students and a rapid-verification tool for practicing engineers.

How to Use

  1. In "Draw" mode, sketch a closed curve on the canvas with your mouse or finger (or load a preset: Star, Heart, or Square wave). The path is automatically resampled to 256 points and decomposed into rotating circles via the DFT.
  2. Adjust the "Circles N" slider (range 1–200, default 20) to control how many epicycles are used, and watch the approximation accuracy change in real time.
  3. Use the "Speed" slider (1–50×) to change the epicycle rotation rate and observe how the circles combine to trace the pen tip.
  4. Switch to "Play" mode and monitor the "Progress" bar and the "Approx. error" readout (the fraction of total amplitude left unused).

Worked Example

Load the "Heart" preset: its 256-point outline is decomposed by the DFT and the circles are sorted by amplitude (largest first). Set "Circles N" to 5 for just a rough outline, 20 for a smooth heart, and 50+ for a near-perfect match. The "Approx. error" is computed as 1 − (sum of used circle amplitudes) ÷ (sum of all amplitudes), so it decreases monotonically as you add circles. Sharp shapes like the star contain more high-frequency content (small circles), so they need more circles than smooth shapes.

Practical Notes

  1. "Samples" is fixed at 256 (your drawing is auto-resampled to 256 points). It is a read-only display and cannot be changed.
  2. "Approx. error" is an amplitude ratio (1 − Σused ÷ Σall), not an RMS error. Dropping small circles (high-frequency components) increases it.
  3. The closer your curve is to being closed (start point equals end point), the fewer DFT discontinuities and the cleaner the reconstruction; open paths produce oscillations at the seam.
  4. Even at the maximum circle count, the reconstruction can only pass through the 256 discrete sample points—so aim for the smallest circle count that meets your accuracy needs rather than a perfect match.