Musical Notes and the Hilbert Curve

3blue1brown logo
seriously go watch the videos

Grant Sanderson makes a great series of YouTube videos, called 3blue1brown, that explore math concepts with animations.  This video talks about Hilbert curves, which are continuous fractal curves that completely fill a two-dimensional area.  The video uses them for a hypothetical system of encoding a two-dimensional image (as a grid of pixels) into a one-dimensional sound (as a range of frequencies).  I'm not sure such a system would work very well as described (to me, this system called "vOICe" seems a bit more practical) but that's not really the point of the video.  It's just a setting for talking about the curves, and how a concept like "approaching infinity" can have practical applications.

Fourth order Hilbert curve
would not make a good maze

Here, the Hilbert curve is used as a mapping from a 1D space into a 2D space.  A useful property of these curves is that when you increase the resolution (or the number of iterations) the mapped 2D location of a given 1D value is not drastically changed.  So someone can get used to 0.083 being at the top-center of the image, and it doesn't much matter what resolution is chosen for the curve - it's still basically at the top-center.

After watching the video, I wondered about the reverse procedure.  That is, what kind of images would it take to produce a given sound.  In particular, where would the standard musical pitches lie on the curve, and what would chords look like?


So I made a little web experiment to find out.  I call it Hilbert Chords.  Here's how it works:  I mapped the 1D space onto a single octave, the range of frequencies between middle-C and high-C.  It's a logarithmic scale, so the 12 pitches in the chromatic scale (plus one for the repeated C) are spaced evenly apart.  You can move your mouse over either the 2D or 1D regions to hear the corresponding pitch and also see where each point maps to in the other space.  Also you can click a handful of buttons that play preselected chords and see what the chord would look like.

locations of pitches on the chromatic scale
in color.. because, you know..

I was surprised, at first, to see that the notes all lie on corners of the four quadrants.  After thinking about it a bit, it makes sense.  Each quadrant connects to the next one at one of its corners.  The pair of corners connecting two quadrants are basically the same pitch.  So that leaves three distinctly-pitched corners per quadrant, for a total of twelve (and again there's the final corner for the repeated C).

When we increase the number of iterations, the curve gets denser, but the points representing the pitches move less and less.  As the number of iterations approach infinity, the pitch-points approach specific points on the square.  I don't have a complete understanding of the math, but it seems to me that four of them (E, G#, and the two Cs) approach the corners, six of them (C#, F, G, A, and B) approach the centers of the sides, and three of them (D, F#, and A#) approach the center.  At sufficiently high resolution, you wouldn't be able to see the difference between some very different chords, and the D augmented chord would look like a single point in the middle.

Ok, not a good visualization of the chromatic scale.  A plain circle is much better.  Or even just a keyboard.

Hilbert Chords