Chrome Shows Off Some Fancy HTML5 Tricks
Google’s Chrome browser has a well-established reputation for being not only extremely fast at
Chrome Experiments now has over 100 demos on offer, and we picked out some of our favorites for this little gallery.
We tested all of these experiments in multiple browsers, and almost all of them worked in Safari and Firefox, though they performed much better in the latest beta of Firefox 4 than in the current stable Firefox 3.x builds. Some of them also work splendidly in the latest Microsoft pre-release, Internet Explorer 9 preview 3.
In short, you don’t need Chrome to view these, but they will all be more impressive in Chrome than in other browsers.
Turn off your pop-up blocker and give this game a spin. It’s the console classic, Pong, but played with browser windows — talk about thinking outside the box. We also tried this one in Firefox 4 beta, and it runs great. It also seems a little easier to beat in Firefox than in Chrome for some reason. See more work from Stewart Smith at the Stewdio.
This demo by Sean Christmann shows a short video. But when you click on it, the video breaks into tiny tiles that scatter across the screen. The video keeps playing inside the tiles as they tiles bounce around. After a few seconds, the tiles slide back into place so you can keep on clicking and blowing up the video to your destructive little heart’s content. This is the sort of canvas-based manipulation that HTML5′s native <video> tags allow. Canvas can do this sort of animation with other page elements, but it’s especially impressive to see with video. Sean explains how he does it on his own site. By the way, Firefox doesn’t like this demo very much.
This one will conjure memories of playing in the ball pit at the local IKEA. Ball Pool fills up a blank browser window with brightly colored balls. Drag them around, toss them and (this is extra cool) shake the browser to send them flying around. The demo uses box2d-js for all the physics. Ball Pool is one of the rare demos on Google’s site that works exceptionally well in Firefox 4.
The Burn Canvas experiment by Krzysztof Pasek utilizes the HTML5 canvas element to create a simple drawing app. The page will “burn” anywhere you point the mouse. If you leave it in one spot or move the mouse around slowly, the burn effect cycles through a series of bright, psychedelic colors. Things get even trippier when you hold down a mouse button, which causes the drawing to melt. Check out Pasek’s other experiments on his site, including a canvas-based Magic Eye 3D image generator. Packaged code for his various HTML5 experiments is available under the GPL free software license.