Geeks Making Art: Math-Based Interactive Bach In Your Browser

Reading Time: 2 minutes

Screenshot of site in actionScreenshot of site in action

Screenshot of site in action.

I am fascinated by the geeky intersection and overlap in the worlds of art and technology. From the craftsmanship of Skylanders figures to the details of graphic novels, all the way to the gorgeous Mars-rover themed print I bought at World Maker Faire in New York or the detailed costumes seen at cons, many geeks are artisans too.

This time the convergence comes from Alexander Chen, a current resident at Eyebeam Art and Technology Center in New York and collaborator on the augmented reality project Google Glass. (Yes, the Geordi La Forge VISOR thing.) Chen developed, a website that visualizes the notes played in the first Prelude from Bach’s Cello Suites using a series of lines and rotating spheres. Sounds bland until you understand how it works. Chen described his work in a blog post:

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.

His work uses HTML5 and JavaScript to quickly render the instrumental lines on screen and begin playing. The interactive part comes when you start clicking and dragging the dots to change the melody. (Warning: strangely addictive.)

First, head over to to play with the sound and watch the strings. Then read up on Chen’s thoughts behind the music on Chen’s blog.

Get the Official GeekDad Books!