BrainFlux

2D Fourier transform

Image f(x, y)

Paint on the picture: the transform follows each stroke

Tool

Paint with

times the side's brightness

Resolution

Fourier transform F(k_x, k_y)

Paint here too: one dot of k is one wave in the picture

Start from

Experiments

Start here

Two pictures of one thing: on the left a picture, f(x, y), on the right its Fourier transform, F(k_x, k_y), which says how much of each set of stripes (each spacing and direction) the picture is made of. The centre of the transform is k = 0, the picture's average; the farther out from the centre, the finer the stripes. Brightness is how big a value is and colour is its phase: red for positive, cyan for negative.

Paint or erase on either side and the other follows as you draw; with the Mask tool, press on the transform's centre and drag outwards, and the picture comes back blurred, then sharper as the circle grows, since the fine detail lives far from the centre. Pick another picture or shape under Start from, and hover over either side to read the value under the pointer.

Look for this: one dot in the transform is one set of stripes in the picture, and the smaller a shape on the left, the wider its pattern on the right.

On the left an image $f(x,y)$; on the right its two-dimensional discrete Fourier transform $$F(k_x,k_y)=\frac{1}{N}\sum_{x,y} f(x,y)\,e^{-2\pi i\,(k_x x+k_y y)/N}$$ which says how much of each plane wave $e^{2\pi i (k_x x + k_y y)/N}$ the image contains. Paint on either side and the other is recomputed as you paint. The origin of both is the centre pixel; $k$ counts the cycles a wave makes across the whole image, so a point at a distance $|\vec k|$ from the centre is a wave of wavelength $N/|\vec k|$ pixels (the readout under the transform gives it).

Both sides are complex. Brightness is the magnitude, from black (zero) to white (very large), and colour is the phase:

The complex plane: red is positive real, cyan negative real, yellow-green $+i$, violet $-i$. The Brightness sliders only change the drawing, not the data: transforms span many orders of magnitude, so what is drawn is $\tfrac{2}{\pi}\arctan(|F|/R)$, with $R$ the magnitude drawn in full colour; the slider's number moves $R$ by powers of ten, so +1 draws everything ten times brighter.

1. Take the stripes off Fourier's jacket

The engraver shaded the jacket with parallel lines. To a Fourier transform, a family of lines with one spacing and one direction is a pair of bright spots at $\pm\vec k$, away from the centre, at a distance set by the spacing and in the direction across the lines. Erase those spots (with Mirror on, each stroke erases its partner at $-\vec k$ too) and the stripes fade from the image while the rest stays sharp. This is a notch filter.

2. Low-pass filter: blur

With the mask tool, press on the centre of the transform and drag outwards: everything farther from the centre than the pointer is set to zero, as you drag. Only the long wavelengths inside the circle survive: the image comes back blurred, and sharpens as you drag farther out; pull back in and it blurs again. The faint rings near sharp edges are ringing, the price of cutting the spectrum off abruptly.

3. High-pass filter: edges

Now the mask zeroes the inside instead. Without the low frequencies, smooth areas lose their brightness and only edges, curls of hair and hatching remain. Smaller masks remove less.

4. A Gaussian transforms into a Gaussian

Move the Size slider. A Gaussian of width $\sigma$ (its standard deviation, in pixels) transforms into a Gaussian of width $N/(2\pi\sigma)$ pixels: the narrower one is, the wider the other. Here $\sigma$ is 4% of the image, 10 pixels at 256, so the transform's width is $1/(2\pi\times0.04)=4.0$ pixels at any resolution. This is the uncertainty principle of quantum mechanics, $\sigma_x\sigma_p\ge\hbar/2$, in disguise, and the Gaussian is the shape that makes the product smallest. Paint a single pixel: its transform is flat.

5. Shifting multiplies by a phase

Drag the image with the hand tool. The magnitude of the transform does not change at all (it is being drawn as magnitude only); only its phase does, by $e^{-2\pi i\,\vec k\cdot\vec a/N}$ for a shift $\vec a$. Switch the transform's drawing back to magnitude and phase to see the colour ramp: stripes perpendicular to the shift, closer together the farther you drag. Drag the transform instead, and the image gets the phase ramp.

6. A square becomes a sinc

The transform of a square of side $w$ is $\mathrm{sinc}(k_x)\,\mathrm{sinc}(k_y)$: a bright centre with lobes along the axes falling off as $1/k$, and zeros every $N/w$ (here $w=31$ pixels, so every 8.3). Raise the transform's brightness to see the faint lobes off the axes; lower it to see how much brighter the centre is. Shrink the square and the sinc spreads. Try the disk too: its Airy pattern has its first dark ring at $k=0.61\,N/R$ for a disk of radius $R$, 6.1 pixels from the centre here ($R=25.6$ pixels); and the ring, whose transform is a Bessel function.

