Take your celebrity impressions to the next level by replacing your face with theirs in the browser. (As long as you do impressions of someone on the list of available faces, of course.)

Audun Mathias Øygard (@matsiyatzy) has created a face substitution experiment for us all to amuse ourselves with. Inspired by Kyle McDonald and Arturo Castro’s work in face substitution, Audun has achieved similar results in the browser with JavaScript instead of openFrameworks. See what you’d look like with the face of Rihanna, Obama, Bill Murrary and others. Or for the creepiest results, try the average face setting. Actually, seeing your face replaced with someone else’s is always pretty odd. Odd, but fun!

Face Substitution
From: Audun Mathias Øygard

Pharrell Williams song Happy, from Despicable Me 2, now has an incredible 24 hour long video, and I defy even the grumpiest among you not to crack a smile while viewing.

The UI lets you slide around the entire 24 hours, where the song plays over and over, each time featuring a different dancer. It’s filmed in various locations around LA by directing team “We Are From LA“, who confusingly are based in Paris. I guess maybe they’re from LA? Who knows!

Pharrell himself pops up at regular intervals, along with a few star cameos including Steve Carell (rhymes with Pharrell!) and Kelly Osbourne. There’s more about the making of it over at Fast Company. But for now, sit back, enjoy, and cheer the flip up!

24 Hours of Happy

Google’s data arts team has been at it again! This time, with an interactive visualization of cloud data, over a 3d WebGL globe.

The imagery is using data gathered from the weather layer in google maps from 2010 to 2011. There is also the option to underlay the earths vegetation, as well as oceanic currents, which gives a brief glimpse into the relations between cloud and weather formations and the ocean.

The team has cleverly combined all the individual cloud images into a WEBM video, and then wrapped around the globe. The globe itself (which we have seen before) is unsurprisingly rendered via the well known Three.js

Cloud Globe by Google’s Data Arts

CTRL + [P]aper is an “innovative 3D online experience that turns anyone into a creative and skillful paper toy designer.” Reminiscent of the popular Paper Critters, which was created in Flash and Papervision3D, CTRL + [P]aper is built using WebGL, Three.js, and videos created with After Effects on top of an HTML5 and CSS3 foundation.

The first thing to captivate me was the smoothness which the site seemed capable of transitions between the different character sections. Almost no frame dropping at all! It looked at though some parts also used the video element for certain parts in order to optimize the rendering of animations. The character builder itself is quite intuitive, though on smaller resolutions you might experience some content being cut-off. I did notice a clever easter egg in the form of an “I <3 Flash” t-shirt. A tip-of-the-hat to the original creator of Paper Critters perhaps? Once your creation is complete, you can print it out from a PDF and construct your digital creation in the physical realm! Magic!

The site isn’t without a few bummers, however. Released as a Chrome Experiment, it is not yet cross browser and while it does run great on newer machines, I found my old MacBook chugging at the very thought of processing more than a few WebGL objects at once. More user customization in terms of colors, textures, and logos would have also been welcomed. Lastly, like so many Flash sites of yesteryear, CTRL + [P]aper has a splash screen intro.

At least there’s a “Skip” button…

CTRL + [P]aper

What do you get when you mix together Python, Node.js, Three.js, CoffeeScript, WebGL, Websockets and a Kinect? If your answer was “A live-streaming, rotatable, zoomable 3D camera that wouldn’t be out of place on an episode of CSI”, you’d be right.

George MacKerron from the Centre for Advanced Spacial Analysis at University College London combined these things into DepthCam to allow us to look over his shoulder or snoop around his desk. It’s best viewed during UK office hours while George is at his desk but there is also a YouTube video showing it in action.

How it works

First, George records the depth image of his desk from the Kinect. This is a high-resolution 3D image which is then downsampled in Python and compressed using LZMA. The data stream is also compressed using an algorithm similar to MPEG-2 where the majority of frames only contain the differences between frames instead of the whole scene. Finally, this is streamed via a binary WebSocket to a node.js server

