Play Katamari Damacy On Any Website

Katamari Damacy, the game where you roll over thing to collect them and grow bigger and bigger can now be played on any website, thanks to a clever bit of code. Contra? Not yet, BUT I'M WORKING ON IT.

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:

* 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, 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, and transform_test2.html.

Did that say magic? I'm going to assume that just said magic. WHICH THE INTERNET IS BY THE WAY. Now, go to THIS PAGE, copy the code from the box, go to the website you want to play on, paste the code in the address bar and get ready to get your game on at work! And after that? Résumé-updating.

Katamari Hack (works best in Google Chrome or Firefox 4)
via
Katamari Hack rolls across your favorite websites, leaving swath of HTML5 destruction in its wake [engadget]

Thanks to Jonathan, blake and Erin, who don't roll anything but sushi. OH GREAT, NOW I'M GONNA BE WANTING SOME ALL DAY.

• I Love Doing Experiments In The Microwave!

  November 22, 2010

  Have I ever told you I used to rest my head against the microwave whenever I was cooking something in it growing up? I did? Oh. Well I have trouble forming new memories now. But I do remember the time I dragged an extension cord out to the middle of the backyard and hooked ... / Continue →
• Slow-Motion Video Of Match Head Lighting

  January 5, 2011

  This is a slow-motion video of a match lighting at 2,000 frames-per-second, which ends up taking two-and-a-half minutes to watch. It's pretty neat, but not nearly as neat to think about as how the hell they managed to slow down time. *shaking videographer like a ragdoll* TELL... / Continue →
• When Pokemons Procreate: Pokemon Fusion

  September 10, 2010

  Ever wonder what the lovechild of two different Pokemons would look like? Me neither, I'm too busy brainstorming the world's hunger problem. My Mother Teresa-ness aside, Pokemon Fusion allows you to morph two Pokemons together to see what their offspring might look like. Bas... / Continue →