7. Slits, gratings and diffraction

Far from an aperture, the light it lets through makes the pattern $|F|^2$: the Fourier transform is Fraunhofer diffraction. The transform is drawn as intensity $|F|^2$. A single slit gives a wide envelope across the slit; two slits put fringes inside it, spaced by the inverse of the separation, $N/d$ for slits $d$ apart (here $d=21$ pixels, so a fringe every 12.2); seven slits sharpen the fringes into the orders of a grating.

8. Crystals and the reciprocal lattice

A lattice of atoms with spacing $a$ transforms into a lattice of spots with spacing $N/a$: the reciprocal lattice of X-ray and electron diffraction. Make the lattice finer and the spots move apart. The hexagonal lattice's reciprocal lattice is hexagonal and rotated by 30°.

The brick wall is a photograph, four bricks wide and eighteen courses tall. Alternate courses are offset by a third of a brick (not the usual half), so the pattern repeats every two courses with two bricks in each repeat, and its spots lie on a grid 4 pixels apart across and 9 up. In every other row of that grid, every third spot is missing: there the two bricks' waves cancel. At the spot $(4m, 9n)$ they add to $1+e^{2\pi i(m/3+n/2)}$, the structure factor, which is zero for $n$ odd and $m$ a multiple of 3. The grain of the brick faces spreads a faint haze over all of $k$, as disorder does in a real crystal.

9. Real images have symmetric transforms

A real image has $F(-\vec k)=F(\vec k)^*$: points opposite each other through the centre have the same brightness and opposite phases. Red faces red and cyan faces cyan (a real number is its own conjugate), but yellow-green ($+i$) faces violet ($-i$), and orange faces magenta. Fourier's portrait has every colour because it is not symmetric. An image that a half turn about the centre leaves unchanged, $f(-\vec r)=f(\vec r)$, has a real transform: load the square or the disk and you see only red, with cyan where the transform is negative (the sinc's side lobes, the Airy rings). In general, for a real image, the symmetric part makes the real part of its transform, and the antisymmetric part the imaginary part.

Paint on the transform with Mirror off and the image picks up colour: it has become complex. Turn Mirror on, and every stroke is copied to $-\vec k$ with the conjugate value: the image stays real.

10. Phase or magnitude: which one carries the picture?

The transform's phase has been thrown away (Keep only the magnitude): the image is unrecognisable. Undo, and choose Keep only the phase from the transform's menu instead: Fourier is still there. The phases say where the edges are. X-ray crystallography can measure only $|F|^2$, which is why finding the phases (the phase problem) is the hard part of solving a crystal structure.

11. Swap the phases of two pictures

The transform of the author's photograph has been given the phases of Fourier's transform, keeping its own magnitudes. The result looks like Fourier, not like the author. (The menus do this: Remember this on one transform, load another picture, then Use remembered phase. Try it the other way round.)

12. Every point of k-space is a plane wave

One bright pixel in the transform is one plane wave $e^{2\pi i\,\vec k\cdot\vec r/N}$ in the image: stripes of rotating colour, perpendicular to $\vec k$, with $|\vec k|$ of them across the image. Here the pixel is at $\vec k=(5,3)$, so the wave repeats every $N/|\vec k|=43.9$ pixels at 256, in the direction 31° above the $x$ axis: the readout under the transform says so when you point at the pixel. The transform is shown magnified 8 times. Drag the pixel with the hand tool and the stripes turn and change spacing. Press B for the brush (set to one pixel) and click elsewhere to add a second wave: the two interfere.

13. Sampling: painting on a lattice

With Repeat 4×4, every brush mark is copied onto a 4×4 lattice: the image is the mark convolved with a comb. Its transform is the mark's transform multiplied by a comb: zero except at every fourth frequency. Periodic in one domain, discrete (sampled) in the other.

Things to know

Both pictures wrap around: the discrete transform treats the image as one tile of a periodic wallpaper, so paint that leaves one edge comes back on the other.
The transform here is unitary: $\sum|f|^2=\sum|F|^2$ (Parseval), so the two sides hold the same total power and the values read under the pointer are on one scale. (Each side is drawn at its own brightness, though, so the same colour need not mean the same value.)
The brush paints the value under the ring on the wheel, or the one you type, as $\mathrm{Re}$ and $\mathrm{Im}$ or as magnitude and angle, times the side's brightness scale. Painting $0$ is the same as erasing.
Keys: H hand, B brush, E eraser, M mask, [ ] brush size, Ctrl+Z undo.
Your own pictures never leave your computer; everything is computed in the page.

Rewritten in 2026 from the BrainFlux FFT2D Java applet. Source: github.com/gallicchio/brainflux, MIT licence.

Image f(x, y)

Fourier transform F(kx, ky)

Fourier transform F(k_x, k_y)