This javascript applet is a demonstration of the discrete fourier transform. You will see an example image on the left, which is actually a complex function of x and y. The fourier transform will be shown on the right.

The Example popup lets you select some other examples.

The Mouse popup determines what the mouse does which clicking and dragging on the function or its transform. For example:

• Draw Rectangle draws a solid rectangle. The transform of this function is a sinc function.
• Draw Ellipse draws a ellipse.
• Draw Points draws a point at the mouse position, which might be very hard to see unless you zoom in.
• Draw Gaussian draws a Gaussian function, which is centered where you first click the mouse. Drag the mouse to determine its width. The transform of a Gaussian is also a Gaussian.
• Translate moves the function. Since we're demonstrating the discrete transform, the function wraps around at the edges.
• Scale rescales the function.
• Subdivide rescales the function to be smaller, creating multiple copies.
• Inspect momentarily zeroes out the function everywhere except at the cursor position, so you can see the transform of just that part of the function.
• Clear All But Rectangle zeroes out the function everywhere except in a rectangle which you specify by clicking and dragging.
• Clear All But Ellipse zeroes out the function everywhere except in a ellipse which you specify by clicking and dragging.
• Multiply By Gaussian multiplies the function by a Gaussian which is centered where you first click the mouse. If done on the fourier transform, this performs a Gaussian blur on the source image.
• sinc(x)*sinc(y) draws a sinc function in two dimensions, centered where you first click the mouse. Drag the mouse to determine its width.
• Multiply By sinc(x)*sinc(y) multiplies the function by a sinc function. If done on the fourier transform, this does a convolution with a rectangle.

Clear will reset the function to zero.

Multiply by -1 will multiply the function by -1, changing its phase. Since DFT is linear, this also multiplies the transform by -1.

Flip X/Y will flip the function in the X or Y direction (reflect it over the Y or X axis).

Zoom In On Transform will zoom in on the fourier transform for closer inspection. You can also Zoom Out. The mouse wheel does the same thing. You can't zoom in on the source function.

Reset Example resets any changes you have made to the example.

Load Image will let you choose an image to load. The image should be roughly square, or it will be stretched. Only the red channel of the image is used.

View Phase as Color uses color to indicate the phase of the complex functions. If you turn this off, then only the magnitude will be shown.

Brightness can be used to reduce or amplify the brightness of the functions.

Draw "Color" (Magnitude) can be used to specify the magnitude of the value used to draw on the function when doing Draw Rectangle, etc. Set this to zero to erase. The actual value drawn is shown below.

Draw "Color" (Phase) can be used to specify the phase of the value used to draw.

Click here to go to the applet.