Metablobs!

Following on from my last post, it occurred to me that there were a couple of problems with plain metaballs using BlendMode.ADD. Firstly circles are boring. What about having energy fields around other shapes? Secondly, although displaying metaballs using BlendMode.ADD doesn’t actually give you data about the perimeter of the blob.

In this example, I’m still using BlendMode.ADD to display the metaballs but this time I’m drawing the gradient field around a blob that is modelled by a ring of nodes connected by springs. This is similar to the way I created the Flash version of Loco Roco.

The edge of the blob is smoothed by using the node points as control handles in calls to graphics.drawCurve() and the anchor points as determined by calculating the mean between adjacent nodes. The gradient field is drawn by repeating the calls to drawCurve() and changing the line thickness to build up a gradient line.

What I ended up with is a really blobby simulation as each metaball is springing around instead of being a fixed circular shape. I also have access to a set of points which describe the edge of the blob so I could use this for collision detection or even having blobs join together into larger blobs if they get close enough.

This example also has interaction – you can grab the blobs and throw them around! Of course all this extra functionality comes at a price so the demo is quite processor intensive. The biggest bottleneck comes from having to draw each individual blob to a bitmap before applying a palette map and then drawing it again to a composite bitmap with blendMode.ADD.

Rather than building up the gradient field using the drawing API, it is also possible to use a blur or convolution filter which would have the same effect of decreasing the value of the pixels as they get further away from the edge of the source blob.

Click on the image to play with some metablobs

Metaballs With BlendMode.ADD

Metaballs are organic looking blobs and are often used to model fluid drops as they join together and pull apart. Usually a metaball is described as a source point with a field around it. As the field moves away from the point, the energy of the field diminishes. When you have several metaballs together, the energy at any given point is simply the sum of all the energies of the metaballs in the system at that point.

The edge of a metaball is linking together areas of the same energy, much like the contours on a map. It is these contours that give the metaball its distinctive blobbiness.

Here’s a quick example of what I’m talking about. Click on the image to watch the metaballs in action.

Click on the image to watch some metaballs in action

There are lots of methods for modelling metaballs in two dimensions. One of the best I’ve come across is this one which uses a very efficient method for determining the edge of the metaball and then tracing around that edge to define the shape.

An even faster method for displaying metaballs can be achieved by using BlendMode.ADD which does all the adding up of the energy fields for us. If you represent the energy field as a circular gradient starting with blue in the centre (0xFF) and going out to black at the perimeter (0×00) any pixel’s value in that circle will describe the energy of the field at that point. By overlaying these gradient circles with BlendMode.ADD, the blend mode sums the values of each pixel and displays the sum of energies at that point. All that’s let to do is apply a palette map to convert the blue energy field to something prettier.

The source code for the example is after the click. There are two classes, one controlling the simulation and the other describing each ball.

More…