The Man in Blue

• New website! New RSS!
• Deep + Vocal + Bliss DJ Mix
• Visualising
• Perfect Summer DJ Mix
• Opening Titles for Web Directions South 2011
• SlashGlobe: A 3D CSS experiment
• Desktop Wallpaper: Space Frames
• Visualising drawings in 3D with DrawPad
• Anatomy of a Mashup: Definitive Daft Punk visualised
• Source Code: Not a movie about programming
• Realtime visualisation of @replies

Anatomy of a Mashup: Definitive Daft Punk visualised

See "Definitive Daft Punk" visualised in realtime »

I've always believed in the strong connection between sound and vision. Music videos are like little slices of synchronous art, designed to please all of your senses. (Go ahead, lick your TV next time "Poker Face" comes on!)

Every so often I delve into music making, but aside from the cover art for those releases my music has remained very separate from my visual design work. Now and into the future I plan to rectify this, and first cab off the ranks is a data visualisation I've had in my head for a while.

The art of the mashup has come to the fore in pop culture of recent years, but beyond Biggie Smalls crooning over Elton's keys I feel that the general public understands little of the nuance that goes into constructing a complex mashup from tiny pieces of songs.

In order to explain the layering and interplay that goes into something like a Girl Talk album or The 139 Mix Tape I decided to take my own mashup of Daft Punk's discography -- Definitive Daft Punk -- and reveal its entire structure: the cutting, layering, levels and equalisation of 23 different songs. By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you'll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.