You are here

Fourier Series Animator

By  Nick Kasprak  on June 02, 2012 11:45 PM

I've created a Javascript animation below that demonstrates the mathematical concept of a Fourier series - the idea that any periodic function can be represented as a sum of pure sinusoidal waves whose periods are integer multiples of the periodicity of the original. Currently, four examples are demonstrated - a square wave, a triangle wave, a rectified wave, and a sawtooth wave.

Fourier series come up all the time in physics, and they're fundamental to the physics of musical sound, so, unsurprisingly, I think they're pretty cool.

(Note: for now, this only works in Firefox, Chrome, Safari, and IE9+ - I'll try and port it to lower verions of IE later.)

Some more explanation is required to convey what is being shown here, so I'll begin with a simple question - "Why do different musical instruments sound different from each other?" The answer is surprisingly complicated. Obviously, if I go to a piano and play A440, it's going to sound different than if I pick up a French horn and play the same note. Similarly, if I sing that same pitch with an "ah" vowel sound, it'll be different than if I sing it with an "oh" sound. But in all of these cases, the same basic thing is happening - the sound source creates vibrations which cause sound waves to propagate through the air 440 times per second. The difference is actually in the shape of the wave itself, so the question can be restated as "How does the shape of a sound wave affect what I hear?"

The human ear can't directly perceive the shape of a sound wave, and understanding the process by which different shapes produce subjectively different auditory experiences requires some biology, math, physics, and music. The key sense organ inside the ear is the cochlea. It's a coiled up tube filled with fluid, and it's set up in such a way that different frequencies cause different parts of the fluid column to vibrate. The tube is lined with lots of tiny hairs which oscillate along with the vibration of the fluid. When you hear a sound at 440Hz, it causes the fluid inside a specific section of your cochlea to vibrate, which cause the hairs corresponding to 440Hz to oscillate back and forth, which sends a signal to your brain. From your brain's point of view, all it knows is that the hairs located at the 440Hz section of your cochlea are oscillating, and so you perceive a pitch at that frequency. So far, we still haven't answered the question of why different sounds are different - there's no specific "French horn" section of your cochlea that is separate from the "Piano" section.

The answer is that any sound wave, no matter how complicated its shape, is just a series of pure sine waves added together. And not just any sine waves - their frequencies have to be integer multiples of the fundamental tone. In other words, if I play A440 on a piano, I'm creating sound waves at various specific frequencies - the biggest component being at 440Hz (the "fundamental" tone) but also at 880Hz (440 times 2), 1320Hz (440 times 3), 1760Hz (440 times 4), and so on. These ratios also have musical significance - twice a frequency is exactly one octave above it, three times is an octave and a fifth, four times is two octaves, and five times is two octaves and a major third. (If you know anything about music theory you'll see that this makes a major chord.) You can even hear this on a piano if you listen closely, so next time you're at a piano, play a low note (where it's easier to hear the effect) and listen very carefully for the other tones - if you play a low "C," for example, you should be able to hear the "G" an octave and a fifth above it. These extra tones are called "overtones," and the reason a piano sounds different from a horn is that the relative amplitudes of these overtones are different. You don't ordinarily perceive the overtones because your brain is constantly analyzing the frequencies it's hearing and grouping multiples together.

The animation above is a visual demonstration of this idea using four relatively simple waveforms. On a synthesizer, a square wave, a sawtooth wave, a triangle wave, and a half-rectified wave all sound different. The animation above shows why - they can all be broken down into a series of simple sine waves, but the relative amplitudes of these waves are different. Notice that the amplitudes of the triangle wave drop off very quickly - by the 10th overtone the wave amplitude is insignificant. The square wave is different - 10 waves are barely enough to show the phenomenon, and it would take many more additional waves before the shape converges to something resembling a true square wave.