George programmed the client-side in CoffeeScript. The browser connects to the node.js server – again using binary WebSockets – to receive the compressed depth data in real time. This is then rendered in WebGL using three.js. The use of binary WebSockets means that this only works in an up-to-date version of Chrome or Firefox 11 but that’s the price of being cutting-edge.

Best of all, the whole project is available in GitHub. You can find out more technical details in on George MacKerron’s blog.

More

This isn’t the first time this kind of single-camera, 3D point-cloud representation has been used, indeed, Joel Gethin Lewes, Arturo Cassuro and perennial favourite Mr. doob used something similar to stream the 2011 Art&&Code conference in 3D. In that case, the heavy-lifting on the server-side was built using openFrameworks – a set of C++ tools for creative projects – and used cleverly encoded ogg/vorbis video to store the depth data. The source for this project is also available on GitHub. Unfortunately, there aren’t any videos of the conference but Mr. doob does have a similar looping interactive demo on his site.

For an AMA (Ask Me Anything) interview for Reddit,  James George and Jonathan Minard  filmed Golan Levin using a similar technique with the added complexity of a second camera to capture colour information, a technique James George has used in several projects. This required post-processing but, given that DepthCam is open-source, it might not be long before this can be done in real time as well.

This kind of 3D depth sensing technology has been available for a few years inside university research projects and complex art installations but so far it has always required expensive technology, hardcore server programming or a combination of both. It’s very exciting to see this is now completely possible using (soon-to-be) standard web technologies. In-browser 3D video chat would be an impressive direction to take it but once people start experimenting with the possibilities, it’s difficult to imagine where it could end up. CSI: 3D, anyone?

DepthCam
GitHub project for DepthCam
DepthCam on Youtube
George MacKerron’s blogpost about DepthCam
Mr. doob’s Kinect demo
Interview with Golan Levin

Seriously.js is seriously cool (heh) client-side realtime compositor for video and images by Brian Chirls.

The demo video, courtesy of Ok Go, provides a fun showcase of its abilities (gotta love the nightvision/Modern Warfare effect!) and demonstrates the realtime transitions made possible by a node-based compositing approach.

Having not played with this kind of library before, I was pleasantly surprised how quick and easy it is to pull something together. As usual, the demo source is worth a poke around

The tutorial is easy to follow and will give a good starting point for your own experiments. You can pick up the source on Github.

Seriously.js by Brian Chirls

MediaElement.js with Auto Translation plug-in

This data-rich presentation uses Popcorn.js to parse information about the 50 classic Donald Duck cartoons and over 30 Glenn Beck radio & TV broadcasts he used in the remix.

The large amount data of data coming at you can be a bit overwhelming, but he recommends watching the video once first, then following the data feeds on the second viewing.

Let’s face it, HTML5 video is in its infancy. Precocious as it may be, it still has a lot of growing up to do.

And if HTML5 is an infant, then its proud parents would be Web Made Movies, Mozilla’s open video lab. As proud parents are oft to do, they are helping to push the limits of what HTML5 is capable of with their Popcorn JavaScript library and Butterapp authoring tool.

This group of very determined and ingenious developers, filmmakers, and journalists is working together to make it easier to mash up Google Maps, image feeds, Twitter accounts and other semantic data to create data-rich video and audio experiences.

One especially impressive example of this is the #18DaysInEgypt project, which uses annotated and aggregated video, commentary, and news items to build an immersive experience.

I expect to see many more amazing data-rich video applications being spawned from this powerful library in the future.

Mozilla encourages lots of creative experimentation with their monthly DevDerby competitions. This month’s is just about to wrap up, and it’s focusing on HTML5 video. Two entries that I thought stood out so far : HTML5 Video Voting and VideoGrabber

If you want to enter there’s still some time: https://developer.mozilla.org/en-US/demos/devderby