What is the Fourier Transform?
The Fourier Transform is one of the most powerful tools in mathematics and engineering. At its core, it answers a simple question: what frequencies are hidden inside a signal? A signal that looks like complicated noise in time might be nothing more than a handful of pure tones layered on top of each other. The Fourier Transform finds those tones.
This simulation visualises the intuition behind the transform in exactly the way 3Blue1Brown's famous video does — by turning the concept of "winding a signal around a circle" into something you can interact with directly.
How to use this simulation
- Select a signal preset from the toolbar (or press keys 1–8). Each preset is a different time-domain waveform.
- Drag the WIND f slider to change the winding frequency — the speed at which the signal is wrapped around the circle in the middle panel.
- Watch the center of mass (green dot) in the winding panel. When the winding frequency matches a frequency present in the signal, the wound graph bunches up on one side and the center of mass moves far from the origin.
- The right panel traces the x-coordinate of the center of mass as you scan winding frequencies — this is the "Almost Fourier Transform". Peaks appear exactly at the signal's component frequencies.
- Hit Play Demo to watch an automatic tour through all presets. Demo mode starts on its own after 10 seconds of inactivity.
- Toggle Sound to hear the actual signal as an audio tone — you'll hear harmony when two frequencies are present.
The core idea — The Winding Machine
Imagine taking the time-domain signal (left panel) and "wrapping" it around a circle like winding thread onto a spool. The winding frequency controls how fast you wrap. If you wind at exactly 1 revolution per second, each second of signal maps to one full loop around the circle.
Now imagine computing the center of mass of all the points on that wound-up curve. Most of the time, the curve wraps around fairly symmetrically, and the center of mass sits near the origin. But when your winding frequency happens to match the actual frequency of the signal, the curve lines up beautifully on one side — the center of mass swings far from the origin. That's the detection event.
Almost-FT(f_wind) = (1/T) · ∫₀ᵀ g(t) · e^(−2πi · f_wind · t) dt
where g(t) is the signal and f_wind is the winding frequency.
The result is the center of mass of the wound-up graph in the complex plane.
The true Fourier Transform differs from the "Almost" version only in that it doesn't divide by time — meaning a longer signal gives a proportionally larger spike, making it easier to resolve nearby frequencies. This is intimately connected to the Heisenberg Uncertainty Principle.
Technical Details
Signal Generation
Each preset signal is computed analytically as a sum of pure sinusoids sampled at 2000 points per second over a 2-second window, giving 4000 time samples. Square and sawtooth waves use their Fourier series decompositions (adjustable via the "Terms" slider).
Winding Computation
The wound graph is computed by evaluating g(t) · e^(−2πi·f·t) for each sample, mapping time samples onto the complex plane. This is the discrete equivalent of the continuous integral, computed in real time at 60fps.
FT Scan
The frequency-domain panel pre-scans 500 winding frequencies from 0 to 10 Hz and stores the center-of-mass magnitude at each, updated whenever the signal changes. A vertical cursor tracks the current winding frequency.
Sonification
Uses the Web Audio API to generate the actual signal as audio. Each frequency component drives an OscillatorNode at its exact frequency and amplitude. Toggle with the Sound button or the S key.
Rendering
Three independent Canvas2D contexts render at 60fps with requestAnimationFrame. Each canvas resamples to its actual pixel dimensions on resize via ResizeObserver for crisp rendering on HiDPI screens.
Input
Keyboard shortcuts, mouse drag on the winding slider, and touch events are all handled. The winding frequency slider responds to left/right arrow keys. Demo mode triggers after 10 s of no interaction (click, keydown, or touch).
Signal Presets Explained
- 3 Hz — A pure 3 Hz sine wave. The FT shows a single sharp spike at exactly 3 Hz.
- 2 Hz — A pure 2 Hz sine wave. Spike at 2 Hz.
- 2+3 Hz — Superposition of 2 Hz and 3 Hz. Two spikes. Set the winding freq to each and watch the center of mass move.
- Square — Built from odd harmonics: 1f + ⅓·3f + ⅕·5f + … Spikes at 1, 3, 5, 7, … Hz. Use the "Terms" slider to add or remove harmonics.
- Sawtooth — All harmonics: 1f + ½·2f + ⅓·3f + … Spikes at 1, 2, 3, 4, … Hz with decreasing amplitude.
- Beats — 5 Hz + 6 Hz of equal amplitude. The time domain shows amplitude beating at 1 Hz.
- Chirp — A sine wave whose frequency sweeps from 1 Hz to 8 Hz over 2 seconds. The FT is broad — energy is spread across all swept frequencies.
- Mystery — Can you figure out the component frequencies? Wind the machine to find them!
Future Directions
- Draw your own signal — Freehand-draw a signal on the time-domain panel and immediately see its Fourier transform. This would make the tool especially powerful for building intuition.
- 2D DFT — Extend to images: apply the 2D Fourier transform to a bitmap and visualise its frequency spectrum, which is how JPEG compression works.
- Inverse FT — Add a frequency-domain editor where you can suppress or amplify frequency bands, then reconstruct the time-domain signal — a visual EQ / low-pass filter demo.
- Uncertainty principle — Animate the time-frequency uncertainty trade-off: short pulses spread wide in frequency, and vice versa. Connects directly to Heisenberg.
- FFT animation — Visualise the Cooley–Tukey FFT butterfly diagram, showing how the O(N²) DFT is reduced to O(N log N) through recursive splitting.
- Live microphone input — Feed real microphone audio through the winding machine in real time, letting you see the Fourier transform of your voice or environment.
- Epicycle drawing mode — Take any custom SVG path, compute its DFT, and reconstruct the path using spinning circles (epicycles), as in 3Blue1Brown's Fourier series follow-up video.