A simple implementation of the good old water demoscene effect with a little twist. It works on the pixel data of a video playing in realtime. Check out the demo here. More infos soon. Be sure to use a recent version of Google Chrome or Apple Safari.

To get rid of the nasty sparetime i created a little fun experiment that uses HTML5 <video> + <canvas> and some CSS3 transforms to perform some interesting transition / slicing effects on video elements. It only works in webkit based Browsers i.e. Apple Safari and Google Chrome. Below is a link to the demo and a really short howto explaining the technique behind it.

Watch the demo first.

Howto

The code is pretty simple and straightforward. In essence you need a video tag to play the video, some canvas elements that act as your video slices and finally some css transforms to animate the canvas elements.

Video

HTML5 <video> makes playing videos (nearly) as simple as displaying an image on your website. The only thing slightly problematic is the codec support in different browsers. To satisfy all class A browsers, you would need at least three videos with different encodings (ogg, webm, h.264), but as these demo only covers webkit, at least ogg is not needed.

To embed the video you can use something like this:

<video id="video" loop autoplay controls style="display:none">
<source src="trailer_480p.m4v" type="video/mp4">
<source src="trailer_480p.webm" type="video/webm">
</video>

This defines a video element with some additional parameters: The source tags define the video files in different encodings, the loop, autoplay and controls attributes should be self explanatory.

To encode videos in h.264 i simply use handbrake, Miro Video Converter does a good job at creating WebM videos. Both tools are available for free.

Javascript

The javascript code is not that complicated either. In essence you just need to update some canvas elements with the video content periodically. This is simply done by rendering the video to the canvas element. The code is really straightforward:

var canvas1 = document.getElementById('canvas1')[0];
var ctx1 = canvas1.getContext('2d');
// ... repeat for remaining canvas elements
var video = document.getElementsByTagName('video')[0];
video.addEventListener('play', function() {
	setInterval(function() {
		ctx1.drawImage(video, 0,0, 854, 480);
		// ... repeat for remaining canvas elements
}, 33); }, false);

A possible speedup could be achived by rendering the video to a single large hidden canvas element an render this to the visible elements. Still I did not bother to test the speed improvements for this small example.

CSS3

As slices of the video are rendered to different canvas by now, you can use standard css3 transformation effect on them. To get at least minimal speed on mobile browsers, you should always use 3d transforms instead for their 2d counterparts as those are hardware accelerated e.g. translate3d(10px,10px,0px) instead of translate(10px, 10px). More details on CSS3 transforms can be found here.

The Movie

Last but not least: the excelent open source movie used for this demo is of course Big Buck Bunny (c) copyright 2008, Blender Foundation. A truly amazing achievement of the open source community.

In a collaborative effort EN GARDE and TAO Software lauched dada-dada.tv today. Beautiful design meets some nice Javascript/HTML5 enhacements.

Though it was speculated to be fixed with the iOS 4.2 release, it is still the case that on iPhone and iPad translate3d is hardware accelerated whereas translate is not.

So if you want to animate large images or content elements

#element.move { -webkit-transform:translate(10px, 100px); -webkit-transition:transform; }

is dog slow whereas

#element.move { -webkit-transform:translate3d(10px, 100px, 0px); -webkit-transition:transform; }

is blazingly fast.

As there is no real downside in using translate3d it should always be used to provide good performance on mobile devices.

Lazy weekend collection – some useful visualization libraries for your Javascript Applications.

jQuery SVG is a nice structured plugin that allows you to interact with SVG-Canvas Elements. It also features extensions for graphing and plotting.

Raphaël on the other hand is a simply kept library to handle your Vector-Graphics needs on the web. Especially interesting is the support of SVG as well as VML. The last one providing a decent fallback for some well known not-so-good browsers.

Interesting new development: mozilla added mozRequestAnimationFrame for better animation timing with html5 / css3 browsers. Looks very interesting, the only drawback is, that it is an experiment and not guaranteed to stay.

And finally some really awesome stuff: JavaScript InfoVis Toolkit is a stunning tool for creating infovisualizations on the web. Developed since 2008 it features a boatload of visualization techniques and what is especially impressive: you can interact with your graphs and everything is smoothly animated.

Sitepoint published a large series of Presentations covering CSS3 on youtube. Really worth watching.

If you are not too satisfied with the user experience of the jQuery API documentation you can always build your own using the jQuery API Search. learningjquery.com has a gentle introduction to it.

Neteye published a handy little jQuery plugin that takes the pain out of performing all those nice css3 transformations. A good way to speed up development of effect heavy applications.

And some valid reasons for using the newest browser features by Thomas Fuchs. I’m glad that we only have to support one browser on our interactive displays and can use all those goodies.

Last, be sure to check out the newest Firefox builds with JaegerMonkey JVM enabled. A pretty impressive speedup, possibly faster than the IE9 beta, maybe even a competitor for safari / chrome.