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() &amp;&amp; (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) &amp;&amp; a[c].pattern &amp;&amp; (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 &lt; 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 &lt; 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

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

Chris Ridge March 8, 2013 at 3:43 pm

You missed this:

Space: 00101010 (Isn’t enabled for Android)

Reply ↓

Zak El Fassi Post authorMarch 8, 2013 at 3:45 pm

Thanks Chris ! Updated

Reply ↓
1. Chris Ridge March 8, 2013 at 3:47 pm
  
  Wonder why it isn’t enabled for Android. Does it work on iPhone or WP8 I wonder?
  
  Reply ↓
  1. Zak El Fassi Post authorMarch 8, 2013 at 3:53 pm
    
    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
    Moreover, it does some heavy physics and calculations to render the different frames.
    
    Reply ↓

Matt March 8, 2013 at 4:05 pm

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 ↓

Jonathan March 8, 2013 at 6:24 pm

Wow you took the hard approach. Debugger is your friend, my friend. few breakpoints here and there, walk through the stack, let it do all the work for you and suddenly print out the already generated binary values and you’re done.
https://twitter.com/jonathanstanton/status/309464442586931200

Reply ↓

Jonathan March 8, 2013 at 6:31 pm

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 authorMarch 8, 2013 at 10:55 pm
  
  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 ↓