2D Inverse Fourier Transform Playground
Original image
Original image or the result of backward Fourier transform of forward Fourier transform (spectrum).Result
The result of backward (inverse) Fourier transform of masked spectrum.
Masked spectrum (edit here!)
- Left-drag: Scratch mask
- Right-drag: Restore mask
- Wheel: Change circle size
Spectrum
The result of forward Fourier transform of original imag. The actual values are complex numbers, but absolute values are used here for visualization.
Image URL:
or
![]()
or
Mask URL:
or
![]()
or
Description
This is an interactive demo tool for understanding how 2D image Fourier transform works.
This work is inspired by Prof. Ohzawa's lecture. →video
How to use
- On "Masked spectrum" canvases.
- Scratch mask: Moue left press and drag
- Restore mask: Moue right press and drag
- Change brush size (red circle): Mouse wheel
- Change input images
Features
- Mouse interactive mask edit
- Real-time Fourier transform (inverse)
- Input image from uploaded image or URL
- Mask image from uploaded image or URL
Used technologies
- HTML / Javascript
- Vue.js
- WebGL2
Source codes (GitHub) Any suggestions and issues are welcome.
Future works
- Mobile support
- More friendly UI