Okay Geek Farm
Dismantle any website with the Katamari Hack (Developer interview)
Chris Self
As geeks, we often find unique ways of wasting time. And if your usual social network addiction isn’t cutting it, we’ve found something completely different. With a simple click, you’ll be moving text and images around on your favorite website. Where can you find it?
Introduction
The Katamari Hack was created by Alex Leone, David Nufer and David Truong in March 2011. Origianlly, it was part of the Yahoo HackU contest. If you take a look at the code, you’ll find the inner-workings of HTML5, CSS and jQuery.
- HTML5 canvas is used for “drawing the Katamari”
- CSS Transforms are used for “things stuck to the Katamari”
- Z-Index provides the “illusion of depth”
For in-depth technical details, you can visit the official website.
Endless Fun
Using the Katamari Hack couldn’t be simpler. After dragging the provided link into your bookmarks bar, clicking it will prompt a popup window. It’s here were you can choose the method of control, katamari color and more. Click start and the katamari, a small sized sphere, will appear on your screen. It’s now when you can click and scroll around the website of your choice. With every click, the katamari will follow your movements picking up text and images with it. After you’ve finished dismanting a website, refreshing will return you to normalcy.
Activate Katamari on Okay Geek (and 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);
My Q&A with Alex Leone
Hello Alex. Could you introduce yourself for us?
Hello! I’m a senior at the University of Washington in Seattle.
Why build a bookmarklet like Katamari? Where’d the name and idea come from? Plus, how long did it take to develop?
The bookmarklet was an entry in the Yahoo HackU competition at the University of Washington. Essentially teams of 3-4 have 24 hours to build a “hack”, which are usually simple web apps. After 24 hours, your team has a few minutes to present what you built, and the coolest hacks get prizes. Here’s a picture from last year’s event. Myself, along with my teammates David Nufer and David Truong have competed for the last 3 years at UW.
In the last two years we competed, we built html5 + javascript browser games. Our first was “pacmap”: pacman on google maps where pacman runs along the streets. Last year we built Regex Battle, an asteroids clone were the asteroids are strings that match a regex. Both years we won the competition.
This year, a lot of our friends were trying to dethrone our two-year winning streak. We were getting pretty nervous when a few hours into this year’s competition we still didn’t know what our hack would be. We knew we wanted to build some kind of bookmarklet game where the player could “destroy” the website - maybe multiplayer Worms were the text on the page would be the destructible terrain? This proved to be too difficult because each player’s browser rendered the page differently. We finally decided to make something like Katamari Damacy, and spent the next ~18 hours frantically writing javascript. Let me tell you, trying to write linear transforms to make something look like it’s spinning around a ball is not fun at 4:00am.
By noon Saturday, when the competition ended, we had the bookmarklet done, along with a simple multiplayer where you and your friends could all play on the same page. And we won!
When did Katamari bookmarklet become available publicly?
When presenting the hack, we put it on a micro EC2 instance on AWS. We didn’t share the link except when presenting at the competition. The Friday after the competition, we saw that that gamepro had an article pointing to our server. The article was picked up on Reddit and the server got hammered to the point were it was taking ~10 seconds for the page to load. We all had class and couldn’t really do anything until that night. It was pretty surreal logging into the server and seeing over 1.5 million page loads in the apache logs. Our Friday night consisted of frantically moving the page to Amazon S3.
Do you track how many people visit the Katamari website? If so, how many?
After we switched to S3, we added Google Analytics on just the homepage. We’ve had over 750,000 uniques and 1,000,000 pageviews [see attached]. We don’t collect any data on how many times the script has been loaded (ie how many times people have used the bookmarklet).
With what frequency do you update Katamari?
We updated a few times in March, right after the competition. We haven’t updated since.
Are there any other cool “Katamari” like bookmarklets you plan to release?
Not in the near future :).
Do you have a personal site you’d like to share?
http://students.washington.edu/acleone/
Thank you for your time, Alex.
Thank you!
Learn more — about the Katamari Hack at it’s official website.
