Turn any page into Katamari Damacy (opens in new tab)

(kathack.com)

271 pointspinguar15y ago33 comments

33 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.

risotto15y ago

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

axylone15y ago

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

1 more reply

dustingetz15y ago

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-...

seancron15y ago

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.

axylone15y ago

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

_b8r015y ago

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.

Esseb15y ago

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

joshes15y ago

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.

iamdave15y ago

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

mckoss15y ago

Awesome! Even works on an iPad.

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

http://erkie.github.com/

kenkam15y ago

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!

hammock15y ago

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

Gatsky15y ago

If you uncheck realistic pickups, images stick much better.

IChrisI15y ago

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.)

axylone15y ago

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.

Inviz15y ago

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.

Gatsky15y ago

Multiball works!

sh1mmer15y ago

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.

Banekin15y ago

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

hammock15y ago

??? 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.

ojbyrne15y ago

Ctrl-Click == right-click.

aes15y ago

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);

_frog15y ago

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

BrianHV15y ago

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

1 more reply

Banekin15y ago

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?

1 more reply

eof15y ago

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

eof15y ago

why the downvote?

sscheper15y ago

#winning

j / k navigate · click thread line to collapse

33 comments

axylone15y ago

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?

troutwine15y ago

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.

risotto15y ago

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

axylone15y ago

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

1 more reply

dustingetz15y ago

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-...

seancron15y ago

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.

axylone15y ago

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

_b8r015y ago

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.

Esseb15y ago

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

joshes15y ago

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

iamdave15y ago

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

mckoss15y ago

Awesome! Even works on an iPad.

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

http://erkie.github.com/

kenkam15y ago

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!

hammock15y ago

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

Gatsky15y ago

If you uncheck realistic pickups, images stick much better.

IChrisI15y ago

axylone15y ago

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.

Inviz15y ago

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.

Gatsky15y ago

Multiball works!

sh1mmer15y ago

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.

Banekin15y ago

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

hammock15y ago

??? 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.

ojbyrne15y ago

Ctrl-Click == right-click.

aes15y ago

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);

_frog15y ago

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

BrianHV15y ago

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

1 more reply

Banekin15y ago

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?

1 more reply

eof15y ago

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

eof15y ago

why the downvote?

sscheper15y ago

#winning

j / k navigate · click thread line to collapse