Tag: kranthi

Visualising drawings in 3D with DrawPad

Last February at Ignite Sydney we thought we'd try something a little different to get the crowd involved.

While most people were downing a few drinks, a bunch of lovely lads and ladesses with iPads were circulating through the audience asking people to draw (with their fingers) what inspires them INSERT:CONTINUED:END

Last February at Ignite Sydney we thought we'd try something a little different to get the crowd involved.

While most people were downing a few drinks, a bunch of lovely lads and ladesses with iPads were circulating through the audience asking people to draw (with their fingers) what inspires them. On the iPads was a drawing application that recorded the time and position that each stroke of their fingers made and that data was used to create a 3D timelapse visualisation of their drawing on the big screen behind the stage. I've put together a little video of the end result:

It was actually quite exciting to see what people came up with. And equally exciting was seeing the looks on their faces as they interacted with the iPads and then waited with anticipation to see how their drawings would be interpreted by the foreign shapes appearing on the screen.

Someone drawing on an iPad using DrawPad To pull off this stunt we used all open web technologies: a webpage running my "DrawPad" Canvas application that allowed people to draw, and captured the movements of their fingers; storage of the stroke data in JSON on the backend (thanks to Tim Lucas); and visualisation of those strokes in 3D using WebGL via Mr. Doob's wonderful three.js library.

To get people drawing, I took a look at 37signals' Chalk but it lacked one important feature: multi-touch drawing, so I decided to write my own drawing app.

If you're never done multi-touch event handling it can be a mysterious process (it certainly was to me) but once you get your head around the notion of an event object that contains multiple points of interaction, then it's actually quite fun.

3D visualisation of a drawingI've uploaded the source code for the drawing app (and the 3D visualiser) into a DrawPad Github project if you want to take a closer look (or improve it in the countless ways that it could be improved upon). Certainly the 3D visualiser is a result of cramped deadlines. I really would have loved to create the stroke paths as true 3D meshes, but had to settle for a series of spheres that follow the path of the stroke instead. (Kind of like voxels.)

But at the end of the day the technology didn't matter. What mattered was the outcome: an easy-to-use way for people to draw what they wanted, and a pretty-as-a-picture translation of what they drew. The fact that it was done in a browser made no difference at all.

webgl ipad canvas html5 visualisation event ignite

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!) INSERT:CONTINUED:END

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.

mashup art music experiment html5 css3

Deep + Vocal + Bliss DJ Mix

It's been a while since I did a house music DJ mix, so I thought I'd put together some tunes that I'm feeling at the start of 2013. This one starts off deep, goes vocal and ends on a blissful high, so take a listen, or download all 50 minutes as an MP3 INSERT:CONTINUED:END

It's been a while since I did a house music DJ mix, so I thought I'd put together some tunes that I'm feeling at the start of 2013. This one starts off deep, goes vocal and ends on a blissful high, so take a listen, or download all 50 minutes as an MP3.

Tracklisting:

  1. Per Byhring - Ettertid (Russ Chimes Remix)
  2. Duke Dumont - Need U 100%
  3. Martyn - We Are You In The Future
  4. Bob Sinclar - I Feel for You (Ben Delay Dub Mix)
  5. Julio Bashmore - Au Seve
  6. Candi Station - Hallelujah Anyway (Larse Vocal Mix)
  7. Hot Chip - How Do You Do (Todd Terje Remix)
  8. Max Lyazgin & John Martin - Good Morning
  9. The Other Tribe - Sing With Your Feet (Instrumental)
  10. M83 - Midnight City (Sharam Jey Remix)
  11. Tensnake - Coma Cat (Stanton Warriors Re Bump)
  12. The Presets - Promises (Lifelike Remix)
music dj mix

Visualising <audio> elements with the Web Audio API

For a new project I'm working on I'd like to create an audio-reactive visualisation using analysis of the music that's playing. The new Web Audio API lets you do this pretty easily in the browser (Webkit-only at the moment).

