Macabre Pool

Macabre Pool

This is the result of my fascination with skeletons* and me wanting to learn about Box2D in Javascript.

Since everything is randomised, you might get two big skeletons or a big one and a small one, or two small ones. They sometimes look like they are alive, with spasms and all, while they jump around the screen with the head in their hands. It’s very creepy.

Try it if you dare!

Box2DWeb is quite funny; I should do more stuff with it. I had tried to learn Box2D.js before, without success, but this time I stumbled upon Seth Ladd’s series of brilliant Box2DWeb tutorials, and you can deduct the rest.

The graphics are SVG based. I drew them all with Inkscape. I then use CanVG for loading SVGs into Canvas (everything is rendered into a big Canvas), as there isn’t a native SVG method for getting a bitmap from a rendered SVG object. Mr.doob suggests using SVG directly instead of going through canvas, because it might be faster. I guess I’ll try that with something else; for now I’m just rendering to bitmap/canvas once, so it’s a relatively low overhead. I also cache the SVG to Canvas results, so even if you request the same asset several times it won’t be read and regenerated each time.

Finally I also used a couple of web fonts and some CSS 3 stuff such as box and text shadows, which can be finally used without -moz or -webkit prefixes (at least with Chromium 15 and Firefox 7). Pretty cool!

And of course a huge source of inspiration was Mr.doob’s Ball Pool!

* Proof and proof of my skeleton-mania.