Seeing the music

- an animated visualisation

I've always made drawings of the music when teaching classical piano and in tango musicality classes. Making the music visible helps me hear it more clearly. My only regret has always been that I couldn't animate the drawings, because this makes it a lot easier to connect the symbols to the musical elements. With code, I now can do that. I'm so excited to present my first animated music visualisation!

(if you'd like to buy the visualisation as a print, see bottom of article)

For more background, I also wrote a separate article where I explore the general music concepts in more detail. You can read it here.

What the symbols mean

There are many layers of detail to explore in tango music, but I focus on the elements that I believe to be the most relevant to us as dancers:

Here's a list of the symbols used in the visualisation. Some of them will make more sense when seen with the music. There's also a breakdown below the video!

Music info

This is a tango vals, but except for the vals counting, the musical concepts apply to tango (and milonga) as well.

NB! It's possible that some wireless headphones and speakers could cause a bit of delay in the music. If the video appears out of sync, try speakers / headphones with a cable.

Breaking it down

So what is going on in this piece? Here's a breakdown, line by line!

Line 1) A-section melody is introduced. Some of the phrases are played staccato, some legato. The vals style accompaniment marks the beat and tells us that this is a vals. There are piano embellishments between the melody phrases.

Line 2) B-section melody is introduced. The playing style changes between staccato and legato. The vals style accompaniment marks the beat, but is removed a couple places! There are piano embellishments between the melody phrases. We also hear a variation played by the solo violin - a trademark of D'Arienzo's orchestra.

Line 3) A-section melody returns. The melody and accompaniment from line 1 are repeated but not very prominent, because the piano and then the solo violin play an improvisation-style variation on the melody. Notice that this time, the melody is played staccato throughout so it gets more of a percussion character, whereas the violin is in charge of the legato.

Line 4) B-section melody returns. The singer is singing the melody theme. If we listen closely, we can hear that the melody theme, accompaniment, and piano embellishments are played like in the first B-section on line 2.

Line 5) A-section melody returns, camouflaged as a bandoneón variation! The variation is loosely built around the original melody tones from the A-section. It sounds a bit like an improvisation, but it's very well planned and rehearsed!

What I did not draw

I didn't animate the symbols in real time, because I think it's more useful to both see the whole piece and the "now" moment in relation to this.

The graph doesn't show everything - it would be too detailed to be practical for us regular social dancers! But we can still listen for more details. Here are some more aspects that I did not draw:

- The specific instrumentation: which instruments are playing at any given time.

- Pauses in the accompaniment: there are some full stops in the accompaniment on lines 2 and 4 plus between each A- and B-section, but I chose to let the beat lines also represent the general counting / beat grid in the song.

- Exact number of notes: the dots that represent the staccato phrases and bandoneón variation are symbolic - they do not represent rhythm patterns or exact number of notes.

- Pitch: vertical placement of symbols in the drawing doesn't represent higher / lower tones in the music.

- Dynamics (changes in playing volume).

- Long phrases: For dancing, it's most common to define a phrase as 8 walking beats, but in this vals and many other cases, the feeling is that each 8-beat phrase is cut in two. Exception: the last A-section (bandoneón variation).

- Notation nitpicking: I drew the line change inside bars (measures): 1st beat on one line, 2nd and 3rd beat on next line. It's not done this way in musical notation, but I think this is the best way for this visualisation because the phrases at the beginning of each section start with an upbeat (not on the first beat of a bar).

Making the visualisation

I built the visualisation (and this page) with code. Most of the symbols are still drawn by hand in Affinity Designer, then converted into SVG code. I used D3.js + music information I had written in a CSV. Getting the animation timing right was done with a ridiculous amount of manual tweaking of the CSS keyframes.

D'Arienzo on this website:

Note to DJs: Many of the tango transfers on Spotify, iTunes, and YouTube probably have wrong speed and pitch. This means that the music can sound wrong. Caring about this is especially important if you DJ!

Buy a print!

If you love Cabeza de novia and like my visualisation of it, why not hang it on your wall? I now offer prints. More information on the Shop page!