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 .offset()
and .css()
.
kh.js is where all the action happens:
StickyNodes::addWords
)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,
but the hot-spot in this program is definitely in the rendering.position: absolute; left: x; top: y;
).
See PlayerBall::drawBall
.-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.