Processing math: 100%

The Fourier Transform

An Interactive Guide

Click on anything underlined and drag left or right to change the value.

On the left of the diagram below is a circle with radius 4.0

. If you go around the circle 1.0 times starting at 0% of the way around, then at 0% of the way through your journey the height of the purple dots will be:
4.0 • sin(1.0 • 0.0% of 2

$\pi$ + 0% of 2

$\pi$ ).

This was a preliminary demo. I put it at the top before the introduction so that you (hopefully) wouldn't get bored and go away. The goal of this demo is to help you understand that circles and sine waves are really the same thing. The percentages in the sine function are in terms of 2 $\pi$ because 2 $\pi$ is the circumference of a circle with radius 1; therefore, 2 $\pi$ is 100% of the way around the circle

Introduction:

Fourier transforms are an incredibly fascinating topic. They have uses in nearly every field of science and engineering. Unfortunately, most textbooks and websites give you a very technical explanation of how they actually work. They'll usually throw up a formula like $X_k = \sum\limits_{n=0}^{N-1} x_n e^{-i 2 \pi k n / N}$ , and then say "right, that's it! Now go forth and conquer". But science and math are visual, kinesthetic displines (at least when it comes to intuition and understanding). Formulas are a great way of representing ideas formally, but they are usually not the best way of coming up with ideas or communicating your ideas to others. They should come at the end of an investigation into a topic, not the beginning. Only once I understand something in a concrete sense can I attempt to formalize it in abstract symbols. Thankfully, computers exist which can make the process a little more visual and interactive. What follows is my attempt to do just that.

If you don't know what the goal of a Fourier transform is, I promise to explain a little later. I would prefer the goal to emerge naturally from our exploration of circles and sine waves, rather than tell you what the goal is up front and have it seem potentially arbitrary. For now let's keep building on this idea that sine waves can be represented as circles.

On the left of the diagram below are two circles with radii 4.0

and 2.0. If you go around the red circle 1.0 times starting at 0.0% of the way around the circle, and around the blue circle 2.0 times starting at 0% of the way around the circle and then add the heights of the red and blue dots, then at 0.0% of the way through your journey you will get:
4.0 • sin( 1.0 • 0.00% of 2

$\pi$ + 0% of 2

$\pi$ ) + 2.0 • sin( 2.0 • 0.00% of 2

$\pi$ + 0% of 2

$\pi$ ). This is the height of the purple dot.

To reiterate, we just have two circles now instead of one. The purple curve on the right is the sum of the red and blue ones. This demo shows that if we have two sine waves and we add them together, we can get some slightly more interesting curves. Try messing around with all of the parameters to get a sense of what you can make. For example, can you get the two circles to "cancel out" so that the blue curve is always 0? (Hint: start by setting the radii of the two circles to be the same number)

Here is a more intuitive way of adding sine waves together: just place the center of one circle on the edge of the other one and rotate them both with time. The two circles on the left have radii 4.0

and 2.0. If you rotate the blue circle around the red circle 1.0 times starting at 0% of the way around the red circle, and rotate the purple dot around the blue circle 2.0 times starting at 1% of the way around the blue circle, then at 0% of the way through your journey the height of the purple dot will be:
4.0 • sin( 1.0 • 0% of 2

$\pi$ + 0% of 2

$\pi$ ) + 2.0 • sin( 2.0 • 0% of 2

$\pi$ + 1% of 2

$\pi$ ).

Try setting the same parameters on this example and the previous one and check the results. The two purple curves should look the same.

Let's extend our idea even further, so that now we're adding 4 circles. For the sake of brevity, I've fixed the widths of all of the circles to be 1. I've also fixed the number of number of rotations each circle completes. The inner-most circle will complete one rotation, the next one out will complete 2 rotations, and so on. The reason for this will become clear in the next section. All we have to work with now is the offset, or starting point, which is sometimes called the phase. Change each of the phases individually to get a sense of what they do. At 0

% of the way to 2

$\pi$ , the height of the purple dots will be:
sin(0% of 2

$\pi$ + 0% of 2

$\pi$ ) + sin(2 • 0% of 2

$\pi$ + 0% of 2

$\pi$ ) + sin(3 • 0% of 2

$\pi$ + 0% of 2

$\pi$ ) + sin(4 • 0% of 2

$\pi$ + 0% of 2

$\pi$ )

With 4 circles you can get some really crazy looking curves! Seriously, try it. When you're done, try this: set all 4 phase offsets to 25% of 2 $\pi$ . Notice that there is a spike (the height of the purple dot is greater than 0) at the first vertical marker, and then at all other markers the value is 0. We can think of this as a representation of the sequence [spike,0,0,0]. Can you think of a way to represent the sequence [0,spike,0,0] (i.e. a spike at the 2nd marker, and 0 at all the other ones)? How about [spike,spike,0,0]? Try it for a while and then read on for an explanation of the solution.

Explanation and Generalization

Okay, so how do we do it? One thing we can notice is that whenever there's a spike it's pretty easy to see why -- we just have all of the circles stacked on top of one another, with the purple dot on top. Then the purple dot is at the highest point it can be. So in order to get a spike at 25%, just drag any of the orange numbers until it says "25% of 2 $\pi$ ", and then start adjusting the phase offsets until each circle is on top of the previous one. At 25% of the way to 2 $\pi$ , the blue circle is on top of the red circle if you set the first offset of 0%. The yellow circle is on top of the blue circle if you set the second offset to 75%, the green circle will be on top of the yellow cicle if you set the third offset to 50%, and purple dot is on top of the green circle if you set the fourth offset to 25%. So with offsets of 0%, 75%, 50%, and 25%, we have successfully moved the spike over to the second vertical marker. You can figure out how to get spikes at the third or fourth markers in the same way.

What about the other sequence we mentioned, [spike,spike,0,0]? This sequence can just be viewed as the sum of the sequences [spike,0,0,0] and [0,spike,0,0]. Let's try it out:

[spike,0,0,0] =

= $\sin(x + \frac{\pi}{2}) + \sin(2x + \frac{\pi}{2}) + \sin(3x + \frac{\pi}{2}) + \sin(4x + \frac{\pi}{2})$

[0,spike,0,0] =

= $\sin(x) + \sin(2x + \frac{3\pi}{2}) + \sin(3x + \pi) + \sin(4x + \frac{\pi}{2})$

[spike,spike,0,0] =

= $\sin(x) - \sin(3x) + \sin(x + \frac{\pi}{2}) + \sin(3x + \frac{\pi}{2}) + 2\sin(4x + \frac{\pi}{2})$

And there you have it. I have finally taken to using fractional values of pi instead of percentages, and using x as our variable but everything else is the same. Using this method of finding out how to get individual spikes and then adding spikes together, we can actually get any combination of 4 spikes using 4 circles. In fact, we can have as many spikes as we want. In general, we can get any combination of n spikes using n circles. All we have to do is figure out how to get each individual spike, and then scale them and add them up to produce the final answer. Now the point of the Fourier series starts to emerge: maybe with enough circles, we can approximate any arbitary function.

Before we lock the final pieces into place, we need to formalize one more thing. Up until now, we've been working exclusively with sine waves as representations of travelling around a "circle". Mathematicians usually like to represent this circle as a complex exponential. Complex just means the number is a mixture of real and imaginary parts, and exponential means that it involves e raised to a power. There's a truly amazing formula which says that $e^{ix} = \cos{(x)} + i\sin{(x)}$ . We can use this to represent any rotation around our circle as a complex exponential. The picture below is a visual representation of the fact that $e^{(i}$ ^{• 0}

% of

$2 \pi$ ) =

$\cos$ ( 0% of 2

$\pi$ ) +

$i \sin($ 0% of 2

$\pi$ ), where the red line represents the cosine part and the blue line represents the sine part.

For those of you who feel that this explanation has not been nearly mathematical enough, I present the following formula (taken from an excellent blog post by Stuart Riffle). It is exactly the application of the ideas which have been explained to this point, in more formal syntax.

Below is an application of this general formula to a plot with 16 discrete points. Click and drag your mouse anywhere in the rectangle to "draw" the location of these points. Notice how the function always goes exactly through every one of the points, although it may look somewhat strange in between.

A Practical Application

frequency = 434.78 Hz

Q = 5.57 dB

We end our discussion of the Fourier transform with a practical application. How can any of this be used in real life? Click the play button to hear a piece of the solo from "Stairway to Heaven", and slide the knobs to control the parameters of what is known as a band-pass filter. The graphical illustration is a visualization of what the band-pass filter does. The x-axis represents frequency and the y-axis represents how loud that frequency comes through. The job of the band-pass filter is to let some frequencies through, and tell the other ones to quiet down. It's the way that a car stereo knows how boost the bass, for example.

Try setting the Q factor to around 7 or 8 and sliding the frequency knob from low to high to get a sense of what is happening. Another thing to try is to set the frequency to about 80 or 90 Hz and slide the Q knob quickly from 0 to about 7 or 8. It kind of sounds like someone has just shut a door. This is because doors and windows are known to be good at letting low frequencies through while shutting out high frequencies. You can also set the frequency at about 1800-2000 and the Q knob at around 15, and it sounds like someone is playing the song to you through an old telephone. This is because telephones used to use this trick of discarding high and low frequencies in order to save on the amount of information they had to transmit, when the data bandwidth of telephone lines was not as good as it is today.

Afterward and Credits

This was a very quick introduction to learning about Fourier series. Precedence was given to intuition and visualization over mathematical rigor, so this guide is not nearly complete. There are many more practical applications to consider, and many proofs that got swept under the rug. The fourier series we considered was for the discrete case, although there is also the Fourier transform which is the continuous analog. For a more formal study in this subject, I highly recommend Brad Osgood's Stanford class which is available as a lecture series on YouTube or as lecture notes in PDF form.

A huge thank you to Bret Victor, who wrote the Tangle javascript library that is used to make the draggable numbers on this page, and who also influenced my ideas on how to effectively use the computer as a new medium. Also a big thanks to fft.js, Raphael.js, and mathjax.js