Anatomy of a Mashup: Definitive Daft Punk visualised

12 May 2011

206 comments

A Blue Perspective: 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.

Categories

, , , , ,

Comments

  1. 1/206

    Steve L commented on 12 May 2011 @ 09:26

    A feast for the eyes AND ears!

    I just licked my monitor.

  2. 2/206

    curdaneta commented on 12 May 2011 @ 09:47

    An awesome piece of code!
    The visuals are just amazing

  3. 3/206

    Andrew Green commented on 12 May 2011 @ 11:49

    You the BOSS, Cam.

  4. 4/206

    Lachlan Hardy commented on 12 May 2011 @ 12:53

    Cam, this is utter gold.

    How'd you build the audio data files? (tell me even you aren't obsessive enough to do it by hand!)

  5. 5/206

    The Man in Blue commented on 12 May 2011 @ 12:58

    Haha, no I'm not about to write 4MB of JSON by hand.

    I rendered out each layer of the mashup into a separate MP3 then ran each file through a Flash app I created which spits out JSON data on the MP3's audio spectrum.

    It's all timecoded so I can link it up when the audio is playing in the browser.

  6. 6/206

    Michael Koukoullis commented on 12 May 2011 @ 13:14

    Mind = Blown

  7. 7/206

    Martin Stannard commented on 12 May 2011 @ 13:26

    Cam, that's very cool!! Kudos!

  8. 8/206

    Damien Quintal commented on 12 May 2011 @ 13:30

    OMGWTFBBQ!!!
    That was bloody awesome!

  9. 9/206

    Dave B commented on 12 May 2011 @ 13:35

    That is incredible, so impressed.

  10. 10/206

    Lachlan Hardy commented on 12 May 2011 @ 14:06

    Awesome. So the only bit you had to do manually was configure where each layer starts?

  11. 11/206

    Anthony commented on 12 May 2011 @ 14:11

    This just blew my mind!

  12. 12/206

    The Man in Blue commented on 12 May 2011 @ 14:38

    @Lach Yeah, each JSON file had a lot of empty data (because each part only plays for a small fraction of the entire song) So I sliced that out manually. Mainly just to get filesize/download down.

  13. 13/206

    Dan commented on 12 May 2011 @ 15:35

    Pure awesomeness on so many levels.

  14. 14/206

    Cam Pegg commented on 12 May 2011 @ 15:38

    So. Freakin'. Rad.

  15. 15/206

    Aron Rotteveel commented on 12 May 2011 @ 17:58

    Awesome stuff, every time I think you reached the limit you prove me wrong :D

  16. 16/206

    David Grant commented on 12 May 2011 @ 22:20

    Very impressive. Well done!

  17. 17/206

    ericdot commented on 12 May 2011 @ 22:56

    Cam - Awesome as usual.
    It has been asked many times, but is there anything you can't do?

  18. 18/206

    Jason Morehead commented on 13 May 2011 @ 01:43

    Are you sure HTML5/CSS3 was used for this, and not some dark, mystical arts? Because I'm not convinced.

  19. 19/206

    Kieran commented on 13 May 2011 @ 01:54

    Brilliant stuff, inspiring.

  20. 20/206

    Bikon commented on 13 May 2011 @ 02:35

    Not bad visualised.

  21. 21/206

    Clempiment commented on 13 May 2011 @ 04:21

    Great music and great visual, congratulations ! :)

  22. 22/206

    Ben commented on 13 May 2011 @ 06:20

    That's awesome! Good job on the javascript/jquery code.

  23. 23/206

    Stephen Collins commented on 13 May 2011 @ 09:57

    This is why I don't call myself a web coder. I am simply incapable of such fabulous insanity.

  24. 24/206

    Alan Jones commented on 13 May 2011 @ 11:11

    Cameron, I'd be amazed with myself if I could compose the mashup, but you're across the music, the visual design and the coding. You're amazing to the power of three, man!

  25. 25/206

    Nick Sayer commented on 13 May 2011 @ 12:09

    yep. awesome.

  26. 26/206

    Andrew commented on 13 May 2011 @ 17:13

    Amazing. Thanks for sharing this multi-sensory treat.

    The only way to make this more awesome would be to integrate audio pattern recognition (Soundhound, Shazam, et al.) and have it pick out individual tracks out of existing mash-ups for visualization. I wonder if such acoustic fingerprinting techniques have been developed.

  27. 27/206

    The Man in Blue commented on 13 May 2011 @ 17:18

    @Andrew http://dubset.com/ claims to do some auto-recognition of tracks in DJ sets. Don't know how it would fare with multiple layering of tracks, though.

  28. 28/206

    ionut commented on 13 May 2011 @ 17:39

    Hey, nice work! what js lib did u use for visualizations?

  29. 29/206

    The Man in Blue commented on 13 May 2011 @ 17:44

    No real library was used, the animation is all custom.

    Tiny bit of jQuery used just for the DOM handling.

  30. 30/206

    Georg Portenkirchner commented on 13 May 2011 @ 19:05

    WOW! Brilliant, stunning and inspiring!

  31. 31/206

    miendo commented on 13 May 2011 @ 19:13

    This is simply awesome. You have amazing technical skills, both for music and coding.

  32. 32/206

    Castor commented on 13 May 2011 @ 19:18

    Just amazing guys, I love it!

  33. 33/206

    TehSeph commented on 13 May 2011 @ 20:54

    awesome stuff.....brilliant!

  34. 34/206

    Abul commented on 13 May 2011 @ 21:44

    Amazing stuff, talented chap!!

  35. 35/206

    Scott Coe AKA The Haunted Aquarium commented on 13 May 2011 @ 21:52

    Brilliant - loving this!
    I'm also somebody really interested in combining visuals and music. I'm both envious and inspired!

  36. 36/206

    Alex commented on 13 May 2011 @ 21:53

    The flash bit would explain why it didn't work on my iPad. ;)

    Awesome work mate, this is going into my inspiration folder for sure.

  37. 37/206

    DXPetti commented on 13 May 2011 @ 21:54

    Awesome mashup and the site was smooth as butter in IE9. Well done on both accounts ;)

  38. 38/206

    Rudie commented on 13 May 2011 @ 21:55

    wowwowwowwowwowwow that was awesome! I've never stared at my monitor for 6 minutes like that! Both the tech and the result, both audio and video are perfect!

    This is so going into my favourites! <strong>Awesome!!</strong>

  39. 39/206

    Jason commented on 13 May 2011 @ 21:58

    Fantastic mashup. Great mixing and presentation of Daft Punk's greatest music!

  40. 40/206

    Scott commented on 13 May 2011 @ 22:59

    Epic, well worth your time!

  41. 41/206

    Larry commented on 13 May 2011 @ 23:17

    A M A Z I N G feast for the ears and eyes. Never realized that this type of work could be done with html5/CSS3. Convinced me to start walking away from FLASH :)

    DaftPunk ROCKS!

  42. 42/206

    Thijs commented on 13 May 2011 @ 23:26

    Awesome! This is definitely the future of digital music revolution!

  43. 43/206

    Heather commented on 14 May 2011 @ 00:02

    Nice one. super piece of visualisation. simple yet effective.

  44. 44/206

    winner commented on 14 May 2011 @ 00:16

    Wow, very impressive, on all levels!

  45. 45/206

    gpa dude commented on 14 May 2011 @ 00:28

    Saw this on reddit! masterpiece!!

  46. 46/206

    nikdafunk commented on 14 May 2011 @ 00:55

    Genial!!
    F**king awesome. Congrats!

  47. 47/206

    Simon commented on 14 May 2011 @ 00:57

    Fantastic.... Send that to outer space and the aliens will come here wanting to party

  48. 48/206

    Chris Raymond commented on 14 May 2011 @ 01:25

    Wow. Just wow. Thank you for sharing this with the webs.

  49. 49/206

    GPBurdell commented on 14 May 2011 @ 01:31

    This is insanely good. Please make more.

  50. 50/206

    Jeremie commented on 14 May 2011 @ 01:42

    Man, you rock... it's an excellent work. Both visually and musically. And... technically as well.

    Congrats.

    Thanks !

  51. 51/206

    Aaron Russell commented on 14 May 2011 @ 02:06

    Simply, WOW!

    Would love to know move about how you created the data files?? - http://daftpunk.themaninblue.com/js/data_da_funk.js

  52. 52/206

    Ted Mielczarek commented on 14 May 2011 @ 02:14

    FYI, this ran perfectly in Firefox 4 for me on both Windows and OS X.

  53. 53/206

    Anna Campbell commented on 14 May 2011 @ 02:23

    This is amazing. I've just watched it three times in a row. Thank you for sharing it

  54. 54/206

    Mike B commented on 14 May 2011 @ 02:47

    Wow, awesomeness for HTML5! Amazing work!

  55. 55/206

    JPex commented on 14 May 2011 @ 03:13

    That's more like a mini-mix than what is generally called a mashup.

    I know there's not a set of rules about it; but I would suggest that the definition of a mashup uses contrasting elements from DIFFERENT sources to construct something new. Not just a dozen tracks by the same band medleyed together.

    Nice design though, and sounds good.

  56. 56/206

    Julie (The Mixdown) commented on 14 May 2011 @ 03:21

    This is awesome! You managed to combine 5 of my favorite things into one audio/visual mindbend! Mashups, Daft Punk, good design, programming, and STYLE! Well done! I would love if you did a post on your source code for this!

  57. 57/206

    May commented on 14 May 2011 @ 04:03

    Isn't the idea of a mashup to combine different artists?

  58. 58/206

    n1ikosgi commented on 14 May 2011 @ 04:45

    masterfully made. Felicitations maestro

  59. 59/206

    Treez commented on 14 May 2011 @ 05:53

    Not playing. Yawn.

  60. 60/206

    Osvaldo Osorio commented on 14 May 2011 @ 05:57

    You are THE BEST. In my country we said this expression: Eres la mera mata donde se rasca el tigre!. And it's a compliment.

  61. 61/206

    JDamage commented on 14 May 2011 @ 06:39

    Great tool, awesome code, sweet mashup.
    Sometimes, I FREAK'N LOVE TECHNOLOGY!!!

  62. 62/206

    Chris commented on 14 May 2011 @ 08:00

    Great visuals, and great music, but not technically a mash-up, which is the deliberate juxtaposition of an instrumental track by one artist with an acapella from another which are totally different from each other in style/genre/time sig etc. An example would be the blending of Beyonce's "Single Ladies" with Jackie Wilson's "Reet Petite" Seriously cooool. What we actually have here is a very good old fashioned mega-mix with stunning visual impact :)-

  63. 63/206

    Michael Holroyd commented on 14 May 2011 @ 08:18

    That was amazing.

  64. 64/206

    Andreas commented on 14 May 2011 @ 11:19

    Awesome demo. Works great in Firefox 4!

  65. 65/206

    Beth commented on 14 May 2011 @ 11:33

    The more I watch it, the more I appreciate what you've done! Amazing.

  66. 66/206

    Jason commented on 14 May 2011 @ 11:55

    Awesome. Care to share the Flash file you used to generate the audio data?

  67. 67/206

    Elvis Amaral commented on 14 May 2011 @ 14:47

    O.M.G
    Amazzinnng!!!

  68. 68/206

    Bob commented on 14 May 2011 @ 16:16

    Mmm! Monitor taste like cookie!

    That good enuf for me.

  69. 69/206

    Leukocyt commented on 14 May 2011 @ 18:08

    That is absolutely insane! Love it.

  70. 70/206

    c17 commented on 14 May 2011 @ 19:25

    It works like a charm on Firefox.

  71. 71/206

    c17 commented on 14 May 2011 @ 19:28

    Tested on Chrome, there are kind of stars that are not displayed on fx, but Chrome animations are slower.

  72. 72/206

    atrain commented on 14 May 2011 @ 19:43

    pure awesome +100 for HTML5/CSS3 and not flash!

  73. 73/206

    Cbyrne commented on 14 May 2011 @ 23:13

    How do I download this?

  74. 74/206

    James commented on 15 May 2011 @ 01:08

    Best thing I've seen ina while. For the love of Jebus more...DO MORE!

  75. 75/206

    Ca commented on 15 May 2011 @ 03:11

    I L-O-V-E-D it and I dont even like electronic music. Very surprising how you decided to (now and into the future) combine visuals with sound. Nicely executed. :) Please, do more!

  76. 76/206

    Rémy commented on 15 May 2011 @ 03:27

    The mash-up is beyond good, but adding those colours and forms to it is ridiculously amazing !

  77. 77/206

    hgrd commented on 15 May 2011 @ 06:14

    WOW

  78. 78/206

    Anatoly commented on 15 May 2011 @ 14:43

    It's amazing! Wanna get more!)

  79. 79/206

    Mike commented on 15 May 2011 @ 15:00

    Amazing example.
    I was also very impressed with the use of HTML5, really well done!

  80. 80/206

    Wayne commented on 15 May 2011 @ 15:35

    Cool stuff! Do you want to do this with other people's mashups?http://soundcloud.com/fatsuperman

  81. 81/206

    bj commented on 16 May 2011 @ 00:30

    i jus shot a massive load

  82. 82/206

    Eliot commented on 16 May 2011 @ 00:42

    Works fine in Opera 11.10
    The only bug - track labels are not positioned correctly... I guess it's the bug in transform-origin CSS3 attribute parsing...

  83. 83/206

    Eliot commented on 16 May 2011 @ 00:46

    Yes, and "stars" do not appear because of that too... transform-origin

  84. 84/206

    The Man in Blue commented on 16 May 2011 @ 00:49

    @Eliot What's the exact parsing bug? Is there a way to get around it?

  85. 85/206

    Eliot commented on 16 May 2011 @ 01:03

    I'm not sure... I've started starField() from the Dragonfly console, and stars do appear (and disappear) in the very center, same as track titles...

    Not sure if it's the problem with transforms or transitions... I'll try to inspect the code further...

    I do recall some problem with different types of transitions (ease-in or ease-out)...

  86. 86/206

    Eliot commented on 16 May 2011 @ 02:00

    Finally...

    Opera 11 still does not support transform and transition... You should use browser-specific -o-transform, -o-transition, and -o-transform-origin...

    Anatomy of Mashup works fine if you add those along with -moz- and -webkit- versions

    And in the line 20 in main.js you should make it so starField(); starts in Opera... It does not with current conditionals (it's a check for Firefox 4 I guess)...

  87. 87/206

    Chris Nager commented on 16 May 2011 @ 02:33

    Insane! You are talented. Daft Punk was a great choice.

  88. 88/206

    nox commented on 16 May 2011 @ 02:57

    Sweet! Loved the mashup on its own and the visual/technical stuff is amazing too.

  89. 89/206

    _6ril_ commented on 16 May 2011 @ 03:21

    F**kin' great! Awesome job bro.
    Bravo !

  90. 90/206

    Eliot commented on 16 May 2011 @ 03:39

    Well... Finally I've made some changes to the code so it works in Opera 11 now
    You may get main.css and main.js here:
    http://dl.dropbox.com/u/12388151/Anatomy%20of%20a%20Mashup%20-%20opera%20fixes.7z

    Sorry, I had to remove all other browser-specific code from there for debug purposes (they cause too many errors in the log), but you still may have a general idea what to do...

    One more thing... Your JS often generates very little numbers which are represented in scientific notation (1.549788375465653e-18px)... They generate errors too if used as CSS properties... Add some sanity checks for those (if x<0.01 make x=0)...

    Real-time code editing in Opera is amazing...

  91. 91/206

    szataniol commented on 16 May 2011 @ 06:14

    crazy shit! :)

  92. 92/206

    Joe commented on 16 May 2011 @ 13:27

    Holly Crap!!!!
    that was simply insane .... seriously that was fantastic and I mean sincerely fantastic

  93. 93/206

    George commented on 16 May 2011 @ 13:34

    I've had to spend the last 3/4 of an hour cleaning jizz of my screen because of you

  94. 94/206

    The Man in Blue commented on 16 May 2011 @ 13:35

    Errrmmmm, thanks George ... I think.

  95. 95/206

    Eliot commented on 16 May 2011 @ 13:54

    Well... Good morning, I guess...
    I'll check if you fix this visualization in Opera later tonight... It took me an hour to figure out where the problem is and 10 minutes to fix everything... :) I'll wait till you change the bottom line to something like "Better performance in Chrome, Opera or Safari" or "No Internet Explorer allowed" ;) Even if it performs quite well in IE9...

  96. 96/206

    Oscar Estrada commented on 16 May 2011 @ 13:57

    HTML5 ES GENIAL!!!

  97. 97/206

    @parkerc commented on 16 May 2011 @ 14:21

    Wicked Track mate, it is awesome, love the visualisations.

  98. 98/206

    Nix commented on 16 May 2011 @ 15:10

    Oh Yeah

  99. 99/206

    Mike commented on 16 May 2011 @ 15:22

    I think you just won the game

  100. 100/206

    Nix commented on 16 May 2011 @ 15:34

    When are Daft Punk touring Australia again, my boys 7 and 11 want to see them.

  101. 101/206

    Bee commented on 16 May 2011 @ 16:13

    I think you just sold a few thousand Daft Punk CD's for them. That was cool man.

  102. 102/206

    Marco Pivetta commented on 16 May 2011 @ 18:30

    This work is awesome!
    That's a great example of how to use all modern browser APIs!
    Thank you for sharing!

  103. 103/206

    Yama Zaru commented on 16 May 2011 @ 19:35

    Nice beats, you have a good ear for mixing. I love that you visualized this as well.

  104. 104/206

    Felix Sanchez commented on 16 May 2011 @ 20:11

    Thanks! This is just amazing, both the mash-up and the visualization is stunning. Great stuff!

  105. 105/206

    asd commented on 16 May 2011 @ 21:20

    saweeeet

  106. 106/206

    Jack commented on 16 May 2011 @ 21:25

    MAKE MORE!

  107. 107/206

    Monica commented on 17 May 2011 @ 02:10

    Amazing!!!

  108. 108/206

    Snapper commented on 17 May 2011 @ 04:26

    Sweeeeet as bro!

  109. 109/206

    David commented on 17 May 2011 @ 06:15

    Simply unbelievable. Congratulations on a masterpiece!

  110. 110/206

    Eliot commented on 17 May 2011 @ 07:29

    Well, the author decided not to make those little changes to the code to support Opera browser as well...

    Then you should maybe remove all browser-specific workarounds and see what happen... :) -moz-, -webkit-, and -ms-

  111. 111/206

    Colo commented on 17 May 2011 @ 08:36

    sos una bestia man!

  112. 112/206

    paul commented on 17 May 2011 @ 08:47

    absolutely awesome. great work!

  113. 113/206

    bloodieFrenchie commented on 17 May 2011 @ 09:03

    Glad to be the 113th to congratulate your work....

    Love that french sound and your "Blue - HD - personal -interpretation"

  114. 114/206

    Sally commented on 17 May 2011 @ 09:35

    This is beautiful! Bravo :)

  115. 115/206

    Aaron Gustafson commented on 17 May 2011 @ 09:55

    Amazing work as always, Cam. And thanks for sharing the code!

  116. 116/206

    Travis Caruana commented on 17 May 2011 @ 10:58

    Amazing. Awesome job. Each track is clearly distinctive yet the matching of beats is synchronised perfectly. Well done.

  117. 117/206

    facebooker commented on 17 May 2011 @ 13:10

    where's the share button man?!

  118. 118/206

    montex commented on 17 May 2011 @ 13:12

    Simplemente excelente

  119. 119/206

    limamusic commented on 17 May 2011 @ 13:32

    thanks

  120. 120/206

    Fwoop commented on 17 May 2011 @ 18:26

    Would you be willing to do any more mash ups of iconic bands in the future?

  121. 121/206

    John McDougle commented on 17 May 2011 @ 18:32

    Boy, that is a thing of art and education at the same time. Once you break it down like that it seems all the more real. Great work and I look forward to the next one.

  122. 122/206

    deluke commented on 17 May 2011 @ 18:46

    Just great. I love Daft Punk and you have taken it to the next level

  123. 123/206

    Rich Ashby commented on 17 May 2011 @ 19:37

    Stunning piece of work. Love it.

  124. 124/206

    Arpegius commented on 17 May 2011 @ 22:13

    I loved this so much I contributed a small sum (via the PayPal link) in the hope that you make a little cash out of this!

    Keep exeperimenting and enjoying what you do!

  125. 125/206

    observer commented on 17 May 2011 @ 23:17

    You should make it more known on the actual visualization site that it requires flash to run (i.e., if it says buffering indefinitely). Not only for the iOS devices, but those of us that block flash by default (e.g., click2flash). The HTML5/CSS3 emphasis in the description leads one to believe there is no need for flash.

    Better yet, remove flash from the equation.

    Great job however.

  126. 126/206

    The Man in Blue commented on 17 May 2011 @ 23:21

    @observer It doesn't require Flash.

  127. 127/206

    observer commented on 17 May 2011 @ 23:33

    it is interesting as I cannot locate the use of flash. However, it stays stuck on buffering in iOS devices (iPad), and on my MacBookPro that uses ClickToFlash, but works fine on my iMac, which does not have ClickToFlash enabled. I've been trying to whitelist your site in ClickToFlash, but have yet to get it to work. Have you heard of it working on iOS devices? Another commenter also brought up it not working on the iPad with a reference to flash as a possible culprit.

  128. 128/206

    The Man in Blue commented on 17 May 2011 @ 23:45

    I never tested it on iOS devices, as I figured the performance would be horrible. But the one time I did try it on my iPad, it didn't work.

    I might look into it later ...

  129. 129/206

    observer commented on 17 May 2011 @ 23:59

    still don't get it (as I cannot locate any use of flash), but disabling ClickToFlash allows the site to work. My only guess is the mp3 encoding (or the fonts?) or the large data files are somehow being interpreted as flash by ClickToFlash and somehow not supported on iOS (or not recognized correctly by your checkSoundFileLoaded function in main.js)

  130. 130/206

    martinX commented on 18 May 2011 @ 00:35

    Observer: works fine for me in Safari with ClickToFlash still enabled. I had to reload it once to get off the "Buffering..." but I thought that was my ADSL connection which has been dropping things all over the place today.
    Cameron: Well done. Aussie Aussie Aussie...

  131. 131/206

    observer commented on 18 May 2011 @ 00:40

    @martinX. yes, I am getting inconsistent behavior (i.e., working and not working). I guess a mystery. Perhaps when/if The Man In Blue has an opportunity to investigate the iPad issue, he may discover what is behind the inconsistency.

  132. 132/206

    arielle commented on 18 May 2011 @ 01:47

    ..so sick! AWESOME! slick work

  133. 133/206

    Wasdam commented on 18 May 2011 @ 02:03

    Probably the best Mashup i never ear !!!
    So AWESOME !!!

  134. 134/206

    RockyTomato commented on 18 May 2011 @ 06:50

    Un remarquable travail musical et de programmation. Bravo !

  135. 135/206

    Eliot commented on 18 May 2011 @ 09:23

    I'm sad to see Opera support is still not added... Though it requires only a couple more rows in .css and .js for -o-transform, -o-transition, and -o-transform-origin to enable "not yet standard CSS3 features"...
    See my previous posts...

  136. 136/206

    Floww commented on 19 May 2011 @ 01:16

    You've created a monster...

  137. 137/206

    Jason A commented on 19 May 2011 @ 05:33

    Flood gates. You've released them. Incredible code chops. And not too shabby on the mesh either!

  138. 138/206

    Luincalen commented on 19 May 2011 @ 06:49

    This is very nice indeed. Well done! I was grinning all the way through.

  139. 139/206

    Boggy commented on 19 May 2011 @ 09:01

    Sensational ..
    This is truely a work of ART.. Thanks for taking the time to share. Awesome..

    Cheers

    Boggy

  140. 140/206

    Joe commented on 19 May 2011 @ 10:42

    As communication increasingly comes in the form of recorded media, how do you rapidly scan it to find what you want-- the way you can scan a schedule or a page of a book? This is best done visually. I don't think this mashup is the ultimate solution, but it's a brilliant beginning.

  141. 141/206

    androtomia commented on 19 May 2011 @ 12:34

    perfect data visualization! guys, really, I luv you!

  142. 142/206

    Tom Weale commented on 20 May 2011 @ 04:37

    Just when i thought i understood music, i listened to this and the combo of daft punk and god like mash up skills caused my head to explode then impload then go normal again, absolutely love it

  143. 143/206

    nark0z commented on 20 May 2011 @ 11:39

    Best part has to be 0:37 - 1:24 but I guess all of it is rather amazing :D

  144. 144/206

    Joel commented on 20 May 2011 @ 13:15

    Music Industry - how dumb you are…

    Re: Takedown notice https://twitter.com/themaninblue/status/71407363302752256

  145. 145/206

    Buddyguy commented on 20 May 2011 @ 20:03

    Is there any way to make that an mp3?

  146. 146/206

    Stephen Wolff commented on 20 May 2011 @ 23:35

    Really great - thanks for sharing that!

    btw - did you know you do FFTs on the audio data in real time? (albeit FF4 was the only browser that could do that a month or 2 ago)

  147. 147/206

    Michel commented on 21 May 2011 @ 01:06

    Brilliant. Thanks - I love it

  148. 148/206

    Dokun commented on 21 May 2011 @ 05:00

    Killer!

  149. 149/206

    danilo di moia commented on 21 May 2011 @ 05:18

    really really impressed, brilliant work!

  150. 150/206

    amenhot commented on 22 May 2011 @ 11:01

    Good Job!

  151. 151/206

    Douglas commented on 22 May 2011 @ 14:06

    This is Brilliant work! You are a genius! I am going to help you share this out and make it even more popular. I am going to post it on youtube and enter a LOT of tags. Soon you will have like a billion hits!

  152. 152/206

    Anon commented on 22 May 2011 @ 21:52

    I really enjoyed your mashup! Keep on making more wonders!

  153. 153/206

    Jeremy Waite commented on 22 May 2011 @ 23:18

    Pure gold. You are a genius. And kudos on also making it so visually stunning

  154. 154/206

    ElectroBiker commented on 23 May 2011 @ 07:01

    Awesome work! Thank you and DP :)

  155. 155/206

    Eliot commented on 23 May 2011 @ 12:19

    Almost a week has passed, still no Opera support...
    Unfortunately, this kind of things happens with a lot of websites... Almost every web-designer knows about -webkit- and -moz- prefixes and add them, but almost none of them knows/use -o- prefixes for draft CSS3 features in Opera...

    When that happens, you know, people say that Opera has less CSS3 features supported then it really does... Shame on you!..

  156. 156/206

    Michael commented on 23 May 2011 @ 15:33

    @Elliot, you use a browser with 2% market share and wonder why people don't sink the effort into making sure their PERSONAL project works for you? It's not like you paid the guy, get over yourself.

  157. 157/206

    TB_GMHdC commented on 23 May 2011 @ 22:00

    You're Human After All! :)

    Great work.

    ([]> OI

  158. 158/206

    Gaz commented on 23 May 2011 @ 23:44

    EPIC MIX.

    5 stars

  159. 159/206

    Loki commented on 24 May 2011 @ 15:17

    I swear when I pressed play my pants were on.......

    I only have one question, where can I give you moneys for your mix???


    Loki M.

  160. 160/206

    The Man in Blue commented on 24 May 2011 @ 15:28

    There's a donation link in the top right while it's playing Loki.

  161. 161/206

    Andy commented on 25 May 2011 @ 08:20

    Anyway I can donate to you and you could give this away as download? It is truly awesome and I realise the file size will be on the large size but I need this in my life.

  162. 162/206

    Cziiki commented on 25 May 2011 @ 09:09

    want.....Mp3 of this mashup...so baaaaaad

  163. 163/206

    NightCalyster commented on 25 May 2011 @ 09:51

    Free Mp3 Download of the mashup. Enjoy!
    http://soundcloud.com/mark-fried/cameron-adams-definitive-daft/download

  164. 164/206

    NightCalyster commented on 25 May 2011 @ 09:52

    Just click save link as and save the mp3 for those that don't know what to do.

  165. 165/206

    Nix commented on 25 May 2011 @ 11:30

    @Eliot, ok so you're a smart alec who knows how to fix it for Opera.

    Maybe themaninblue doesn't want to fix it.

    If your so desperate for it a fix, do it yourself and post it on your own website.

    Otherwise stop whingeing and as ET said to your namesake, "Go home".

  166. 166/206

    Dj3stripes commented on 25 May 2011 @ 12:01

    Daft Punk should do something like this for their sets as they pull off some great mashes. Great job, please keep more coming!

  167. 167/206

    Erik Rubright commented on 25 May 2011 @ 14:33

    Would you consider releasing this as an mp3?

  168. 168/206

    TEud munki commented on 25 May 2011 @ 17:37

    seriously.....tears in eyes at 5:49

    thats how amazingly powerful this was.

    thank you

  169. 169/206

    qubiclemon commented on 25 May 2011 @ 22:36

    Much respect, this is awesome!!

  170. 170/206

    Kitesurfer34 commented on 26 May 2011 @ 01:02

    Love it. Flawless eargasm.
    BTW, my favorite mash-up experts are "The Twelves". Singles, Mixes (with txt plalist) & Bootlegs available over there : buickroadmaster.free.fr/fichiers/The_Twelves/
    The most famous : The Twelves - Essential_Mix-The Twelves BBC-SAT-12-18-2009
    My prefered : The Twelves - 30 Minutes of the Twelves Mix

    Enjoy !!!

  171. 171/206

    cesimone commented on 26 May 2011 @ 01:11

    I love it! Thank you for a visual feast for my eyes and ears.

  172. 172/206

    JP commented on 26 May 2011 @ 05:27

    This is amazing!
    I'm in the mobile marketing industry and would love to see it work on mobile devices, especially iPad and iPhone 4. This is a Flash killer in the making.

  173. 173/206

    Cristina commented on 26 May 2011 @ 07:02

    fucking fantastic. You sir, win at life.

  174. 174/206

    jublaine commented on 26 May 2011 @ 13:58

    so cool

  175. 175/206

    lesrel commented on 26 May 2011 @ 14:46

    fucking awesome! fantastic.

  176. 176/206

    EtN commented on 26 May 2011 @ 20:25

    Your mashup is pure awesomeness... And on top of that you are using the new html5 functionalities to perfection.

    Congratulation!!

  177. 177/206

    pcp commented on 26 May 2011 @ 22:25

    Amazing. I love it!

  178. 178/206

    BetoFreak commented on 27 May 2011 @ 00:43

    Simplemente Genial !!!!!!!

  179. 179/206

    Leandro commented on 27 May 2011 @ 04:30

    Hey man in blue,can we have the flash app you created?? Imm relly interested in your work!

  180. 180/206

    Hagu commented on 27 May 2011 @ 11:14

    Me dan ganas de llorar / I want 2 cry

  181. 181/206

    veedles commented on 27 May 2011 @ 18:35

    love it :)

  182. 182/206

    zen commented on 27 May 2011 @ 18:40

    What an ear-gasmic experience. Well done!

  183. 183/206

    Goognostic commented on 27 May 2011 @ 23:34

    Freakin fantastic!
    Very inspiring, thank-you!

  184. 184/206

    ThreeTwoFive commented on 29 May 2011 @ 01:01

    The Man in Blue, nice work! Awesome! But tell me - if I have mp3 file?How can I get massive of counts? Please, tell me where I mast dig?

    Are there any libraries about FFT on C#?

  185. 185/206

    Ricardo commented on 29 May 2011 @ 16:55

    AWSOME-O

  186. 186/206

    Blue Colibri commented on 31 May 2011 @ 00:21

    Great colors combo..and the rendered audio spectrum is just bloody marvellous..

  187. 187/206

    dominique commented on 31 May 2011 @ 06:31

    Beautiful

  188. 188/206

    Tim commented on 31 May 2011 @ 15:39

    http://soundcloud.com/mark-fried/cameron-adams-definitive-daft/download

    Looks like an official download link.

  189. 189/206

    Diego commented on 31 May 2011 @ 18:42

    Wow! That's simply brillant!
    Is there a way to export this visualization to a youtube video?
    It should be great to share my tunes on youtube and give visualization to stems (drum, bass, guitars, vocals) composing the song!

  190. 190/206

    Mizz commented on 1 June 2011 @ 22:52

    the original post on SoundCloud reached its download limit quickly. Luckily there were several other copycat posts, just search for the name on the site.

  191. 191/206

    Wicked commented on 2 June 2011 @ 08:19

    Pretty good, but i feel like it would be alot more powerful if you mixed it on decks in realtime.

  192. 192/206

    Xavier commented on 3 June 2011 @ 11:57

    Led to this site by Digg.com.
    So glad that I came here. This mashup was amazing, I wish that I could download it, so that I could hear it every day. Thank you for capturing this sound and doing what you did with it.......this is now one of my listed favorite websites. I will also suggest this site to my friends through Facebook.

    Thank you again.

  193. 193/206

    Keith commented on 3 June 2011 @ 19:24

    That is awesome...
    So good that it sounds like it should have been on their Alive 2007 Album.

    Have posted the link everywhere...
    Hope you do something like this again!

  194. 194/206

    Keith commented on 3 June 2011 @ 19:35

    OMFG....
    Didnt even know this was possible.
    If you want the MP3.
    Just right click on the Page. (the page that plays the music)
    Go to 'View Page Source'
    Then right click on the .mp3 file.
    Save as.
    Then hey presto...

    Sorry if this seems basic to most people, but I spent ages on the net looking for the MP3 of this. & there it was behind the page all along.

    Hope this helps.

    BTW, I was using Chrome..

    Peace

  195. 195/206

    Orlando commented on 4 June 2011 @ 08:15

    I just Love it!!! is there any posssible way I could download this mashup?!

  196. 196/206

    John commented on 6 June 2011 @ 19:40

    Great mashup. Thanks for sharing it. It has been long since I enjoyed so much!

  197. 197/206

    Andrea commented on 7 June 2011 @ 08:47

    amazing.
    great idea, impressive result.

    thanks for sharing!!

  198. 198/206

    David Micallef commented on 7 June 2011 @ 10:46

    Great Job Dude! really well done

  199. 199/206

    Matthew Russell commented on 9 June 2011 @ 17:27

    Great mashup :D The perfect thing to show people when introducing them to Daft Punk

  200. 200/206

    jane A commented on 12 June 2011 @ 00:33

    love the mash up! fantastic!! (200th comment yay!)

  201. 201/206

    Andrew commented on 13 June 2011 @ 02:36

    Hi Cameron,

    This Mashup was amazing. I've been reading the source-code for weeks now and I have a question.

    What did you use to generate the data that's called for each ring? Is it the frequency spectrum of each track? If so, how did you generate it?

    Thanks and keep up the awesome work. I love the blog!

  202. 202/206

    The Man in Blue commented on 13 June 2011 @ 10:45

    @Andrew: I used a little Flash application that I wrote to pull out the audio spectrum for each layer.

  203. 203/206

    nwn daniel pachame commented on 13 June 2011 @ 11:39

    genial chabon jaja

  204. 204/206

    Joa commented on 15 June 2011 @ 04:28

    Buenísimo! Mis felicitaciones Señor.

  205. 205/206

    Valerio commented on 20 June 2011 @ 03:52

    this italian says that you're an Artist.

  206. 206/206

    A3 commented on 20 June 2011 @ 06:42

    Pure win. Period.

  207. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed