All the GoogleIO easter eggs (and how did I get them).

UPDATE : After the Google IO’13 started, the experiment has been moved to a new home : https://developers.google.com/events/io/experiment

If you just want the GoogleIO’13 easter eggs codes, jump directly to the bottom if this post. If you’re interested in how I got’em all, read along.

So, the main codebase is located in the /js/app.min.js of the site. But it’s compiled and pretty much unreadable. Luckily, I have Sight, a Chrome extension that indents/prettifies the code. But still, it’s still not readable.

I had to browse through the code to find some telltale signs, and what do you know, I find this :

ww.mode.register("home", ww.mode.HomeMode, null);
ww.mode.register("cat", ww.mode.CatMode, 231, 8);
var isAndroid = navigator.userAgent.match(/Android/);
isAndroid || ww.mode.register("space", ww.mode.SpaceMode, 42, 8);
ww.mode.register("pong", ww.mode.PongMode, 129, 8);
ww.mode.register("bacon", ww.mode.BaconMode, 144, 8);
ww.mode.register("simone", ww.mode.SimoneMode, 211, 8);
ww.mode.register("eightbit", ww.mode.EightBitMode, 83, 8);
ww.util.getAudioContextConstructor() && (ww.mode.register("song", ww.mode.SongMode, 219, 8), ww.mode.register("synth", ww.mode.SynthMode, 136, 8));
ww.mode.register("ascii", ww.mode.AsciiMode, 127, 8);
ww.mode.register("bowling", ww.mode.BowlingMode, 117, 8);
ww.mode.register("rocket", ww.mode.RocketMode, 69, 8);
ww.mode.register("burger", ww.mode.BurgerMode, 57, 8);

It doesn’t say much, but at least there is some chance I could decipher this mess.

Then I searched for the ww.mode.register function,  which is :

ww.mode.register = function(a, b, c, d) {
  ww.mode.modes[a] = {
    klass: b,
    pattern: c,
    len: d
  }
};

Klass, Pattern, and len. I looked for where is klass (easier and distinguishable) is called/located through the code, and I found this snippet, which unlocks pretty much everything :

for (c in a) a.hasOwnProperty(c) && a[c].pattern && (d = a[c], b[c] = {
  klass: d.klass,
  binaryPattern: ww.util.pad(d.pattern.toString(2), d.len)
});

Three things : ww.util.pad, d.pattern, and d.len.

ww.util.pad pretty much does an d.len-bit binary conversion  (code below), in our case, always 8bit, and d.pattern is the c param in the ww.mode.register function,

ww.util.pad = function(a, b) {
  for (var c = "" + a; c.length < b;) c = "0" + c;
  return c
};

Now everything is crystal clear – All I had to do is to rewrite the ww.util.pad as a standalone function :

function io(a, b) {
  for (var c = "" + a; c.length < b;) c = "0" + c;
  return c;
}

And then, it’s just a matter of calling io() with the different patterns converted to binary:

var a = 219;
io(a.toString(2), 8); //outputs 11011011, which converts to IIOIIOII

List of all the GoogleIO’13 easter eggs and codes

Go to GoogleIO’13 site, and enter one of the following codes :

  • Cat : IIIOOIII
  • Space: OOIOIOIO
  • Pong : IOOOOOOI
  • Bacon : IOOIOOOO
  • Simone : IIOIOOII
  • Eightbit : OIOIOOII
  • Synth : IOOOIOOO
  • Song : IIOIIOII
  • ASCII : OIIIIIII
  • Bowling : OIIIOIOI
  • Rocket : OIOOOIOI
  • Burger : OOIIIOOI

21 thoughts on “All the GoogleIO easter eggs (and how did I get them).

        1. Zak El Fassi Post author

          A quick app profiling shows that Space mode rendering takes roughly ~56% of the CPU … on a Macbook Pro i5 … Imagine what would it do to Android :D
          Moreover, it does some heavy physics and calculations to render the different frames.

          Reply
  1. Matt

    There are hidden modes (pinata,metaball and donut) too. You can get them by injecting some js

    ww.mode.register(“pinata”, ww.mode.PinataMode, 1, 8);
    app.loadModeByName_(“pinata”,1,1);

    ww.mode.register(“metaball”, ww.mode.MetaBallMode, 2, 8);
    app.loadModeByName_(“metaball”,1,1);

    ww.mode.register(“donut”, ww.mode.DonutMode, 3, 8);
    app.loadModeByName_(“donut”,1,1);

    Reply
    1. Jonathan

      ok sorry I wasn’t more clear. Step by Step:
      goto: https://developers.google.com/events/io/
      open up debug console (Chrome for me)
      goto sources, expand the menu on the left, and click the tab Sources. navigate to
      developers.google.com/events/io/js/app.min.js
      (like so: http://i.imgur.com/Fc23oQA.png)
      then click the little “{ }” Icon at the bottom which unobfuscated the JS.
      goto line 379 and add a break point. Click on either the I or the O, debugger breaks. look at the scope variables on the side for “this.matchers_” which is an array of 96 objects. violà your binary.

      Reply
      1. Zak El Fassi Post author

        Yup – that works too. But you have to go through the single matchers one by one … and construct the arrays !
        I took a hard -but I guess more “formal” way ; )

        Reply
  2. Pingback: All the Google I/O Easter Eggs (And How I Got Them) | MoreDailyFeeds

  3. Pingback: All the Google I/O Easter Eggs (And How I Got Them) « VidenOmkring

  4. Pingback: Appyummy » All the Google I/O Easter Eggs (And How I Found Them)

  5. Pingback: Google I/O 页面有彩蛋 | シ最愛遲到.!

  6. Pingback: All the Google I/O Easter Eggs (And How I Found Them) | Real True News

  7. igmirien

    That is something. Thumbs up bro, and please beware of opening it* too much, lmout raha tadour had lyamat.

    Reply
  8. Pingback: Google I/O 2013 Easter Eggs | Ramblings of a Coder's Mind

  9. Pingback: Google I/O 页面有彩蛋 – 木又鸟又鸟中文网【MUJIJI.COM】

  10. Pingback: Google I/O 页面有彩蛋 – 木又鸟又鸟

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>