I'm posting my documented code here with an explanation for anyone else INSERT:CONTINUED:END

For a new project I'm working on I'd like to create an audio-reactive visualisation using analysis of the music that's playing. The new Web Audio API lets you do this pretty easily in the browser (Webkit-only at the moment).

I'm posting my documented code here with an explanation for anyone else who would like an easy snippet to get them started down the music visualisation path. You can view a demo here and download the source code here.

The main concept in the Web Audio API is that you wire up a bunch of modules together. The output from one module going into the input of another module. To this with an <audio> element, you have to create a Web Audio source with it, wire that up to an analyser, and then wire the analyser up to your speakers (so that you can hear the original <audio> again).

The code for all that looks something like this:

var audio = document.getElementById('music'); var audioContext = new webkitAudioContext(); analyser = audioContext.createAnalyser(); var source = audioContext.createMediaElementSource(audio); source.connect(analyser); analyser.connect(audioContext.destination);

Once you've done that, the analyser is now listening for any output from the <audio> and will have data waiting for you whenever you ask it.

Once you set the audio.play()ing you can query the analyser at any time and check what the current frequency data of the sound is. If we put that analysis into a simple draw() loop then we can graph out what the sound looks like:

function draw() { // Setup the next frame of the drawing webkitRequestAnimationFrame(draw);  // Create a new array that we can copy the frequency data into var freqByteData = new Uint8Array(analyser.frequencyBinCount); // Copy the frequency data into our new array analyser.getByteFrequencyData(freqByteData);  // Clear the drawing display canvasContext.clearRect(0, 0, canvas.width, canvas.height);  // For each "bucket" in the frequency data, draw a line corresponding to its magnitude for (var i = 0; i < freqByteData.length; i++) { canvasContext.fillRect(i, canvas.height - freqByteData[i], 1, canvas.height); } }

You can see a demo of this running in my experiments section. I've just done a very simple line rendering of the frequency data but your imagination is the limit. Download the source code and see what you can do with it!

Stay tuned for the prettiness that I've actually got planned for this code.

Update (2013-04-22): This article has kindly been translated into Serbo-Croatian by Anja Skrba. You can read it here: http://science.webhostinggeeks.com/vizualizovanje-elemenata-sa-web

visualisation music javascript experiment html5 tutorial api canvas

Perfect Summer DJ Mix

Download the Perfect Summer DJ Mix (175MB)

It finally seems like Sydney's entered Summer. To commemorate the good weather and sunshine vibes, I thought I'd upload an old mix. Perfect Summer is designed for putting on as you drive to the beach or relax on the sand with a cool pina colada INSERT:CONTINUED:END

Download the Perfect Summer DJ Mix (175MB)

It finally seems like Sydney's entered Summer. To commemorate the good weather and sunshine vibes, I thought I'd upload an old mix. Perfect Summer is designed for putting on as you drive to the beach or relax on the sand with a cool pina colada.

It's probably one of the last mixes that I did on turntables with all original vinyl, back in 2007. You can even hear the crackle of dust under the needle in the opening refrains of Solar Stone's Seven Cities.

Anyway, download Perfect Summer (or stream it) and get out in the sun while it's still here!

Tracklisting:

  1. Solar Stone - Seven Cities (Solaris Heights Mix)
  2. Kings Of Tomorrow - Finally (Rulers Of The Deep Mix)
  3. Orinoko - Island (Alternative Dub Mix)
  4. Graham & Blades - Funky Summa
  5. Plan B - #2
  6. Nalin & Kane - Beach Ball (DJ Icey's "The Sea" Mix)
  7. Nalin & Kane - Beach Ball (South Beach Vacation Mix)
  8. Orbital - Frenetic (12" Mix)
  9. Punks - Break Me With You
  10. Golan Globus - Blazer (Version 2)
  11. Maurice & Noble - Hoochie Coochie (Arcaic Mix)
  12. Chris Lake - Changes
  13. Underworld - Two Months Off
  14. Black Rock - Tiger
music dj mix

  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress