Katamari! (http://Katamari!) EDIT: doesn't work, instead, go here (http://kathack.com/) (kathack.com) and drag the link to your shortcut bar, then come back to this page and play ball! ;) (Or any web page, for that matter)
If the link doesn't work, drag it to a place in your bookmarks bar and try it. ;) Or, copy+paste this:
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);
EDIT2: copied the description for those of you too lazy to check it out :P
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;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 (http://en.wikipedia.org/wiki/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 (http://kathack.com/js/kh.js) into the current page. jQuery is used mostly for .offset() and .css(). kh.js is where all the action happens:
Splits all the text on the page into words/spans. (StickyNodes::addWords)
Builds a grid data structure so that intersections with elements can be found quickly (StickyNodes::finalize). Essentially grid[floor(x / 100)][floor(y / 100)] is a list of elements in a 100x100 pixel block. This should probably be an R-tree (http://en.wikipedia.org/wiki/R-tree), but the hot-spot in this program is definitely in the rendering.
The ball and stripes are drawn in a canvas that gets moved around the page (i.e. position: absolute; left: x; top: y;). See PlayerBall::drawBall.
When an element is attached to the katamari, a clone is made. The original element is hidden. The new element is moved around by setting -webkit-transform. The transform rotates the element about the rolling axis of the katamari and scales the element to make it look like it's coming out of the page. See PlayerBall::drawAttached, transform_test.html (http://kathack.com/transform_test.html), and transform_test2.html (http://kathack.com/transform_test2.html).
Created by Alex Leone, David Nufer, and David Truong, March 2011.
EDIT3: added picture (that doesn't do justice) to show you what it looks like:
(http://i43.tinypic.com/yp836.jpg)