Google’s Chrome browser has a well-established reputation for being not only extremely fast at rendering JavaScript, but also robust in its support of cutting-edge HTML5 technologies.
Both of these capabilities are on display at Chrome Experiments, a site that Google set up to showcase some of the coolest demos on the web for JavaScript apps, intricate CSS layouts and animations done with Canvas.
Chrome Experiments now has over 100 demos on offer, and we picked out some of our favorites for this little gallery.
Interest is exploding in HTML5 and its companion technologies. The hope is that these emerging standards will be widely used to power new web apps, as well as for playing animations, songs and videos in the browser without any plug-ins. Developers and content providers continue to rely on plug-ins like Flash or Silverlight for such multimedia playback tasks for now, but they are increasingly turning to HTML5, JavaScript and other web standards as browser makers continue to build the new capabilities into their latest releases.
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.
Of course, a few of the Chrome demos on the Experiments site use Webkit-specific technologies and CSS prefixes, so those only work in Chrome and Safari. Some have poo-poohed vendor-specific prefixes, and others see them as a necessary step to force browser makers to adopt the latest behaviors being used in the wild. Regardless of that debate, it’s encouraging to see the different browsers all improving their JavaScript capabilities, which all of these demos exploit.
In short, you don’t need Chrome to view these, but they will all be more impressive in Chrome than in other browsers.
Browser Pong
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.
Destructive Video
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.
Entanglement
Derek Detweiler’s simple solitaire game Entanglement is an addictive and fun time waster, but it’s also beautifully crafted. It uses subtle canvas animations to spin the hexagonal tiles, and JavaScript to handle the mouse and keyboard controls. Derek has a few other games on his personal site.
Ball Pool
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 creator, Mr. Doob, is a busy man. Check out the lo-fi and psychedelic Plane Deformations, and the bizarre Multiuser Sketchpad, where you can watch dozens of anonymous wannabe Picassos use JavaScript to draw crude penises in your browser.
Canopy
Fun with fractals! Ryan Alexander’s experiment takes you inside a vector-graphics tree as it grows. The trees in Canopy can be zoomed in upon infinitely, and you can trigger mutations and blooming cycles, so you can watch leaves grow and fall off, and start new trees. The animation is slick and fast in Chrome, and it’s just as fast in our Firefox 4 beta. Be sure to check out Ryan’s massive JavaScript fractal zoomer on Google Code. And if you like watching computer-generated, canvas-animated trees and flowers bloom, check out PlasmaTree and FlowerPower, both from mhepekka at OpenRise.
Wavy Scrollbars
Click on the scrollbars to set them in movement. It’s called Wavy Scrollbars for a reason — the bars undulate like a desktop wave machine, smoothly growing and shrinking thanks to toxi’s verletphysics library. This one is by a Russian developer named Andrey. Check out some of his other JavaScript experiments at the389, his personal site.
Burn Canvas
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.
See Also:
