Katamari Hack

Drag this link to your bookmarks bar: Katamari!

Or copy and paste this url into the location bar on any site:

javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

(works best in chrome or firefox 4)

What is this?

This is a "bookmarklet" that turns any page into Katamari Damacy. Try clicking the Katamari! link above.

This was the winner of the 2011 Yahoo HackU contest at University of Washington.

How does it work?

Short version: css transforms (for things stuck to the katamari), canvas (drawing the katamari), and z-index (illusion of depth).

Long version: The bookmarklet loads jQuery and kh.js into the current page. jQuery is used mostly for .offset() and .css() . kh.js is where all the action happens: