Insight into Google’s Input / Output machine

Google has just updated its Google I/O site with details about the 2012 edition of the event. Registration for the event opens on March 27th (If I remember correctly, the tickets for Google I/O 2011 were sold out in less than an hour. Good luck for those looking forward for the tickets.). Like the 2011 edition, this year also Google has added some cool stuff on its site. Google I/O 2011 site had an awesome countdown timer (Chrome experiment) which was counting down to start of the event. The brilliant designers at Google have taken it a step further and have built a game called “Input/Output” to play-with till the event. This game is again a Chrome experiment and I am really impressed with it. I played with it for couple of hours and this post is an (unofficial) insight into some of the technologies used in this experiment.

About “Input / Output machine”

The objective of the game is simple: use the tools and machine parts to create a Rube Goldberg-inspired machine that moves a particle from the <input> to the </output>. It looks simple but, believe me, it is very addictive. Its the New Angry Birds!! Once you get going with the machine, you can just unleash your creativity and build some creative ones. Also, Google has promised that some of your creations could be featured at Google I/O 2012. Build your machine and share it on Google+ using #io12.

Technologies used

The JavaScript code which is the backbone of this whole experiment is not obfuscated, fortunately. That made it easier for me to dig through what is going behind the scene. The whole experiment seems to be heavily dependent on Canvas rendering. HTML5 canvas element is very powerful but it is very difficult to work with when it comes to handling user interactions. Easel.js is a neat solution to this problem – It allows you to retain a full hierarchy of display objects rendered on the canvas and enable interaction on them. (If you have seen the cool charts on Google Zeitgest 2011 site, that was also built using Easel.js). Every tool on the toolbox is rendered as a display object onto the board and then the necessary event handlers are added to facilitate the positioning of the tool on the board.

For calculating the motion of the particle and transforming the particle, JavaScript library “Slyvester – Vector and Matrix Math for JavaScript” has been used. Another interesting JavaScript library used is “Stativus : StateCharts” which is a micro framework for maintaining state charts of an application. Apart from these, there are few utility libraries like “Underscore.js”, “jQuery Easing”, etc being used. All the aforementioned libraries are packaged inside a single JavaScript file named as “experiment.js”

JavaScript Libraries used

• Easel.js – Library to work with HTML5 canvas. It provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
• Slyvester - Vector and Matrix Math for JavaScript. It includes classes for modeling vectors and matrices in any number of dimensions, and for modeling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the math it represents.
• Stativus – Library for maintaining the state charts of an application. Statecharts are a great way to organize your web application and make it more robust and increase code reuse.
• Underscore.js – Utility library that provides a lot of the functional programming support.
• jQuery Easing Plugin – jQuery plugin to give advanced easing options.

Quick hack to unlock different particles

When you click on the <input>, you get options to position the <input> and you will also see another option to change the particle (as shown in the screenshot below). By default, only the first particle is enabled. As you build the machine and progress on the game (not really sure about the trigger – Chrome particle gets active on remixing some existing machine), you will get few additional particles – Anti-gravity Plus particle, Androidify particle, Chrome fast particle. Here is a quick hack to unlock all those particles by default:

1. Information about the unlocked particles are stored in a variable called USER_METADATA.
2. Open JavaScript Console (Cmd + Shift + J) on your Google Chrome.
3. Enter the following lines: USER_METADATA.hasPlusParticle = true;USER_METADATA.hasAndroidParticle = true;USER_METADATA.hasChromeParticle = true;
4. Yay! You are all set. Now, you can try out all the available particles.

Well done, Google! It is very addictive and I am going to spend more days on it. Please let me know if there is anything incorrect in this post.

Update: Thomas Reynolds, the lead developer of this project commented on this post with some corrections. “We actually only use Ease.js, which is the Penner Easing Equations from inside Easel. Our canvas renderer is 100% custom. Regarding the particle hack, so glad you found that! There are a ton of "developer" hacks, mostly global variable, just waiting to be tweaked.”

-- Varun