Blobular: An SVG experiment

18 April 2007

25 comments

A Blue Perspective: 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

, , ,

Comments

  1. 1/25

    Dan Webb commented on 18 April 2007 @ 06:51

    Nice work, mate. That's wicked.

  2. 2/25

    Daniel Morrison commented on 18 April 2007 @ 07:37

    Agreed. Very impressive.

  3. 3/25

    Anson commented on 18 April 2007 @ 08:06

    I heard there's a single Flash command that creates this application, submits your upcoming tax return and then mixes you one of those girly cocktails you go for. Probably should have gone that route. But, you know, I'm just saying.

    BTW, did you experiment with Canvas to see how it performed compared to SVG?

  4. 4/25

    Scott G commented on 18 April 2007 @ 09:13

    That's pretty sick Cam! Admittedly I can only entertain myself 'blobbing' for a few minutes, but it makes me sense the trigonometric pain you must have endured.

  5. 5/25

    Andrew K. commented on 18 April 2007 @ 10:32

    I agree with the spam-peddler. Watches. Yeah.

    Anyhoo, sweet maths action nerdlinger ;)

  6. 6/25

    Cheryl commented on 18 April 2007 @ 11:14

    Trigonometry? Wow I was in dummy maths and didn't get further than Pi... and all those Xs and Ys adding up to C, but I never figured out why.

    Anyway replica rolexes. Yay.

  7. 7/25

    Dmitry Baranovskiy commented on 18 April 2007 @ 12:17

    I salute you Cameron.
    It looks like you have heaps of free time :)

  8. 8/25

    Robin commented on 18 April 2007 @ 12:45

    Great example of what can be done with SVG. I've always meant to take a look at SVG but never got into it.

    Oh, and here on Firefox 2.0.0.3/Mac OS X 10.4.9, I didn't notice any slow response times. It was pretty snappy. Worked great.

  9. 9/25

    The Man in Blue commented on 18 April 2007 @ 17:44

    Anson: I did investigate Canvas, but didn't go as far to implement anything in it.

    It looks a bit annoying in that to create animation you have to clear the canvas and redraw everything, whereas in SVG non-animated objects just remain on the canvas while active elements change.

  10. 10/25

    Bramus! commented on 18 April 2007 @ 19:47

    Now that's ... really impressive! WOW!

  11. 11/25

    Daniel commented on 18 April 2007 @ 20:24

    I’m very impressed. Kuddos. The Auto-join effect and shape morphing looks pretty smooth and cool.

  12. 12/25

    Mag commented on 18 April 2007 @ 22:34

    Real SVG development still has some way to go, I guess.

  13. 13/25

    Tim Lucas commented on 18 April 2007 @ 23:52

    Noice one! It's cool to see something more general being spun from from our little SMS toy.

  14. 14/25

    Nathan commented on 19 April 2007 @ 04:17

    In the newest WebKit, the large circle disappears on click with the text.

    I hope the implementations of svg are not that much different.

  15. 15/25

    Jason Roberts commented on 19 April 2007 @ 09:24

    Very cool! The animation is so clean that it looks like Flash.

  16. 16/25

    Alexander Fairley commented on 19 April 2007 @ 11:46

    Hey, I was poking at the webjam page with firebug, and I couldn't see the svg dom at all. Where's it hiding?

  17. 17/25

    The Man in Blue commented on 19 April 2007 @ 11:49

    The SVG on the Webjam voting app is embedded, so you probably can't see it.

    On Blobular I changed it to inline SVG.

  18. 18/25

    James Oppenheim commented on 19 April 2007 @ 23:10

    Absolutely amazing. Could be the start of a funky mind mapping app. Alternatively, building site maps could turn into a fun task using Blobular. Keep up the great work.

  19. 19/25

    Mike commented on 20 April 2007 @ 13:29

    Canvas ended up working very well for us at work. It's definitely quick, though it can't be exported and saved like SVG can.

    http://ejschart.com/demo.php

  20. 20/25

    Lachlan Hardy commented on 20 April 2007 @ 16:59

    Sweet work, Cam!. Glad to see blob mojo continues

    Alexander, we're re-vamping the Webjam site to include voting results better (or at all), but the animation really only works with the real-time data. That said, you can get a fair idea from Cam's link above. It's just damn cool!

    Cam, the best bit was using this at WebDU and watching all the Flash guys break their brains when they realised you hand-coded it! ;)

  21. 21/25

    Dmitry Baranovskiy commented on 23 April 2007 @ 15:13

    SVG should be hand-coded! Flash sucks.

  22. 22/25

    Dustin Diaz commented on 25 April 2007 @ 06:13

    Yeah, this looks like it could be done in canvas as well, but Cam makes a good point - you'd have to constantly clear the canvas on every redraw.

  23. 23/25

    Denise commented on 25 April 2007 @ 14:31

    More phones need to be SVG compatible before SVG takes off.

  24. 24/25

    Johan commented on 26 April 2007 @ 21:58

    SVG distilled ... Here is my entry: http://zoic.be/websites/contests/

  25. 25/25

    Tomek commented on 30 April 2007 @ 21:53

    Brilliant idea its reallly great example of what can be done with SVG. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. Greetings

  26. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed