Google’s HTML5 tribute to American artist Alexander Calder

July 22, 2011 By Derek Mead

Google's newest doodle shows off the dynamic rendering capabilities of HTML5.

Google’s doodles, the little bits of art and interactivity that occasionally pop up on their home page to pay homage to important dates, have long shifted from remixed versions of the Google logo to full on displays of the company’s ingenuity. Today, to honor American artist Alexander Calder, Google has put up an interactive mobile fully rendered in HTML5.

Jered Wierzbicki, the software engineer who coded the doodle, explained his tribute to the creator of the mobile in a Google Blog post.

“Last year I wandered into a white room at Museum of Contemporary Art, Chicago full of Alexander Calder’s delicate ‘objects,’ all beautifully balanced and proportioned, moving gently in the air currents like a whimsical metal forest,” he wrote. “Calder took ordinary materials at hand—wire, scraps of sheet metal—and made them into brilliant forms, letting space and motion do the rest. As an engineer, I work with abstractions, too, so this really struck me.”

The doodle is Google’s first doodle scripted with HTML5 canvas, a feature that allows dynamic rendering of two-dimensional bitmaps. “It runs a physics simulation on the mobile’s geometry, and then does realtime 3D rendering with vector graphics,” Wierzbicki wrote. “Only recently have browsers advanced to the point where this is possible.” The doodle even works with accelerometers, and is an excellent display of the capabilities of HTML5 that are still just being unlocked.

As peacefully whimsical as the doodle is, it isn’t outwardly as addictive as some of Google’s past forays, including the famed Pac-Man and Gibson doodles. However, to have an exhibition of the rendering possibilities of HTML5 on the most-visited page on the Internet is an implicit show of support, which really amounts to yet another nail in the coffin of Flash. With Apple long railing against the Adobe software, and now Google flexing its muscles with its replacement, one has to wonder just how long Flash can stick around.

Showing 4 comments

N_8_ at 3:30pm 24th July 2011 "The doodle is Google’s first doodle scripted with HTML5 canvas..." Incorrect... On May 21, 2010, Google Inc used the following google doodle. http://google.com/pacman was done in an HTML5 canvas. The source can be viewed here: http://google.com/logos/js/pacman10-hp.4.js List of doodles http://www.google.com/logos/logos10-2.html
1. N_8_ at 3:54pm 26th July 2011 What I said is incorrect... I was misinformed. It looks like this is the first one that uses the HTML5 canvas
Donovan Caylor at 6:55pm 22nd July 2011 Very slow and choppy in Chrome, but nice to see someone trying SOMETHING with HTML5. Specs: Sandy Bridge 2500K @ 4.2GHz || Radeon XFX 6870 Black Edition || MSI P67A-GD65 || G.SKILL Ripjaws X Series (8GB)
1. Todd Zankich at 4:58pm 23rd July 2011 They just made it move slowly because that's the style. Since 2009, the Javascript code (HTML5 or not) is getting compiled in Chrome down to the precise machine code for your CPU, and the graphics accelerator is being used to draw the graphics as of late last year. It'll do 60 FPS, look perfectly smooth, using only a fraction of 1% of your CPU power.