This post presents three simple math/art visualizations having to do with music and sound. All three were made for Bob Bosch’s Math Art class at Oberlin College in Spring 2022, and inspired by material covered in Chris Marx’s Spring 2022 Harmonic Analysis class.

These three visualizations are meant to be fascinating even if you do not understand the underlying math and music. But I will explain the concepts behind each of them and justify why I think they are interesting.

Scale Generation as Irrational Rotation

Inspired by a visualization produced by Chris Marx, this interactive demonstration illustrates the impossibility of creating a perfect musical scale.

We’d like to generate musical scales by starting on some note, then going up by a fifth (which corresponds to multiplying the frequency by 3/2), and continuing up by fifths until we reach another octave of the note we started with.

(An octave is the interval between a pitch and the pitch with double the first pitch’s frequency.)

We don’t actually care about what particular octave we’re in, because a note in one octave sounds more or less “the same” as the same note in a different octave, so we can think of the octave as a circle, where the distance counterclockwise around the circle corresponds to pitch1. Going up by a fifth corresponds to rotating a point by a specific amount around the circle, where the arc length of the rotation happens to be irrational. We would like to start at our starting point and rotate some number of times until we arrive back where we started.

To use the demo, just click. Each click will add a new point on the circle that is a fifth up from the previous point. The newest point added is in red, and the older points (aside from the starting point) are in blue. Try to find a number of rotations that lets the newest point return to the start. If you need to start over, just click “Reload.”

Click to rotate by a fifth! ()

No matter how many irrational rotations we perform, we never arrive back at the starting point (shown in the same color as the circle). However, the numbers 12 (corresponding to the typical 12-tone scale), 41, and 53 provide particularly close approximations.

There will unfortunately always be some error2, and so any scale we use must deal with this error somehow.

Fourier Series of Basic Periodic Functions

Sufficiently well-behaved periodic functions can be approximated by an infinite series of sine waves, called a Fourier Series. One such function that we might want to approximate is the square wave, which is characterized by taking the value 1 for some amount of time, and then taking the value -1 for the same length of the time, and continuing the pattern. It has an interesting harsh sound when played audibly.

We can approximate it with a series of sine waves. Each additional sine wave we add will increase the accuracy of the approximation.

The visualization shows what the wave looks like (with recent previous versions shown faded in the background). If you have sound on, you can also hear what the wave sounds like when played at a frequency of about 440 Hz.

Click to add an additional harmonic, which will increase the quality of the approximation of the square wave. ()

As more and more sine waves (or harmonics) are added, you should notice that the wave gets visually sharper, and starts to fit the shape of the true square wave more and more accurately. And the sound of the wave also gets harsher as more harmonics are added.

We can do a similar process with the triangle wave, which (as its name suggests) looks like a series of repeating triangles. Like the square wave, it has a distinctive sound and is often used in music synthesis applications.

By adding additional sine waves, the shape of our approximation approaches the shape of the true triangle wave. And the audio approaches the sound of the true triangle wave as well.

Note that I chose the frequencies of the audio components of these demos so that the square and triangle waves would sound nice together. The pitch is arbitrary. What matters is the timbre, or texture, of the sound.

Click to add an additional harmonic and better approximate the triangle wave. ()

This one seems to approach the true triangle wave a lot faster than the square wave. This is because the triangle wave is continuous, which makes it easier to approximate with a series of sine waves.

It’s a pretty remarkable fact that sufficiently well-behaved periodic functions can be approximated just by a sum of sine waves. This is used in music synthesis, editing, and file compression, among other applications.

I hope you got something out of these visualizations!


  1. where perceived pitch is logarithmic relative to frequency ↩︎

  2. which we call a “comma” ↩︎