Turn any page into Katamari Damacy | Hacker News Reader

Turn any page into Katamari Damacy

kathack.com

271 pointspinguar33 comments

Woo - nice to see this on HN (I'm one of the creators).

EDIT: We're serving this off ec2 + apache. It's all static html + js. Any quick tips for speeding things up?

Unless you have a very specific need, consider switching to a web server more explicitly designed for static content. Nginx takes minutes to install and configure.

If it's static, serve it directly from S3, and turn on cloudfront for even better delivery.

ok, I think we managed to switch http://www.kathack.com over to S3. Thanks for the tip!

No problem. Love the script.

from my understanding, S3 optimizes throughput but not latency. I'm not surprised that his performance serving from S3 is perfectly fine, but I think the "answer" is to skip straight to CloudFront. CloudFront can mirror directly from your appserver, or from S3, it doesn't matter.

update: did a little googling, and found only anecdotal evidence that latency to S3 is fine but not awesome:

http://www.cloudclimate.com/s3/

http://www.codeswimming.com/blog/2010/04/amazon-s3-and-cloud...

http://www.slideshare.net/ehwinter/using-amazon-cloud-front-...

I hope you don't mind, but I just mirrored it on Github (https://github.com/seancron/kathack). You can use the following javascript to load it from the mirror.

    javascript:var i,s,ss=['https://github.com/seancron/kathack/raw/master/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);

P.S. If you do mind, just let me know and I'll take it down.

Ok, we switched everything over to S3. Everything should be much faster now.

Looks like we have a ~275MB access.log from before the switch. Over a million requests!

   $ wc -l access.log
   1115447 access.log

To quote the King of all Cosmos: "We are moved to tears by the size of this thing."

Really well done, I love it. The only shame was that the music didn't work on Safari, but maybe it's just how I roll.

This will work in Opera too if you add -o- to the POSSIBLE_TRANSFORM_PREFIXES array.

I thank you from the bottom of my heart for helping me fall into a haze for about 45 minutes. That was remarkably ingenious.

Rolling around on a huge page like the Wikipedia article for World War II (http://en.wikipedia.org/wiki/World_war_II) caused a pretty significant slowdown. Interestingly, once the ball got to the size to pick up larger images, the rest of the ball would clear and there would be a noticeable boost in speed. It was intriguing to observe the dynamics of the ball rolling on different sized pages.

I loved this a lot more than I probably should have.

Awesome! Even works on an iPad.

And if you like this, check out this other amazing bookmarklet game:

http://erkie.github.com/

This thing is hilarious! I love how this renders the picked up objects so well; it really shows if you try to pick up images! Nice work!

I didn't think it picked up images. I guess I needed to roll my ball a bit bigger before trying that!

If you uncheck realistic pickups, images stick much better.

This is amazing. I'm definitely going to keep this in my bookmarklets collection! That said, can you give us a way to re-generate the grid data? I want to roll up everything in Google Reader. (Maybe when the bookmarklet is run, if it's already active, re-generate the grid. It currently creates a second Katamari, which is also awesome.)

New update out: Now you can select controls (left/right click, or touch). Try running it twice, once with right-click, and again with left-click.

Also for dynamic pages, run the script after the content changes and click the "x", and the new content should be pick-uppable.

Very entertaining, especially when it picks up images. Too bad it loses them too fast. Can you please add an option to keep images for longer? I love Hitler spinning around.

Multiball works!

I helped teach and judge at about 10 of the Hack-U competitions while I was at Yahoo and it always amazed me how ingenius the students are.

Congratulations to the team on a great project and it's really nice to see how savvy about web technology the students at Wash-U are.

Is there any way to play this on a Macbook trackpad without connecting a USB mouse?

??? My macbook pro has distinct left- and right-click regions on the touch pad. It was still hard to do though without a mouse.

The easiest way I found was to just move the cursor where you want the ball to go, then right click. Repeat.

Ctrl-Click == right-click.

A Macbook user here as well. To try it out, I forked seancron's repository and changed the right mouse button to left mouse button. You have to avoid clicking on links, though.

  javascript:var i,s,ss=['https://github.com/anttisykari/kathack/raw/master/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);

On the multi-touch trackpad you can just click with two fingers.

To elaborate, I got it to work this way:

  * Hold two fingers on middle of track pad
  * Click thumb on bottom of track pad; katamari should start to move at this point
  * Release two fingers on middle of track pad
  * Use single finger to move cursor while still holding down thumb

Oh awesome, that worked beautifully. Thank you!

I tried that, but it works too slowly to continually press with two fingers next to the ball.

I meant is there a way to change the javascript to use a different button?

I can add that once we get the server back to a reasonable speed.

move the mouse to wear you want the ball to move, then hold down right click.

why the downvote?

#winning

Reply on news.ycombinator.com