Tag Archives: svg

On CSSConf + JSConf 2014

TL;WR*: a mostly social event, great for meeting the authors of those modules you see scroll past when you run npm install and it installs half of the internet. Also, lots of presentations on somewhat hipster stuff which I not always understood, but that’s great–I like not understanding it all from the get go, so I can learn something. And some discussion about physical and mental health and better community building and other important non purely technical stuff that usually never gets the chance to be discussed in tech conferences.
Continue reading On CSSConf + JSConf 2014

What will 2013 bring you?

What will 2013 bring you?

This is a little funny toy? experiment? thing? that I’ve built with three.js to wish you all merry festivities everywhere and also maybe even make you smile. Or laugh, which would be even better!

I wrote some more details on the project page, and I’d rather not repeat myself, so pop over there if you want to have a look 🙂

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.

Programmatically building drawables

There’s something that really bothers me and it’s doing things that a computer should do. One of these is saving different versions of drawables, in low, medium and high resolutions, for the drawables-ldpi, drawables-mdpi and drawables-hdpi folders respectively.

Coincidentally, I found a couple of weeks ago that the wonderful Inkscape accepts command line parameters and thus can be used for batch processing files.
Continue reading Programmatically building drawables