[Update: I have updated this application with new features. See here.]

An amazing array of images can be generated by the Fractal Flame algorithm, invented by Scott Draves. Click on the image below or here to open an HTML5 canvas application featuring my simplified implementation of this algorithm, and read below for more information on the various settings, along with a general description of the basic algorithm.

Download

The complete code for all of the above examples can be downloaded here: ChaosGame.zip

About the code

The Fractal Flame algorithm is an advanced form of the Chaos Game algorithm, and it is described carefully in this well written article coauthored by Draves and Erik Reckase. I will refer you to that article if you are interested in understanding the details of algorithm.

The basic idea behind the algorithm is to start with a random point in the unit square, and then to repeatedly apply a randomly chosen map from a small collection of self-maps of the plane. (The next map can be thought of as being chosen by a roll of a die, hence the word “game” in the Chaos Game algorithm.) One can think of the maps as causing a particle to hop around the plane. As this particle moves around the unit square, we color the points that are visited along the way. After a very large number of points are computed, we stop the iteration and then render the image in such a way that more frequently visited points are shown with a greater alpha value, thus exhibiting stronger colors where the cloud of points is denser.

A color is associated to each of the maps. As the particle moves around creating the cloud of points, its color is continually recomputed as the average of its current color and the color of the most recently chosen map. In this way, more recently applied maps have a greater effect on the particle’s current color.

When drawing a colored point to the canvas, the code computes a color which is a weighted average of the particle’s color and the color currently showing at the visited point, where the weight for the particle color is one and the weight for the current color is given by how many times a point has visited that spot. In this way, the final color showing at a given pixel will be an equal blending of all the colors that have been drawn to that pixel. (I am not sure if this is the “official” fractal flame coloring method, but I have found that this blending produces the smoothest colors.)

The simplified algorithm

The full algorithm described by Draves and Reckase in the article linked above makes use of affine transformations which are further “tweaked” by non-linear maps. I have only implemented affine transformations, plus one non-linear “bubble” map which can be turned on or off. An amazing variety of images can be created from affine transformations alone.

An affine transformation of the plane is a map which takes the point (x,y) to the new point (ax + by + s, cx + dy + t), where a, b, c, d, s, and t are some constants. Such a map can be thought of as being broken down into four geometric operations:

1. The points are scaled independently in the x and y directions,
2. The plane is skewed,
3. The plane is rotated about the origin,
4. The plane is translated (shifted) to a new position.

My HTML5 canvas application makes use of randomly chosen affine maps and colors, but in such a way as to prevent points from being mapped outside of the unit square. Although you don’t have much control over these maps, you can use the checkboxes to place limits on how these maps are chosen. The shorter vectors setting causes more scaling down (on the average), and there are also checkboxes to cause reduced rotation and skewing. The no reflection setting prevents negative scaling (which has a mirroring effect).

Although the main maps are affine, I have included one nonlinear map for you to experiment with. When activated, this “bubble” map is applied after each iteration, and it has the effect of expanding the center of the plane while squeezing the edges inward.

Note that the fractal can be rendered with randomly chosen colors or grayscale, and that there is an option to apply a greater gamma correction (which will cause a brighter fractal overall).

Number of points

The application can compute a varying number of points which I have vaguely described as “lots”, “lots and lots” or “browser-crashing.” These numbers are in fact one million (1 x 10^6), 10 million, and 100 million respectively. At higher settings, your browser may pop up a warning dialog alerting you of a long-running script. There are probably ways for me to break up the code in order to avoid this dialog, but I have decided not to worry about it. The warnings can be safely ignored while the computations finish.

Exporting

A button has been included which allows you to export the image. The image will open up in a new window, and will in fact be twice as large lengthwise. You may also wish to open up this image just to see the fractal in a larger size. To make it look more mathematical, you have the option of displaying at the bottom of the image a list of the maps which were used to create it. The affine maps are each listed in matrix format as two rows of parameters [a, b, s], [c, d, t] (as described above).

Suggestions for use

Since the “browser-crashing” setting takes a long time to render, I suggest you keep the number of points on the lowest setting while repeatedly clicking the regenerate button until you find a general shape that you like. Then to see the fractal in a higher quality render, be sure to check the fix these maps box and fix these colors box (if you’re happy with the colors) to preserve the settings, select a larger number of points, and then regenerate the fractal. Again, don’t be alarmed if a dialog warns you of a long-running script; in my testing it always seemed to be finish in under a minute.

I find that the best fractals are created with less skewing selected. This is because a highly skewed square is greatly reduced in area, and the associated maps cause the fractals to shrink down to thinner sets. But experiment with all of the the settings.

Enjoy!

Although you don’t have a lot of control over the fractals, you can choose which ones you want to keep, and that is where your creative eye is required. It can be kind of fun clicking the regenerate button repeatedly hoping for a happy accident to occur. In my testing I must have generated thousands of fractals, and quite a number of them I saw fit to save. I put together a few of these fractals in this flickr set.

I’ll certainly be adding more features to this fractal application. I know it would be nice to be able to choose your own colors, to have more precise control over the maps, and to be able to experiment with more nonlinearity. I am happy to hear any suggestions you may have!