Paint on a picture's 2D spectrum and watch the inverse FFT redraw it instantly.
A 256 x 256 grayscale still life, drawn in code, is transformed with a hand-written 2D FFT (every row, then every column), and its log magnitude spectrum sits beside it with the zero frequency in the middle. The brush paints a mask on the spectrum, mirrored through the center because a real picture has a conjugate-symmetric spectrum, and every stroke sends the masked spectrum back through an inverse 2D FFT. Erasing two bright dots wipes a screen pattern off the picture, keeping only the middle blurs it with the ringing of a sharp cutoff, and removing the middle leaves only edges. A side panel shows exactly what you removed and the single cosine wave under the brush, and the hybrid preset joins the lows of one word to the highs of another.
Try it. Drag on the spectrum to erase frequencies, with shift or a right-drag to restore them, or switch the brush to Boost to amplify them. Press and hold the picture (or Space) to compare with the original. Presets 1 to 6 load a hybrid image, moire removal, low-pass, high-pass, a directional filter and a zone plate; [ and ] resize the brush, I inverts the mask and C clears it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a "Fourier darkroom" with JavaScript and the HTML canvas element: a grayscale picture next to its 2D Fourier spectrum, where painting on the spectrum filters the picture. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a 256 x 256 grayscale picture in code: draw a few shapes, some stripes, a checkerboard and a line of text onto an offscreen canvas and read the pixels back with getImageData.
- Write an iterative radix-2 FFT yourself, then a 2D FFT that transforms every row and then every column.
- Show two panels side by side, each scaled up from 256 x 256: the picture, and the log magnitude of its spectrum, log(1 + |F|), shifted so the zero frequency is in the middle. Use a warm colormap from black through purple to yellow.
- Keep a mask of ones the size of the spectrum. When I drag on the spectrum, paint zeros into the mask with a soft round brush, and also at the mirrored point through the center, because a real image has a conjugate-symmetric spectrum.
- Whenever the mask changes, multiply the spectrum by it, run the inverse 2D FFT and redraw the picture from the real part.
Once that works, make it beautiful:
- Draw the erased parts of the spectrum dimmed with a cool tint, and show the brush and its mirror as outlines.
- Add presets: a low-pass disc (watch the ringing from the sharp edge), a high-pass (only edges survive), and periodic stripes added to the picture whose bright dots you can paint out.
- Show a small panel of what was removed: the original minus the result.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as building a hybrid image from the lows of one picture and the highs of another, a boost brush for sharpening, or showing the single sine wave under the cursor.
