With the focus I’ve had on finishing out some of the fractal rendering code on the site, I’ve been going back and looking at some of my earlier stuff like the animated fractal demo. (This is not just a gratuitous link to some of my old demos, trust me) I’ve been leaving it open on my second monitor while I work, and it reminded me how much I like the motion.
The functions defining these images consist of 3 parameters: a central point, a rotation angle and a scale factor. My first attempts at making these things fly across the screen involved varying the position, angle and scale factors sinusoidally with random periods. It got the images moving and if you waited long enough, it was guarantied to trace out a significant volume of parameter space. However, it just ended up looking like it was constantly spinning and slowly changing shape.
My next step was to interpolate between randomly selected points in parameter space, which worked to make the motion more interesting, but it still would shrink to a point whenever it got too close to the origin and the scale factors were too small. Adding a constraint to the motion to put a minimum bound on the scales ended up fixing it and giving it the current zoomy, swooshy feel it has to day. That and adding a random factor to the time between random points along with a random pause at the point.
I use the same algorithm, with 3 dimensional fractals in the 3d bubbles demos here and here. Man, I just loaded the three.js version for the first time in a few months, and it is really fast with the latest version of chrome.
Now that I have some more experience at solving differential equations in Javascript, it might be fun to model the changes with a repulsive force at the origin and fade in attractive points at each of the destinations.
Leave a Reply