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.

Looks like Rey Bango of jQuery fame spent a lot of time compiling an awesome list of Web development resources:

The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books

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.

With GPS chipsets x as well as modern webbrowsers present in most mobile devices (iPhone and Android Phones, Tablets and even Notebooks) these days, it is surely time to start using geolocation with your webservices.

This is actually quite simple, as most current browsers (this as always excludes internet explorer) implement the W3C Geolocation API Specification. As seen in many tutorials, you simple check if the navigator.geolocation object exists, call navigator.geolocation.getCurrentPosition(my_callback) and get the current location of your user.

Nice and easy, but there is one little Problem: on most devices, this can lead to very inaccurate results. For example the iPhone 3G often returns positions with 500m accuracy, even if you pass the enableHighAccuracy:true. So watching the current position until it’s accuracy stabilizes is inevitable if you want to serve your user with pleasing results. Also this enables you to add some nice ‘wait for it’ animation that shows the current degree of accuracy – as for example seen in the iPhone Maps Application.

Luckily the Geolocation API also specifies the watchLocation function. This one can be called like that: var watch_id = navigator.geolocation.watchPosition(your_callback). This way your callback gets called everytime the users position or the accuracy of the current position changes. Under good conditions it just takes a few seconds to reach good enough accuracy for your application. As soon as your callback gets a position with good enough accuracy, you should call navigator.geolocation.clearWatch(watch_id) to disable the GPS again. This is especially important on mobile devices where an always on GPS can drain the battery quite fast.

To ease the usage of the geolocation api, i wrote a simple javascript that tries to get the current users location for a specific accuracy threshold. It is as always available on github.

Using it is really easy. Simply call simple_locator with your callbacks and you are done. Check out this quick example:

  var locator_update = function(coords, location_name) {
    var output = document.getElementById('output');
    output.innerHTML = 'lat: ' + coords.latitude +
                                      '; lng: ' + coords.longitude +
                                      '; acc: ' + coords.accuracy +
                                     '' + location_name;
  };
  simple_locator({
    threshold:50,
    running_callback : locator_update,
    finished_callback : locator_update,
  });

As an additional tool i also added reverse geocoding via google maps api v3. Just include the google maps api, set the google_geolocation:true option and the second parameter of your callback will contain the address of the current location. An example can be found in the simple_locator.html file on github.

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.