It seems I've not got around to much writing recently. This is partly because I've been quite busy at work (conference paper - yey), but also because I had something else to get distracted with. Recently, there has been a lot of interesting distraction in my lab with people making fractals, and various other patterns, so I had a lot of fun getting involved with all that - here are some of the results.
It all started when my friend Jack, in a bout of epic procrastination, created a rotating fern-like fractal. We all spent ages gazing in wonder at it - it's mesmerising, especially once he altered it so that its acceleration changed randomly, meaning its was smooth but still totally unpredictable. There are videos of it here.
So, a bit of background to how this works: it's a recursive drawing algorithm, which basically means that at each stage, the algorithm does something, then calls itself, and so on indefinitely (up to a certain limit). The basic step is to "draw two branches", where to draw a branch, it draws two more branches. The interesting patterns result from the angle between subsequent branches being passed down the levels, at each level being relative to the one before, which is what leads to the curling effect. It's quite interesting to play with the different parameters, such as the ratio by which the lines get shorter at each level (turns out a scaling of 0.7 is almost always the best; yes we tried the golden ratio.)
In re-writing it I played with a few other things too. Now the speed of the two main branches vary according to sinusoidal functions, so they reliably speed up, slow down, and change direction. This means there's actually no randomness at all, and yet complex and seemingly unpredictable patterns emerge, and you'd have to watch for a long time until it repeats. Mmmm complexity. The main thing that makes this version look nicer is the colours: the colour of each branch is now determined by its angle, by mapping it to a hue wheel. (Briefly: colour can be represented by hue, saturation, and lightness, where hue is a value that cycles from red, through yellow, green etc, finally via purple back to red. Saturation controls how intense the colour is, and lightness is where it sits between black and full colour).
ClocksAt some point someone mentioned that the two branches rotating around each other at different speeds are a bit like the hands of a clock... and this gave me an idea. Could it be turned into a clock? Well, first it would need three hands, to do it properly and actually see the motion - fortunately this is pretty easy, and in fact the number of branches at each level was just a parameter in the original code. Generally more than two branches just looked a mess though, so for the clock version I altered the length scaling to thin it out. Secondly, the hands on a clock are different thicknesses and different widths - this required a few more parameters to be passed down the levels, to change length and width of the three branches independently (and to make the lines thinner as they get shorter, lest it become a big mess of overlapping lines). That, plus the hour-ticks, and the Fractal Clock is born:
Again, in this clock, the colours are determined by the angles, where red is up (so the wheel shown above is rotated, but that's because having red=0 at the top makes sense on a clock face). In fact, this means you could tell the time simply from the colours of the three main hands, without bothering to look at their orientation... and this leads inevitably to this, the Hue Clock:
Yes, you can really tell the time from it. Imagine the hue wheel - red corresponds to straight up, so if the hour panel (the left-most) is red, it means it's midnight (or mid day, it's a 12 hour clock). If the second panel is greeny-yellow, it's quarter past the hour; and the third panel goes all the way around the hue wheel once per minute. Now we can finally tell the time with ease! (As I write this it's lawn green past cyan - that image was taken at orange past cyan, earlier in the hour)
Where next for the clock? Is this as minimalist as it can be? Not quite... see, the 'coordinates' of the current time (hour,minute,second), requires three variables. A colour, in the red-green-blue colour space (which is what's used to specify all the colours), needs three variables... you can see where this is going. So here it is, the RGB clock.
Admittedly, it's slightly harder to read the time off it. Basically, the redder it is, the closer it is to midnight (or mid day); the green component gradually increases over the hour, flipping back to no green at :00 (unlike hue, channel brightness is not cyclic); and if you watch it over the course of a minute, the blue component will gradually increase, before going back to 0 at the start of the next minute.
Now that I'd made pretty much the most minimalist clock possible, I moved back to other uses of the fractal. Well, it could have just been a single pixel, but that wouldn't look so good. I probably should have just made it the web page background and got rid of the canvas tag... I'm sure someone else can do that if they want.
Here's the 3D environment. Basically you can walk around the grid, see some simple, static fractal trees, and play with some particle effects (easy and fun!).
It's quite tempting to turn this into some sort of 3D shooter. Not now.
The simplest thing is to simply put the 2D fractal into some plane in this space - which is quite nice in itself, since then you can walk around and behind it and view it edge-on (this is still possible in the full implementation below).
The next step was to generalise the fern fractal to 3D. This actually required only a few changes: the main one is that the 2D version needs one joint angle per branch, while in 3D, it needs 2 (angle in the plane, and angle out of the plane, is one way to think of it). These two angles define a vector in 3D, which along with a length, specifies the start and end of each line in 3D space. This means that the fern is now fully in 3D, branching out into a volume of a (hemi)sphere, not just a circle. It looks a lot more complicated (it's still completely deterministic), and it's harder to understand what's happening from one view, so it helps to walk around. Controls are explained on the web page, allowing you to change the colour and speed (since there are two angles, one maps to hue, the other to saturation, giving each 3D line a unique colour).
That's basically it for the fractals and clocks - I think I've taken them as far as I want to for now (I do actually have work, see). Play with the code and see what you can do. People running Windows can set these to the desktop background (as the active desktop) - having the fractal or hue clocks as the background would be kind of awesome, if not a bit CPU hungry. Android coders might want to make a Hue Clock widget for a phone. It should also be possible to turn these into screensavers, using OpenGL in Linux (my first though on seeing Jack's fractal was "screensaver!" but I don't have the time to get into it right now). Then there's the potential for other types of fractal, or even more dimensions. I'd be interested to know if anyone gets some other adaptations running...