What is a Fourier series?

A Fourier series represents a periodic function f(x) as an infinite sum of sinusoids: f(x) = a₀/2 + Σ(n=1..∞)[aₙcos(nx) + bₙsin(nx)]. The coefficients are aₙ = (1/π)∫f(x)cos(nx)dx and bₙ = (1/π)∫f(x)sin(nx)dx. Any piecewise-smooth periodic function can be represented this way, making Fourier series fundamental to signal processing, physics, and engineering.

What is the Gibbs phenomenon?

At a jump discontinuity (like the edges of a square wave), the partial Fourier sum always overshoots by approximately 9% of the jump height, no matter how many harmonics are included. This overshoot does not disappear as N→∞; it only becomes narrower. It was first noted by Henry Wilbraham in 1848 and later studied by J. Willard Gibbs in 1899. It is caused by the slow 1/n decay of Fourier coefficients near discontinuities.

What does each rotating circle represent?

Each rotating circle (phasor) represents one harmonic of the Fourier series. The radius equals the harmonic's amplitude |cₙ| = √(aₙ²+bₙ²), and the rotation speed equals the harmonic frequency n. The tip of the chain of phasors traces a point; its y-coordinate at each moment equals the Fourier partial sum at the current phase. This is exactly the same mechanism used in the Discrete Fourier Transform-based epicycle drawings.

How does the Custom preset work?

When Custom is selected, click and drag on the waveform panel (right side of the canvas) to draw one period of any waveform. The simulator computes the Discrete Fourier Transform (DFT) of your drawn samples to extract the Fourier coefficients aₙ and bₙ. The phasor chain and spectrum are updated in real time as you draw. This demonstrates that ANY periodic waveform can be decomposed into sinusoidal components.

Home▸Sound & Music▸Fourier Series Synthesiser — Animated Phasor Chains & Spectrum

🧪 Fourier Series Synthesiser — Animated Phasor Chains & Spectrum

Interactive Fourier series visualiser: animated rotating phasor chains build square, sawtooth, triangle, half-wave rectified, and pulse waveforms harmonic by harmonic. Adjust N (number of harmonics), watch the Gibbs phenomenon, draw your own waveform, and view the harmonic spectrum in real time.

Sound & Music2DModerate60 FPS

⚙ Under the hood

This simulation demonstrates the synthesis of sound using Fourier series. It visually represents the decomposition of a waveform into its constituent frequencies and shows how these frequencies can be combined to create different sounds.

Fourier SeriesPhasor ChainsSpectrum

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install