iA


Baroque.me: Bach Cello Suites No. 1, Prelude

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

The first page from the manuscript by Anna Magdalena Bach of Suite No. 1 in G major, BWV 1007

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.

Further Reading

Here is a video of Pablo Casals performing the piece in 1954. This book by Eric Siblin tells the story of how Casals discovered the obscure Cello Suites in a thrift store in the early 1900′s. The complete manuscript (by Bach’s wife Anna Magdalena) is available free for download here.

52 comments on ‘Baroque.me: Bach Cello Suites No. 1, Prelude’

  1. I quite like the interactive version better, since it skims/skips across baroque syntactics in interesting / explorative ways. Harps of course do work with changing string length, but only up to a whole note or so. The computer automation doesn’t seem to recreate the dyanmics of the piece; it’s amazing that the ear tends to fill these in.
    Thanks! – Alan

  2. [...] which changes the music as they try to right themselves. There’s a fuller explanation here on Alexander Chen’s blog – it’s gone a little over my head to be honest but I think even just on a visual level [...]

  3. Mark Nichols says:

    Absolutely beautiful. As a beginning cellist who looks forward to playing the Bach Suites, this was fascinating to watch. It presents the piece in an entirely new way that even after one viewing improved my understand of the underlying structure.

    As a computer nerd I love the visualization you’ve created, its simplicity and grace.

    I am looking forward to more baroque.me style visualizations. Excellent work!

  4. I found this Bach through Mark Nichols’ blog. A great concept that immediately suggests similar ones for rhythmically regular pieces! There could be ellipses, other trajectories defined by suitable constraints, etc. I’m excited by the possibilities of visualizing music in a way other than the linear stream we have to mentally parse, and hope to see more examples.

  5. [...] Mais informações sobre o projeto. Share this:TwitterFacebookEmailLike this:LikeBe the first to like this post. [...]

  6. [...] Alexander Chen – Baroque.me: Bach Cello Suites No. 1, Prelude. Tweet Share this:FacebookPrintEmail [...]

  7. [...] out Alexander Chen’s baroque.me project; using video (and a whole lot of maths and musicology) he’s designed a piece of software [...]

  8. pierre says:

    (conventional but sincere thank you for your amazing work) + song request : Stefano Landi – “La Passacaglia della Vita” http://www.youtube.com/watch?v=YjzAi9f9PM0

    please : )

  9. [...] Baroque.me | blog.chenalexander.com 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. Add your comment 0 Responses to this post Add your comment (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); [...]

  10. This is wonderful! I have been doing visualizations on this piece and documenting my work online at the page http://www.musanim.com/bwv1007m1/ … I will add a link to this there. Have you considered adding the final B to the animation? The ending seems a little empty without it.

  11. [...] more detail on the project has been posted on Alexander’s blog. (via @hakimel) This entry was posted in Audio, Canvas (2D) by Val Head on Posted on October 28, [...]

  12. [...] Experimento: Suite para violoncello No.1, de Bach   blog.chenalexander.com/2011/baroque-bach-cello/  por mezvan hace nada [...]

  13. [...] Zie ook het volledige verhaal van Chan over zijn geweldige muzikale toepassing op zijn eigen blog → [...]

  14. [...] te vinden, met hier het denken van de maker er [...]

  15. Brian Smith says:

    Your use of the Pythagorean tuning gives this piece a deep harmonic suavity that I doubt would come through using the equal-temperment that most keyboard instruments use today. Fortunately, Bach, as a Baroque composer, tended to avoid the “wolf tone” in his music. Have you ever tried Bradley Lehman’s Bach/Lehman tuning? This tuning was deduced from what was an apparent doodle at the top of the first page of the Well-Tempered Clavier, Book 1. I am convinced that this was the Bach family’s preferred tuning for keyboard instruments. Actually, I always thought that this could only sound really great on a cello, but you have proved me wrong. Both your graphics and music give one a feeling of transcendent bliss.

  16. Weiss says:

    Great, you reinvented tablatures.

  17. [...] the artist: A harp is built around string length, with strings shortening as they ascend in pitch. This piece [...]

  18. Dean says:

    Thanks! Also, the first prelude from the Well-Tempered Clavier would probably also work quite well.

  19. Sam says:

    Oh, my. I just want to say that this makes the music nerd in me so very happy!

  20. [...] Bach – Suita pentru violoncel nr.1 Detalii pe blog.chenalexander.com. Like this:LikeBe the first to like this [...]

  21. [...] Ecco un video che negli ultimi giorni sta prendendo piede su internet. Si tratta di una provocazione grafica realizzata da Alexander Chen, che utilizza il preludio dalla suite in sol maggiore per cello solo di Bach. Questa la domanda del creativo del Google Creative Lab: e se le note fossero disegnate come linee? Domanda retorica ovviamente, caro Chen. Però il video mette in rilievo gli aspetti più matematici della musica di Bach, ed è di sicuro impatto e realizzato scientificamente. [...]

  22. [...] wieder ein neues Planking – Tebowing LINK ::: Baroque.me: Bach Cello Suites No. 1, Prelude (Info) LINK ::: Wo Tiere nicht [...]

  23. [...] to the principles of Pythagorean tuning. “It’s math based on the fraction 2/3,” writes Chen on his blog. “I started with the longest string, setting it to a symbolic length of pixels. [...]

  24. [...] according to the principles of Pythagorean tuning. “It’s math based on the fraction 2/3,” writes Chen on his blog. “I started with the longest string, setting it to a symbolic length of pixels. When [...]

  25. Really beautiful, I enjoyed watching as it “learned” how to play this piece properly.

  26. [...] further in that it creates the music. It’s like he’s created his own digital instrument.Alexander Chen – Baroque.me: Bach Cello Suites No. 1, Prelude – http://blog.chenalexander.co… by Alexander Chan. This entry was posted in blog. Bookmark the permalink. Post a comment or leave [...]

  27. [...] siembre podéis acceder a baroque.me, otro proyecto publicado en Google Sandbox creado por Alexander Chen y usando html5 para tocar una obra de [...]

  28. [...] aquí. Like this:LikeBe the first to like this [...]

  29. Chris says:

    Absolutely brilliant.

  30. [...] Sebastian Bach’s Cello Suite No. 1. See and listen to the full piece at Baroque.me, and visit Chen’s blog for a more in-depth explanation of the musical and mathematical principles that informed the [...]

  31. Brandify says:

    This is a wonderful digital soundtoy. Watching/listening to it took me me back down memory lane to some of the soundtoy experiments I did at university. Have you ever seen a digital interactive soundtoy called Smallfish? It’s quite old now but it really reminded me of it, in a good way too. Nice work!

  32. Clif says:

    “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.”

    The Latin alphabet is, in like manner, completely disconnected from any actual physical characteristics of what it represents. But on the other hand I’m not sure how one benefits from using Egyptian hieroglyphs or Chinese pictograms in place of the alphabet. It would be interesting to see, e.g., an Indian raga visualized in this manner rather than a repetition of the Baroque paradigm.

  33. [...] a sheet of notes. In this piece, the structure of the sound is elegantly made visual. Read Chen’s explanation of his process and check out the rest of his remarkable work. VN:F [1.9.11_1134]please [...]

  34. [...] a resident at Eyebeam, Alexandar Chen 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 [...]

  35. Wow. Not only is the visualization beautiful. It also explains the music. Thanks.

  36. [...] Alexander Chen writes, “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.” Chen has produced a visualization of the prelude from the Suite in G Major (BWV 1007) using techniques described here. [...]

  37. [...] a visualisation of Bach Cello Suites No. 1, Prelude. You can see it at Baroque.me (and he’s got a blog post explaining how he went about it [...]

  38. Ania says:

    You’ve done a really cool thing! Maths and music, that’s a great connection. Have you done or seen any other projects like this?

  39. [...] of the image.  I could watch this all day.  There’s more about how he made it here. This entry was posted in Uncategorized and tagged bach, visualisation. Bookmark the [...]

  40. [...] the baroque.me website for an interactive version or click here to find out more from Alexander Chen on how the project was [...]

  41. Weezic says:

    a new original way to visualize and play with music, this is great!

  42. [...] and interact: baroque.me More details at: blog.chenalexander.com/2011/baroque-bach-cello/ Built in: HTML5 Canvas, Javascript, SoundManager Share this:FacebookEmail Filed under: [...]

  43. [...] math based on the fraction 2/3,” Chen writes on his blog. “I started with the longest string, setting it to a symbolic length of pixels. [...]

  44. [...] Maggiori informazioni sulla produzione del video si trovano sul sito di Alexander Chen. [...]

  45. [...] shifts.” Chen reveals in-depth notes on string length, Pythagorean tuning and 8-tone patterns here – It’s worth a [...]

  46. Molly says:

    Beautiful and mesmerizing. Could you please do some more?

  47. [...] plus sur la conception originale de l’outil et sa transcription depuis la partition : [ http://blog.chenalexander.com/2011/baroque-bach-cello/ [...]

  48. [...] math based on the fraction 2/3,” Chen writes on his blog. “I started with the longest string, setting it to a symbolic length of pixels. [...]

Leave a Reply