Bach, Art of Fugue (animated graphical scores)

... highlighted falling chromatic motion with white-outlined rhombi

... used connecting lines to highlight some points of imitation.

Contrapunctus 4

Here, the non-subject material is almost completely composed of a four-note group (in circles) and a 2-note group (in squares).

Contrapunctus 5

In the previous fugue, the subject was inverted throughout (did you notice?), and I didn't do anything to highlight that. In this fugue, the subject is sometimes inverted and sometimes not, and I distinguish these by showing only the upper-left or lower-left edges of the frame.

About halfway through the piece (just past 2:00), something unusual happens: there's a fast (double-speed) stretto (overlap) of the beginning of the subject, first inverted, then non-inverted. To make its timing relationship to the normal speed of the subject more obvious, I make the notes the same width, and move them twice as fast.

Contrapunctus 6

This uses the inverted frame and variable speed techniques from Contrapunctus 5, and the dramatic stretching of the dotted notes from Contrapunctus 2.

Contrapunctus 7

This uses the same visual conventions as Contrapunctus 6.
In the second version, I tried a more filled-in look for the background (I don't think this works very well).

Contrapunctus 8

This fugue has three subjects, each of which is depicted with its own renderer. Also, when the non-subject passages use melodic motion that's similar to one of the subjects, I use that subject's renderer. Because it's sometimes hard to keep track of the three subjects, in the second version of the animation, I tried something different: in the upper half the display, all the notes are shown with the same shape, and in the lower half, the subject-related notes (and no other notes) are shown with their individual shapes.

Contrapunctus 9

Here, Bach increases the contrast between the main subject (from the first fugue) and the second subject (a running passage that begins with a dramatic leap): the first subject is so slow compared to the second that the piece starts feeling like a chorale prelude, with the main subject being off in its own world. To depict this, I put the main subject in the background, moving very slowly (using the Voronoi renderer). In the second version of the animation, I made the first subject a little more ominous-looking by making the background gray and surrounding the notes of the first subject with pure black.

Contrapunctus 10

Here, my focus was on articulation and phrasing. The opening subject begins with a very striking figure that begins on an off-beat and contrasts a single detached note with a pair of connected notes; it does this twice. I've highlighted those six notes of the subject, and for those notes, the rest of the theme, and all the non-subject material in the rest of the piece, I've used connecting lines to show phrasing and articulation. In doing this, I've transcribed an aspect of how I hear this piece: every time one of those lines starts, I notice it, and my attention is constantly bouncing around among the voices.

Contrapunctus 11

This one uses the visualization techniques of Contrapunctus 10, but with more combinations of renderers (one for each of the three subjects, one for chromatic motion, and one for everything else).

Contrapunctus 12 / Contrapunctus 13

For the two invertible fugues, I show the piece in the upper part of the display in the orientation that's being played and in the lower part in the mirrored form, so that you can look at the upside-down version and try to imagine it while you're hearing the right-side-up version.

Canons

Compositionally, canons are very different from the fugues, because the notes (at least, the notes that constitute the "canonic part" of canon) must conform rigidly to a rule. In these animated graphical scores, I've tried to make this rigid structure obvious.

Canon 1

The first canon is per augmentationem in motu contrario, meaning that the notes of the canon are played at two speeds, one normal and one stretched out, and with the melody moving in opposite directions. This is a lot to keep track of, so I've put the notes of the canon along a single line so that you can follow the two voices in their varied paths through it. The complete set of notes of the canon go along with the the inverted version of the first half of the notes being played half as fast. This leaves the second half of the inverted/slow notes without an accompaniment, so Bach composes some extra material for that; I've shown this extra material as "free"—not participating rigidly in the canon. The colors seemed a bit garish, and I tried a different palette in the second version.

Because I leave all the notes visible, when the piece is complete, you see the complete score, with every note of the canon being shown four times (and the free material shown twice):

Canon 2

The second canon is much simpler, both conceptually and perceptually: there's no augmentation or diminution, no inversion, and the second voice (comes) follows soon enough after the first (dux) that it was possible to see them both close up, two sprites dashing through the same notes.

The start of the canon is based on the notes of the main Art of Fugue subject, but it's very highly ornamented; I've put the original form in the background so that you can see how the two relate:

Canon 3 / Canon 4

The third and fourth canons are "two-way" canons—that is, there's more than one way the notes of the comes can fit with the notes of the dux. The way these pieces are built is unusual enough that I made several attempts and was still not sure I'd made it clear.

In these animations, almost all the material is played many times, and I've arranged the notes in layers around a circle (or ellipse) so that any time a particular pattern is being played, it happens at the same place around the circle.

In Canon 3, much of the melodic material (main Art of Fugue [S]ubject and passages A/B/C)) is used at two or three pitch levels (unison, major third, perfect fifth):

Passages D/E/F appear at only one level.

The first version of Canon 3 was done with very plain circles of two colors (one for each voice), and the second version is substantially the same:

The spiral in the center is the "progress bar/compass" for the piece; it shows where in the piece each voice is playing (and, by the bars getting wider, shows what's been played in the past).

Those versions seemed very confusing to me, so I tried a completely different approach in the third version—I arranged the notes linearly, and showed them in at the proper pitch level:

Not as pretty, but clearer (n.b., in this diagram, the unison level is green, major third is brown, and perfect fifth is blue).

A friend from school suggested it might work to show the pitch levels with 3D, and in the fourth version I tried that (using the Chromadepth 3D system):

Indicating the pitch level with color and 3D position, might have made it a bit clearer than the first version, but what struck me was that it looked cooler, and in the next few versions (5, 6, 7, 8, 9, 10) I played around with ways of making the "mandala" more dramatic (in some, I clearly went overboard):

Canon 4 is built in sections, and each sections begins with a flashy rising triplet figure. I decided that these figures stood out enough from the rest of the canon that they should be depicted differently. Because they functioned sort of like "joints" or "glue" between the sections, I decided to have them rise away from the center at the points of division (and I delineated the sections by shading the background):

A friend said that the rotation of the mandala made him dizzy (and made it hard to remember which section was which), so in the second version I tried making the notes stationary. Better? I can't tell; maybe it's just a matter of individual preference.

In the third version of Canon 4, I added some black holes in the background so indicate the relationsh between the main Art of Fugue subject and the first section of the canon (seen between 12 o'clock and 2:30 here):

[A few days after making this elliptical version, while watching it in a daydreamy reverie, I found the animation suggesting a fanciful narrative: the five (or six, if you count the little sliver) gray panels were the earth's tectonic plates, and the black circles were a constellation in the sky. In the beginning, nobody knew what the constellation meant, but then one day there was an earthquake, and after the initial triplet tremors at the fault line, what emerged matched the pattern of the constellation—it wasn't just a bunch of stars—it was a prophecy! After that day, there was seismic activity at regular intervals, and each time, the message of the prophecy was reinforced and elaborated at sites of seismic activity around the world.]

---

Fuga a tre soggetti (with completion by Kimiko Ishizaka)

For this fugue, I added some things to highlight the fact that Bach's unfinished fugue was being completed. As we approach the place in the piece where Bach's manuscript ends, the animated score shows nothing in the future—just the void:

But, when the playing arrives at the edge of the abyss, the future begins writing itself, first note by note, and then bringing in bigger chunks (the subjects that Bach had already composed).

Statements of the subject (composed by Bach) are given their colors throughout, but the newly-composed material is shown in gray until it is played.

In this fugue, each subject appears in both its normal orientation and inverted, and for each, the normal and inverted statements are distinguished in a different way: