Fourier series
See how sums of sines build any periodic function: coefficients and partial sums for square, sawtooth, triangle, custom, or hand-drawn waves, the Gibbs phenomenon and Fejér smoothing, amplitude and phase spectra, rotating epicycles, a draw-any-shape complex Fourier demo, the DFT as arrows that line up or cancel, and the N² against N log N cost of the FFT.
Added · updated 14 October 2026
How to use it
-
Fourier series: pick a wave, type your own f(x) for one period [−π, π) (for example
x^2*sign(x),exp(-x^2),abs(sin(3x)),step(x)x), or choose *Freehand and draw one period on the plot. Slide Terms N or press Animate N to watch the partial sum SN build up.-
The coefficients are f ≈ a0/2 + Σ an cos nx + bn sin nx, computed by the trapezoidal rule on 8192 points (exact to machine precision for smooth functions; closed forms are shown alongside for the square, sawtooth, triangle, and parabola).
-
Readouts: RMS error, the overshoot as a fraction of the jump — it settles near 8.95 % however large N gets (the Gibbs phenomenon) — and how much of the signal’s power the first N terms capture (Parseval’s theorem).
-
Fejér smoothing replaces SN by the average of S0 … SN (weights 1 − n/(N+1)); it never overshoots, but converges more slowly.
-
Bar charts show amplitude An and phase φn, where an cos nx + bn sin nx = An cos(nx − φn). Copy the coefficients as CSV.
-
-
Epicycles: the same series as a chain of spinning vectors — harmonic n is a vector of length An turning n times per period; the height of the last tip traces the partial sum.
-
Draw a shape: draw any closed curve (or pick a heart, star, π, square, or trefoil). The path is treated as z(t) = x(t) + i·y(t), resampled evenly by arc length to 512 points, and transformed with a discrete Fourier transform; each frequency becomes one circle, sorted by size. Change the number of circles to see how many a shape needs — smooth curves need a handful, sharp corners many more.
-
DFT as arrows: type a short signal x[n] (a list such as
1, 0, -1, 0, or an expression innwithNfor the length, such ascos(2*pi*2*n/N)) or pick a preset, then choose a frequency bin k. Each term x[n]·e^(−2πikn/N) of Xk = Σ x[n]·ω^(−kn) is drawn as an arrow, head to tail from the origin; the last tip is Xk. When the signal contains frequency k the arrows line up and Xk is large; otherwise they wind round and cancel, the same fact that makes the roots of unity sum to zero. Arrows placed (or ▶ Place arrows) steps through n; the signal is plotted with the probe tone cos(2πkn/N) over it, the bar spectrum shows |Xk| for every k (click a bar to test that k), and a table gives every term and running sum for checking by hand. The readouts include the amplitude 2|Xk|/N of a sine at that bin. -
N² vs N log N: slide N from 2¹ to 2³⁰ and compare the naive DFT’s N² multiply-adds with the FFT’s N log2N, their ratio N / log2N, and the time each would take at one nanosecond per operation, on a log–log chart. (A radix-2 FFT does (N/2)·log2N complex multiplications; the book counts N log2N, which only changes the ratio by a factor of 2.)
-
Tick Long convolution (Hyena) to count what a Hyena layer does instead of attention: convolve a length-N sequence with a length-N filter. Directly that is N² multiply-adds, the same growth as attention’s N² scores; through the FFT it is two forward transforms of the zero-padded length 2N, a pointwise product and one inverse transform, 3 · 2N log22N + 2N operations. At 64K tokens that is 4.3 × 10⁹ against 6.8 × 10⁶, about 630× fewer.
-
⛶ Full screen (or F) gives the active tab’s main plot the whole screen — the browser’s full
screen where it is allowed, otherwise a full-window layer (iPhone) — redrawn as the window changes.
On a phone the controls above the plot start hidden; ◫ Panels shows them. Escape leaves.
Limits
The DFT tab takes 2 to 64 samples (enough to see every arrow). Expressions use + - * / ^, parentheses, pi, e and the usual functions (sin, cos, exp, sqrt, abs, sign, step, …); implicit multiplication (2n) works. Series coefficients come from 8192-point numerical integration, so a function with a jump converges slowly near it. There is no audio playback; for listening to a spectrum use the spectrum analyser.
Related: spectrum analyser (real signals, windows, spectrograms), Big-O explorer (growth rates), audio oscilloscope.
Companion to Complex Numbers: roots of unity and the FFT and Trigonometry: a Fourier teaser and Build a synth of Mathematics, Reconnected.
The long-convolution count is a companion to Alternative model architectures: Hyena in _AI Acceleration: From Transistors to Trillion-Parameter Models. Hyena’s reported ≈ 100× speed-up over FlashAttention at 64K tokens (Poli et al., Hyena Hierarchy, ICML 2023) is a measured wall-clock figure; the operation count here is larger because attention kernels run closer to the hardware’s peak.
Linking to an example
Every setting a book example needs can be written as a short parameter; add the tab after # (series, epicycles, draw, dft or ops). For example ?x=1 or ?wave=square&n=25#series.
| Parameter | Meaning | Example |
|---|---|---|
|
Fourier series function: |
|
|
your own f(x) on [−π, π) (implies |
|
|
terms N in the partial sum (0–200) |
|
|
Fejér smoothing, |
|
|
draw the individual harmonics, |
|
|
DFT signal: samples, or an expression in |
|
|
DFT length N when |
|
|
the frequency bin k being tested |
|
|
how many arrows are placed (default all) |
|
|
operation counter: N = 2fft (1–30) |
|
|
operation counter: count a long convolution (Hyena), direct against FFT-based, |
|
|
Draw a shape preset: |
|
|
circles in Draw a shape (1–256) |
|
|
a preset from the list below |
|
In a URL a typed ` arrives as a space, so in `f` and `x` a space between two terms is read as ` (?f=x^2 1 means x² + 1); write * to multiply, or encode plus as %2B. Parameters given alongside example= override the preset, and a preset opens its own tab unless the link names one.
Presets (?example=…):
-
ch15-dft-arrows— the book’s 8-sample tone with 2 cycles, tested at k = 2: the arrows line up and |X2| = 4 (open). -
ch15-dft-cancel— the same signal at k = 3: the arrows go round and cancel, X3 = 0. -
ch15-dft-mirror— k = 6 = 8 − 2, the mirror image: |X6| = 4 again. -
ch15-roots-of-unity— six ones at k = 1: the arrows are the sixth roots of unity, a closed hexagon summing to 0. -
ch15-fft-count— N = 2²⁰: N² ≈ 1.1 × 10¹², N log2N ≈ 2.1 × 10⁷, about 52,000 times fewer operations. -
ch13-three-sines— sines of amplitude 0.5, 0.25 and 0.125 at bins 2, 4 and 6 of 32 samples: the spectrum recovers all three (2|Xk|/N). -
ch13-synth-square— odd harmonics with amplitude ∝ 1/k building a square wave (8 terms). -
ch13-synth-saw— all harmonics with amplitude ∝ 1/k building a sawtooth. -
gibbs— a square wave with 60 terms: the 9 % overshoot at the jump does not shrink.
From AI Acceleration:
Feedback is a gift. Something to improve, a feature to add, or a bug? Tell me.
Runs entirely in your browser; nothing you type leaves this page.