Drag this link to your bookmarks bar: Katamari!
Or copy and paste this url into the location bar on any site:
(works best in chrome or firefox 4)
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.
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
kh.js is where all the action happens:
grid[floor(x / 100)][floor(y / 100)]is a list of elements in a 100x100 pixel block. This should probably be an R-tree, but the hot-spot in this program is definitely in the rendering.
position: absolute; left: x; top: y;). See
-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, and transform_test2.html.