Project summary

Baroque.me visualizes the first Prelude from Bach’s Cello Suites. Using the mathematics behind string length and pitch, it came from a simple idea: what if all the notes were drawn as strings? Instead of a stream of classical notation on a page, this interactive project highlights the music’s underlying structure and subtle shifts.

Details

I created eight strings, as the Prelude’s natural phrasing is in groups of eight notes. The orbiting nodes pluck the strings, like a rotating music box. You can also grab and throw the nodes off track, and watch the system slowly regain its rhythm.

A harp is built around string length, with strings shortening as they ascend in pitch. This piece behaves like an impossible harp, as strings morph to the needed lengths.

The looping, eight-note pattern is something we see all the time in grid-based drum sequencers. Bach’s Prelude is actually very grid-like as well. At every moment, the piece shows a visual snapshot of an arpeggio. It shows which notes change from bar to bar, and which stay the same.

Classical notation is convenient and concise code. But visually, it’s completely disconnected from any actual physical characteristics of sound. String lengths, on the other hand, are visual representations of the frequencies they produce.

I calculated lengths of strings using Pythagorean tuning. It’s math based on the fraction 2/3. I started with the longest string, setting it to a symbolic length in pixels. When cut to 2/3 length, it goes up a fifth. Cut its length by 1/2, and it goes up an octave. 3/4 length, one fourth. From these simple numbers, I calculated the relative string lengths for all the notes in the piece.

Performers of the Prelude all bring their own interpretation in tempo, timing, and expressiveness. My goal was to try to let the computer perform the data in its most neutral way. A pleasant surprise was how subtle shifts in timing naturally emerged due to the circular layout (and occasional performance hiccups). The machine becomes awkwardly expressive.

Like MTA.ME and the Les Paul Doodle, the visuals are coded in Javascript and HTML5 Canvas, triggering Flash audio in the background with the SoundManager library. (Thanks to Scott Schiller for the help.)

I’m launching baroque.me during this first month as a resident at Eyebeam. I hope it evolves into a series, exploring different pieces of Baroque music. Song requests are welcome.