Turn any page into Katamari Damacy

Turn any page into Katamari Damacy(kathack.com)

271 points by pinguar 15 years ago | 33 comments

axylone 15 years 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?

troutwine 15 years 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.

risotto 15 years ago | |

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

axylone 15 years ago | | |

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

dustingetz 15 years 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-...

seancron 15 years 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.

axylone 15 years 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

_b8r0 15 years 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.

Esseb 15 years ago | |

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

joshes 15 years 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.

iamdave 15 years ago |

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

mckoss 15 years ago |

Awesome! Even works on an iPad.

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

http://erkie.github.com/

kenkam 15 years 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!

hammock 15 years ago | |

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

Gatsky 15 years ago | | |

If you uncheck realistic pickups, images stick much better.

IChrisI 15 years 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.)

axylone 15 years 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.

Inviz 15 years 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.

Gatsky 15 years ago |

Multiball works!

sh1mmer 15 years 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.

Banekin 15 years ago |

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

hammock 15 years 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.

ojbyrne 15 years ago | |

Ctrl-Click == right-click.

aes 15 years 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);

_frog 15 years ago | |

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

BrianHV 15 years 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

Banekin 15 years 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?

eof 15 years ago | |

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

eof 15 years ago | | |

why the downvote?

sscheper 15 years ago |

#winning

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

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

* 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