Baroque.me [Javascript, Sound]

Baroque.me by Alexander Chen visualizes the first Prelude from Bach’s Cello Suites by drawing notes as strings. Instead of a stream of classical notation on a page, this interactive project highlights the music’s underlying structure and subtle shifts.

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. The user 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.

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.

Baroque.me | blog.chenalexander.com