In detail: Mathmos (Part II)
Last summer, Mathmos asked us if we fancied doing something for the 45th birthday of their iconic Astro Lamp. We felt that a natural fit for this would be a screen saver that simulated the lava lamp.
From a coder’s perspective, this project had two interesting problems to solve. Firstly, we had to consider the physics at work inside a lava lamp in order to create a realistic simulation. Secondly, once you’ve figured out where your blobs are, their sizes and how they’re moving, you need to draw them in a satisfyingly blobby way.
This second post will cover how I went about drawing those blobs. You can read Part I here.
The Interesting Bit II: Drawing blobs
Drawing blobby shapes on a screen is a well established area of computer graphics theory: they’re called metaballs and the technique was invented by Jim Blinn in the early 1980s and popularised through the demoscene in the 90s. As a side note, if you’re unfamiliar with said scene and even remotely interested in creative computing, you owe it to yourself to get acquainted. Here’s an example of a production particularly rich in metaballs:
Anyway, the general theory goes something like this:
If you’ve got a collection of centres of force (say, the blobs’ centres of gravity), and a bunch of stuff attracted to those centres (say, wax), then you get shapes forming as the stuff collects around those centres. At a certain distance from any given centre, its attractive force isn’t enough to hold the stuff in place: this threshold is where the surface of your blobs form. In computer graphics, this is called an isosurface: it’s a surface which runs through space, tracing an edge where the attractive force is constant at a certain value.
If you only had one centre in a system, this method would end up drawing a perfect circle (the stuff is attracted to that single, lonely centre equally in all directions), but as you add more centres to a system, you get blobby shapes forming as the multiple attractive forces alter where in space that boundary falls.
There’s a number of different ways you can achieve this effect in Flash. By far the easiest is cheating it with BitmapFilters, but this wasn’t going to work for our purposes; it’s fine when you’ve only got a small bitmap to render, but we needed to draw metaballs across the whole screen. For that matter, any method which involved drawing a bitmap of the blobs wasn’t suitable for that same reason.
That meant that I’d have to find a method that used vectors to trace the edges of the blob shapes. I started by looking at this method and its AS3 port, but still wasn’t getting the speed I needed (that, and the fact that I couldn’t even begin to understand the Clever Maths at work, so didn’t stand a chance at optimising the code and bending it to my will).
The next method I tried was marching squares. This method works by breaking down your drawable area into a grid of cells and sampling groups of four cells at a time. By calculating which of those cells fall inside of the isosurface, you can both draw an approximation of the shape of the surface across those four cells and figure out what direction your sample window should move in to continue to trace that surface.
You can see an example of the simulation running with a marching squares renderer here. While it was pretty quick, it didn’t give us visuals of nearly a high enough resolution, and experiments fitting a curve through the points generated by the trace didn’t work very well. I decided to prototype my own method in Processing.
The principle is pretty simple: start at a centre of mass, then work outwards until you hit the surface threshold. Once you’re at the surface, take a 90° turn and start to trace the edge of the surface by taking a step forward, then sweeping left and right until you hit the surface again. Repeat until you get back to where you started. I called this the ‘border patrol’ method.
This worked pretty well to a point; it was very fast, and easy to understand. Unfortunately, it was also quite temperamental. Getting the method to recognise when it had got back to its starting point proved tricker than it had any right to be, and it wasn’t very good at turning around sharp, acute corners.
In the end, we simply ran out of time and ended up porting and modifying this method, published by Den Ivanov, which I suspect is a clever variation on marching squares.
This is my biggest regret from the project; I’d really like to have continued to develop the border patrol method, get it bug-free and stable enough to use. However, sometimes you reach a sensible limit where you have to recognise that you’re sinking a disproportionate amount of time and effort into a problem and go with what works, even if it’s not exactly what you wanted.
That said, I’m still proud of the final product, the client were happy and it was a hugely educational project to work on. Maybe one day I’ll go back and finish off border patrol properly ;)
Download the screensaver yourself from virtualastro.mathmos.com