Hacking Radiohead’s House of Cards

To motivate you- We are attempting to achieve the effect shown here:

http://code.google.com/creative/radiohead/viewer.html

Sometime last week Radiohead released their music video – house of cards – which is a radical video in a long time.

Since I do not embed youtube videos on my blog, here’s the youtube link.

[http://www.youtube.com/watch?v=8nTFjVm9sTQ]

The video is significant if you are a radiohead fan and/or an opensource/tech freak. Much is argued if the video is significant to the lyrics but that is more a subject of context rather than significance. Significance is subjective. It is out of context yes, but it is significant.

Radiohead has also shared their code, making this an important time for indie and DIY artists to explore opensource computing. [http://code.google.com/creative/radiohead/]

I have had some hands-on experience which I am about to describe- by no means am I a JAVA/OpenGL/graphics person. I am sure there would be others who could do a better job at this.

Grab processing, Untar, Install [linux] *

Download the radiohead processing source code and CSV values. The processing source code is what we will examine and add some of our own stuff. The CSV values are 3D axis values and a fourth number representing intensity. You would have one CSV file per frame and so you’d have about 30/50/60 frames per second rapidly displaying changes in the co-ordinates and intensities.

You would have an idea now, how this video was created. Instead of cameras they use, a scanning system which captures 3D surface geometries at a high FPS along with the surface texture information which is aligned together with the former [now you have a very different kind of capture instead of live video], and a laser system that uses multiple lasers rapidly throwing their beams around the surroundings and calculating the time required for them to reflect back. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes. All these numbers are then input to a data visualization program such as processing.

Start up processing, and open the FaceAnimationViewer.pde . You must also copy all the CSV files into the directory named data for the FaceAnimationViewer app

Now all you’d do is modify some code and hit the play button. Simple as that. If you hit play now- without any modifications, you ll see a static image of Thom Yorke

Try changing some code.

In the draw function, line 53 [ scale(2); ] would represent your image size. Change that to scale(1);

Uncomment line 56

rotateY(frameCounter/50.0f);

Hit play . Sweet.

To up the ante, lets apply a perspective transformation and allow our mouse to rotate Thom’s head. You should remember a perspective transformation if you can remember this image from your college courses of graphics/3d modelling etc. Basically objects closer to you appear larger and objects farther from you appear smaller. Hence you would define a lot of parameters like a vanashing point, a field of view [FOV], your distance from the object etc. As you move across or around the object in a 360° plane the object will transform itself making you look really smart that you just did this – but its really just the math.

The ‘field of view’ parameter will work similar to the scale function to us. Near and far are really the default values which I am using [cameraZ in the code]

I wouldn’t dive into the details of how these functions work, you must really explore it yourself if you’d like to. I dont think you’d need to know much except some high school trigonometry and some graphics. You can find most of the library functions at processing’s website.

Before you start, you could help yourself by commenting out some code to make sure you know your perspective logic is working. I commented out lines 51, 53, 56. Heres what my code looks like now

void draw(){
// We'll use a black background
background(0);
// The data has 0,0,0 at the center and we want to draw that point at the center of our screen
// We will keep this to make sure we start at the center as well
translate(width/2, height/2);
// Lets adjust our center slightly
// translate(-150,-150);
// Lets draw things bigger- We will achieve that by modifying the field of view [FOV]
//scale(1);
// This would be a way to rotate over time- We will rotate Thom using our mouse
//rotateY(frameCounter/50.0f);
// This would use the mouse's horizontal location to adjust the rotation- Not this
//rotateY(mouseX/150.0);

Once you have that done, add the below code- make sure this stuff is done before loading the array with the frame data.

//start at the center
translate(width/2, height/2);

//A larger scale is achieved by a larger denominator.
float fov = PI/4.0;
float cameraZ=((height) / tan(PI*60.0/360.0));
float aspect = float(width)/float(height);

perspective(fov, aspect, cameraZ/10.0, cameraZ*10.0);

//rotateX(mouseX/float(width)*PI*2);
//rotateY(mouseY/float(height)*PI*2);

Thom stays static now, like before.

To notice the perspective changes uncomment the rotateX call. Now you can rotate Thom on the X axis. Play around with the denominator- more specifically if you up the denominator you rotate Thom on a larger angle per unit of width Try values like PI/2, PI/6, PI/4 , PI instead of PI*2. Nothing happens on the Y axis

Comment out the rotateX call and uncomment the rotateY call. Ditto effect on the Y axis

Now uncomment both those rotate calls. Careful now- Thom’s head is sensitive.

There you are. Thats all there is to it.

[* I hit an error initially when I tried compiling the code. Processing/JAVA complained that there is not enough memory on the heap. You might want to change this in the Preferences and up your mems a bit]