Radiohead + Open Data = JavaScript + Canvas Visualizations of their work
Written by on July 17th, 2008 in Uncategorized.
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.
Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/338056445/radiohead-open-data-javascript-canvas-visualizations-of-their-work