Jim Henson Interactive puppetry doodle-How did they do

Jim Henson’s 75th birthday, the brain behind the Muppet shows was celebrated by Google with the puppetry doodle that you can try your hands on.

Google along with the Jim henson company have created a digital puppetry in the form of interactive doodle.The homepage showed each letter of “Google” with the characters created by Jim henson and you can control the movement of each of the Muppet.

Jim Henson Interactive puppetry doodle

Lets see how this doodle is created,

The muppet characters are made in CG by Jim Henson company and the animation part by doodle team from google.

The Images

Each animated character is in separate div element for which the  position is calculated based on mouse co-ordinates.Here comes the interesting part,Each character is made as css image sprites in two [3×3] matrix structure.

Simple as that,the left side images are shown based on the direction if mouse click  is not triggered.The right side images are applicable for mouse click.

Similarly the other css sprites,

Javascript

try {
        if (!google.doodle) google.doodle = {};
        var h = -1,
            i = 0,
            j = {
                G: {
                    C: "Ga",
                    s: 0,
                    p: 61,
                    B: d,
                    i: d,
                    height: 118,
                    left: 18,
                    src: "/logos/2011/henson11-hp-1g.png",
                    top: 57,
                    width: 118
                },
                Ga: {
                    height: 122,
                    left: 19,
                    F: "G",
                    src: "/logos/2011/henson11-hp-4g.png",
                    top: 53,
                    width: 116,
                    w: 287
                },
                o1: {
                    s: 40,
                    p: 161,
                    i: d,
                    v: g,
                    height: 77,
                    left: 133,
                    src: "/logos/2011/henson11-hp-2o.png",
                    top: 107,
                    width: 93
                },
                o1a: {
                    display: "none",
                    frames: 33,
                    height: 180,
                    left: 122,
                    src: "/logos/2011/henson11-hp-2oa.png",
                    top: 0,
                    width: 113,
                    w: 0
                },
                o2: {
                    s: 80,
                    p: 238,
                    i: d,
                    height: 102,
                    left: 217,
                    src: "/logos/2011/henson11-hp-3o.png",
                    top: 78,
                    width: 81
                },
                g: {
                    s: 120,
                    p: 306,
                    i: d,
                    height: 96,
                    left: 288,
                    src: "/logos/2011/henson11-hp-4g.png",
                    top: 112,
                    width: 74
                },
                l: {
                    s: 160,
                    p: 361,
                    i: d,
                    height: 146,
                    left: 348,
                    src: "/logos/2011/henson11-hp-5l.png",
                    top: 31,
                    width: 66
                },
                e: {
                    s: 200,
                    p: 418,
                    i: d,
                    height: 46,
                    left: 397,
                    src: "/logos/2011/henson11-hp-6e.png",
                    top: 129,
                    width: 84
                },
                lea: {
                    display: "none",
                    frames: 60,
                    v: g,
                    src: "/logos/2011/henson11-hp-6ea.png",
                    width: 202,
                    height: 193,
                    left: 321,
                    top: 16,
                    w: 0
                },
                lra: {
                    display: "none",
                    frames: 65,
                    src: "/logos/2011/henson11-hp-6ea-lr.png",
                    width: 45,
                    height: 144,
                    left: 358,
                    top: 33,
                    w: 0
                },
                era: {
                    display: "none",
                    frames: 52,
                    src: "/logos/2011/henson11-hp-6ea-er.png",
                    width: 96,
                    height: 44,
                    left: 387,
                    top: 131,
                    w: 0
                }
            },

Easter Eggs

There are some easter eggs hidden in this doodle that brings the liveliness.[click to see larger image]

Image 1, Image 2, Image 3.

See more examples and analysis on How google creates Interactive doodles