Blobular: An SVG experiment

» Blobular: SVG blobiness «

(Firefox and Opera only)

SVG (Scalable Vector Graphics) has long been a tantalising mirage on the horizon for a lot of web developers. The promise of a fully-featured, open source markup format for vector graphics on the web can make your mouth water (if you know your cubic splines from your quadratics). However, the reality is a poor substitute for the dream.

I remember promising Dean Jackson at Web Essentials 05 that once Firefox natively supported SVG, I'd try and do something with it. Well, Firefox has supported SVG since version 1.5 (albeit in a rather limited fashion), so it was about time to make good on my promise to Dino.

At Webjam 2 I presented a visualisation engine for the SMS voting system they used on the night. It was based on blobs. Because the Webjammers wanted an anonymous voting system, I figured that using the area of the blobs would give people an idea of the number of votes in play – as well as their proportionate distribution – without giving away who was actually winning. Throw in some funky animation and you've got yourself a neat little screensaver.

That description doesn't mention the nightmarish trigonometry that I had to excavate from the recessed of my brain in order to figure out all the intersecting circles, smooth curves, areas, angles and transformations.

As my first foray into real SVG development, that project had quite a steep learning curve. But the biggest thing I learnt was that GOD IT'S SLOW! (If you didn't realise that when your computer crashed after you clicked on the link above). This is partially Firefox's fault: its redrawing of SVG is pretty awful and is dependent upon a lot of factors including operating system (Windows is superior), shape complexity, number of shapes on the stage, size of the canvas, and how much is going on at any one time. SVG has some native animation capabilities (SMIL-style) that are meant to be pretty nifty, but the Mozilla developers neglected to implement them, so any animation that you want to do has to be done using the JavaScript time-delay tactic.

I happen to think that the voting system's pretty cool (it animates votes arriving in REAL-TIME when people SMS in!!!), but it doesn't have much appeal outside of a Webjam event. So, I thought I'd adapt the blob engine for something a bit more fun.

And that's how I ended up with Blobular. Create mini bloblets, move them around, merge them together, and make pretty blob shapes, with a couple of customisable variables. It's your own malleable lava lamp.

Because most of the animation in Blobular is user-driven, i.e. you're dragging blobs around and making them separate by hand, the performance of the SVG actually feels a lot better than the computer-driven animation of the voting system. I'm not sure whether this is just a pereceived improvement, or whether Firefox actually does handle event-driven animation better than setTimeout. At any rate, it's probably a good sign that there'll be less splash screens and more interface goodness where SVG is concerned.

Safari does support SVG if it's in its own document, but it doesn't currently support inline SVG on an XHTML page (which I've used here), so Blobular won't work in that browser. It's restricted to Firefox 1.5+ and Opera 9+. (Surprise! I only had to spend 10 minutes getting it to work in Opera!)

Blob away!

Categories

svg, javascript, experiment, webjam