Google mobile sculpture doodle-HTML5 canvas magic

Google created a fresh doodle celebrating the birthday of Alexander Calder,an american scientist famous for inventing the mobile sculptures.

The moving sculptures made an inspiration for Jered Wierzbicki,software engineer working in Google who replicated the exact movement physics in doodle form.

First doodle entirely made of HTML5 canvas

This is the first ever doodle that was made completely made of HTML5 Canvas.Till now google has created many interactive doodles with the combination of flash,css sprites and javascript and this is the first time the HTML5 canvas is used for entire doodle.

Jered Wierzbicki said,

You need to use a modern browser to interact with it. It runs a physics simulation on the mobile’s geometry, and then does realtime 3D rendering with vector graphics. Only recently have browsers advanced to the point where this is possible.

You can hardly notice the shadow of the doodle below the search box which was coordinated with movement of the doodle.

Html5 made it possible to interact with the device which the doodle was on,you can try in your laptop which has accelerometer and move the sculpture.

Shadow

Code

1.The two HTML5 canvas elements

2.Movement physics The movement of all the flap elements on the sculpture is coded to move in specific geometry that matches with law of equilibrium. You can see the JavaScript that specify the position and movement of the sculpture

var B = new u([new t([new x("", "#1B3281", [{
        v: [-0.3174, -0.1721, 0]}]), new x("", "#999999", [{
        v: [-0.0265, 0.0278, 0]},
    {
        c: [[-0.0207, 0.0206, 0], [-0.0054, 0.0037, 0]],
        v: [0.0163, -0.0049, 0]}]), new x("#1B3281", "", [{
        v: [-0.0263, 0.0278, 0]},
    {
        c: [[-0.0263, 0.0278, 0], [-0.0392, 0.0186, 0]],
        v: [-0.0631, 0.0346, 0]},
    {
        c: [[-0.0631, 0.0346, 0], [-0.0725, 0.0392, 0]],
        v: [-0.072, 0.0575, 0]},
    {
        c: [[-0.072, 0.0575, 0], [-0.0719, 0.1059, 0]],
        v: [-0.0565, 0.092, 0]},
    {
        c: [[-0.0565, 0.092, 0], [-0.0323, 0.0646, 0]],
        v: [-0.0263, 0.0278, 0]}]), new x("#1B3281", "", [{
        v: [0.0376, -0.0321, 0]},
    {
        c: [[0.0249, -0.0329, 0], [0.016, -0.0051, 0]],
        v: [0.016, -0.0051, 0]},
    {
        c: [[0.0243, 0.0088, 0], [0.0472, 0.0143, 0]],
        v: [0.0472, 0.0143, 0]},
    {
        c: [[0.0529, 0.0153, 0], [0.0549, 0.0106, 0]],
        v: [0.0553, 0.0045, 0]},
    {
        c: [[0.0553, -0.003, 0], [0.0538, -0.0274, 0]],
        v: [0.0376, -0.0321, 0]}])], [new h("", "#999999", [0, 0, 0], 1.156118)], [0.2582, 0.2823, 0]), new t([new x("", "#999999", [{