A merry mathematical fractal Christmas

Friday 20th of December 2013

IFS morph

As a special treat for Christmas, here's something fun to play with. It's Lenny!

Lenny was my final year project at university. It generated and then morphed fractals based on an iterated function system.

The image above was generated by the original program, which was written in C as a Windows application that, despite being written for Windows 95, still runs entirely happily today on a Windows 7 machine. A while back I had some spare time and wondered if it would be possible to re-develop Lenny for the web, using JavaScript and the HTML5 canvas element. And here it is! Instructions and detail below.


Pick a fractal to start, then choose another to morph


Number of dots to draw in a fractal
Effectively changes the 'density' of the fractal
Milliseconds between each animation frame
Number of animation frames

I've set the default options to be friendly to slower computers, but if you're running Chrome and your machine's got a decent bit of power, I recommend upping the iterations to as much as 30000, drop the animation speed to 0 and set the animation frames to 100. Or just play around and see what it'll do. Fern to circle with these settings is particularly good.

So what is it?

If you crave the mathematical detail (and why wouldn't you, it's fascinating) wikipedia has a great article on iterated function systems and how they work, but basically, the images above are generated by a surprisingly simple bit of maths that acts on a simple set of numbers. If you change the numbers, you change the fractal's shape. So if you have two fractals, each represented by a set of similar numbers, it's possible to generate all the fractals that exist between them, by working out what the numbers would change by in each step. And that's what Lenny does.

The original version was a little different. It allowed you to create your own fractals by changing the numbers, as well as choose from a set of presets. You could then prepare a longer animation by chaining together a sequence of these fractals. I vaguely remember my lecturers being impressed with it, but since then I've seen this same kind of thing done in screensavers, so I'm guessing it's a bit less groundbreaking these days, but I still think it's fun. I might add in some of that old functionality one day, but not right now.

In JavaScript you say?

HTML5 canvas is a thing of interest to me, although I fear it'll never take off in mainstream usage because all the code that runs on it is JavaScript, and therefore visible to public scrutiny and of course copying. It serves usefully enough here though. It's a slightly sobering thought that it took me almost a year to write the original (in considerably more lines of code) but only a few evenings to write this one. Admittedly I was able to copy my original code, but I think it still shows how my coding has improved since then. Also that Windows 95 was a horrible environment to develop for.

As with most of the code I do for fun, it's a little rough round the edges (there's still a few bugs I need to iron out - I'm still not certain it's matching up the sets based on closest probabilities yet). I'll put it on github when it's good enough.