Home▸Signals & Telecommunications▸2D FFT Spectrum Analyzer: Build the Fast Fourier Transform From Scratch

📈 2D FFT Spectrum Analyzer

A from-scratch radix-2 FFT spectrum analyzer on plain 2D canvas. Mix adjustable sine components, add noise or use your microphone, choose a window function, and watch a real computed frequency spectrum with correctly placed peaks and spectral leakage.

Signals & Telecommunications2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

A frequency-domain analyzer built entirely on a flat 2D canvas, with its own hand-written radix-2 Cooley–Tukey Fast Fourier Transform — no library, no AnalyserNode doing the math. Mix up to three adjustable sine components plus noise, or feed in your microphone, apply a window function, and watch the real computed magnitude spectrum land its peaks exactly where the underlying frequencies are.

🔬 What It Demonstrates

The simulation implements the iterative radix-2 FFT directly: bit-reversal permutation followed by log₂(N) butterfly stages, each combining pairs of values with a complex twiddle factor. For N samples at sample rate f_s, the transform returns N/2 usable bins spaced f_s/N Hz apart. Moving a frequency slider moves the corresponding spectral peak by exactly that amount — the FFT recomputes from the raw time-domain samples every frame, so nothing is faked or interpolated.

🎮 How to Use

Adjust the three (f, a) sliders to place sine components anywhere from 1–500 Hz and set their amplitude; add noise to see the spectral floor rise. Switch Window function between Rectangular, Hanning and Hamming to see spectral leakage change — rectangular windows show wide skirts around each peak, Hanning and Hamming narrow them at the cost of a slightly wider main lobe. Try Microphone mode (browser permission required) to analyse your own voice or environment with the same from-scratch FFT.

💡 Did You Know?

The Cooley–Tukey algorithm splits a size-N DFT into two size-N/2 DFTs recursively, which is why it requires N to be a power of two and runs in O(N log N) instead of the naive O(N²). Window functions exist because chopping a continuous signal into a finite frame implicitly multiplies it by a rectangular pulse, which is exactly what causes the spectral leakage a Hanning or Hamming window is designed to suppress.

About the 2D FFT Spectrum Analyzer

This simulation implements its own radix-2 Fast Fourier Transform rather than relying on the Web Audio API's built-in analysis. Each frame it synthesizes (or captures from a microphone) a block of N time-domain samples, applies a chosen window function, runs bit-reversal permutation and log₂(N) butterfly stages to compute the complex spectrum, and converts it into a magnitude plot — all in plain JavaScript on a 2D canvas.

Three adjustable sine components let you build compound signals and confirm the FFT resolves each one to its correct bin; adjustable noise reveals the spectral floor. Switching among rectangular, Hanning and Hamming windows shows spectral leakage directly: a rectangular window produces wide, ringing skirts around each peak, while Hanning and Hamming taper the edges of the sampled block and suppress those skirts at the cost of a slightly wider main lobe.

Frequently Asked Questions

Is the FFT here really computed from scratch?

Yes. The engine implements the iterative radix-2 Cooley–Tukey algorithm directly in JavaScript: bit-reversal reordering followed by butterfly stages with sine/cosine twiddle factors computed by the page itself. No browser AnalyserNode or external library performs the transform.

Why does the spectrum only go up to half the sample rate?

This is the Nyquist limit. A signal sampled at rate f_s can only unambiguously represent frequencies up to f_s/2, so only the first N/2 FFT bins carry independent information; the rest are a mirror image and are not plotted.

What is spectral leakage and how do I see it here?

Leakage is energy from a real spectral peak smearing into neighbouring bins because the analysed block is finite. Set Window to Rectangular and you will see wide skirts around each peak; switch to Hanning or Hamming and the same peaks narrow considerably because the window tapers the block's edges toward zero before the FFT runs.

Why must the FFT size be a power of two?

The radix-2 Cooley–Tukey algorithm recursively splits a transform of size N into two transforms of size N/2, which only divides evenly down to size 1 when N is a power of two. That is why the FFT Size selector only offers 256, 512, 1024 and 2048.

How is bin resolution calculated?

Each bin spans f_s/N Hz, where f_s is the sample rate and N is the FFT size. Doubling the FFT size halves the bin spacing (finer frequency resolution) but doubles how many time samples are needed, so the display updates more slowly.

What does the microphone mode do differently?

It captures real audio through the Web Audio API's raw time-domain buffer (getFloatTimeDomainData), then feeds those actual samples into the same from-scratch FFT used for the synthetic signal — the browser is used only to read the microphone, not to analyse it.

Why does the noise slider raise the whole spectrum floor?

Random noise contains energy spread across every frequency rather than concentrated at one. When it's added to the time-domain signal, the FFT correctly reports a small but nonzero magnitude in every bin, which appears as a raised, jittery floor under the sharp peaks from the sine components.

Is this a physically accurate signal-processing tool?

Yes, within the numeric precision of double-precision JavaScript floats. The butterfly arithmetic, bin-to-frequency mapping and window functions all follow the standard textbook formulas, so peak positions, bin spacing and leakage behaviour are all quantitatively correct, not just illustrative.

⚙ Under the hood

A plain 2D-canvas spectrum analyzer with a hand-written radix-2 Cooley-Tukey FFT: mix adjustable sine components plus noise or use your microphone, pick a rectangular, Hanning or Hamming window, and watch a real computed magnitude spectrum with correctly placed peaks and visible spectral leakage.

fft from scratchradix-2 fftfast fourier transformspectral leakagewindow functionhanning windowsignal processing

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