Jim Henson Interactive puppetry doodle-How did they do


September 24, 2011Javascript7 Comments

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

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,


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

Related posts:

7 Responses to “Jim Henson Interactive puppetry doodle-How did they do”
  1. DeX

    Great! Is it possible to have it for dowload as an interactive standalone animated file? Thanks!

  2. Rosa

    Yeah, that would be great as an interactive standalone file.. Awesome to have as tribute to Jim Henson.

  3. Nanette Fountain

    A special Happy Birthday to my favorite person!

  4. Jeyaganesh


    The links help you understand better.

  5. John

    Before anthing else, I just want to thank you for sharing this stuff and Yeah ! I just want also to ask that is it possible to have it for dowload as an interactive standalone animated file? Thanks for sharing?

  6. Pratap Reddy

    Great. I have been reading about this sprite images and use of CSS from long time, but never used this. But this specific doodles triggered my enthu a lot. Atlast, i build a working model of it and put up in my Blog. I clarified step by step how to create it.

  7. Somesh

    Similar example with simpler code here: http://kpfindings.wordpress.com/2011/10/23/how-does-google-animates-doodle/

Leave a Reply