FFT 2D Visualizer

Draw or upload an image and visualize its 2D Fast Fourier Transform magnitude spectrum. Adjustable log base, power, offset, and scale. Uses fft.js.

v0.0.1
🍰
🏃
🎓
Intermediate
components
#react#canvas#fft#visualization#image-processing#signal-processing

FFT 2D Visualizer

Source

equation uses draw

Loading editor…
Variables
Functions
Snippets

FFT

Log-scale remap is on — weaker frequencies are lifted into view.

display = normalize(log2(scale × (magnitude + offset)3))

Auto

Documentation

FFT 2D Visualizer

Write a safe pixel equation and see its 2D Fast Fourier Transform magnitude spectrum in real time. OR freehand draw explicitly in your equation.

Features

  • Live equation editor (Acorn-parsed mini-language — no eval)
  • Presets: checkerboard, circle, wave, cross, persian tile, sinusoidal, image
  • Per-pixel vars: img (uploaded image), draw (freehand strokes)
  • Upload an image — stored as img (0–255 grayscale) in the equation
  • Freehand draw — stored as draw; combine with || draw > 0 or max(..., draw)
  • Revamp toggle for log-scale spectrum display
  • Touch and mouse support

Equation language

Safe mini-language: const, return, if/else, builtins (sin, floor, xor, max…). Per-pixel vars: x, y, px, py, img, draw (0–255).

Return a number (−1…1 → grayscale, 0…255 as-is) or boolean (on/off). Combine drawing explicitly, e.g. || draw > 0 or max(wave, draw).

Dependencies

pnpm add fft.js acorn @codemirror/state @codemirror/view @codemirror/commands @codemirror/language @codemirror/lang-javascriptLanguage: bash