Thursday, July 17th, 2008

Radiohead + Open Data = JavaScript + Canvas Visualizations of their work

Category: Showcase

I work on Google Code. Hearing that Radiohead was going to release data with progressive licensing and wanted to do so on Google Code was awesome.

Now we see how cool it is that the data is open. People like Jacob Seidelin are doing interesting things with it.

In this case, Jacob has created amazing visualizations of the data using JavaScript and Canvas:

I figured it would be a nice little experiment to try visualizing this data using JavaScript and Canvas so I went and did just that. The data is simply point clouds, meaning a whole bunch of points with x,y,z values (and intensity) for each frame. The data on Google Code is about 800 MB, so obviously a bit of trimming had to be done. You can’t expect 30 fps with Javascript doing with this kind of data, so I’ve only used every 5 frames giving us a framerate of 6 fps, not great but acceptable. Then the actual points, each frame has about 12,000 points. No way this will render with 6 fps in any browser, so again I’ve taken only 10% of the points. Additionally, I’ve tried to filter away the noise around Thom Yorke’s head since that took up a good deal of points. The interesting bit is him singing, anyway. In the end, we have a dataset of about 4 MB (converted to a JS array) for the one minute clip they released.

Now the data is in a more manageable state and the visualization can begin. It’s not as good as the real thing, obviously, but I think it’s ok (it’s best when you look at Thom in profile). The audio clip is as usual played via SoundManager 2 which also gives us free timing information to sync the rendering to. I’ve played around and made a few different effects that you can toggle on and off (by pressing keys 1-9). While it is playing you can also rotate around the vertical axis by moving the mouse horizontally over the video. Also try clicking/doubleclicking.

Great publicity for Radiohead too. When you are first to do something, that is often the case.

Posted by Dion Almaer at 8:35 am

4 rating from 30 votes


Comments feed TrackBack URI

I had the same idea:

I used only one in 20 frames, but using 100% of the points after filtering noise. It totals over 8MB. The points are sorted by color, because parsing the fillStyle property for every pixel was too slow. No sound though.

Comment by sjoerdvisscher — July 17, 2008

This is really cool. If there’s a band out there that “gets it” and has mainstream appeal and great music, it’s Radiohead…

Comment by Dylan Schiemann — July 17, 2008

Wow – RadioHead + Javascript, two of my Favorite Things !!!

RadioHead makes for great coding music (esp. In Rainbows), so I guess they know their audience :)

Comment by lhankins — July 17, 2008

sjoerdvisscher: your version is missing the perspective projection.

I hacked together an optimized version of House of Canvas based on Jacob’s HiRes data set of 6485 dots. It runs at ~15 fps in Opera 9.51.

Ordering the dots by angle should eliminate the occasional front to back overdraws at little to no cost.

Comment by p01 — July 17, 2008

p01: I found that perspective did not add much, it only reduces performance significantly. Using the angle for z-ordering is a good idea though.

Comment by sjoerdvisscher — July 18, 2008

I may be using a higher FOV than you did in your tests because I found that perspective makes a nice difference. Beside it only costs about 2fps here for 6485 dots, rendering the point cloud at ~11 fps on my 3yo office computer in Opera 9.51.

Comment by p01 — July 18, 2008

Radiohead continues to pioneer new trends in the music scene… My colleague wrote a post on this also, ( ).

It pleases me to see an amazing tech blog talking about good music, and vice versa elsewhere. :-)

Comment by LJHarb — July 18, 2008

Turns out that pre-sorting the point cloud by angle, optimizes the rendering a little and cut down the size of the data by ~25%

See the URL I pasted above.

Comment by p01 — July 19, 2008

Leave a comment

You must be logged in to post a comment.