speice.io/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx

---
slug: 2024/11/playing-with-fire
title: "Playing with fire: The fractal flame algorithm"
date: 2024-11-15 12:00:00
authors: [bspeice]
tags: []
---

Wikipedia describes fractal flames fractal flames as:

> a member of the iterated function system class of fractals

It's a bit tedious, but technically correct. I choose to think of them a different way: beauty in mathematics.

import isDarkMode from '@site/src/isDarkMode'
import banner from '../banner.png'

<center>
    <img src={banner} style={{filter: isDarkMode() ? '' : 'invert(1)'}}/>
</center>

<!-- truncate -->

I don't remember exactly when I first learned about fractal flames, but I do remember becoming entranced by the images they created.
I also remember their unique appeal to my young engineering mind; this was an art form I could participate in.

The original [Fractal Flame Algorithm paper](https://flam3.com/flame_draves.pdf) describing their structure was too much
for me to handle at the time (I was ~12 years old), so I was content to play around and enjoy the pictures.
But the desire to understand it stuck around. Now, with a graduate degree under my belt, maybe I can make some progress.

This guide is my attempt to explain fractal flames in a way that younger me &mdash; and others interested in the art &mdash;
can understand without too much prior knowledge.

---

## Iterated function systems

:::note

This post covers section 2 of the Fractal Flame Algorithm paper

:::

As mentioned, fractal flames are a type of "[iterated function system](https://en.wikipedia.org/wiki/Iterated_function_system),"
or IFS. Their mathematical foundations come from a paper written by [John E. Hutchinson](https://maths-people.anu.edu.au/~john/Assets/Research%20Papers/fractals_self-similarity.pdf),
but reading that paper isn't critical for our purposes. Instead, we'll focus on building a practical understanding
of how they work. The formula for an IFS is short, but will take some time to unpack:

$$
S = \bigcup_{i=0}^{n-1} F_i(S)
$$

### Fixed set

First, $S$. $S$ is the set of points in two dimensions (in math terms, $S \in \mathbb{R}^2$) that represent
a "solution" of some kind. Our goal is to find all points in the set $S$, plot them, and display that image.

For example, if we say $S = \{(0,0), (1, 1), (2, 2)\}$, there are three points to plot:

<!-- TODO: What is a stationary point? How does it relate to the chaos game? Why does the chaos game work? -->

import {VictoryChart, VictoryTheme, VictoryScatter, VictoryLegend} from "victory";
export const simpleData = [
    {x: 0, y: 0},
    {x: 1, y: 1},
    {x: 2, y: 2}
]

<VictoryChart theme={VictoryTheme.clean}>
    <VictoryScatter data={simpleData} size={5} style={{data: {fill: "blue"}}}/>
</VictoryChart>

However, this is a pretty boring image. With fractal flames, rather than listing individual points,
we use functions to describe which points are part of the solution.

TODO: Explain characteristics of the solution - fixed set

This means there are an infinite
number of points, but if we find _enough_ points to plot, we'll end up with a nice picture.
And if we choose different functions to start with, our solution set changes, and we'll end up
with a new picture.

However, it's not clear which points belong in the solution just by staring at the functions.
We'll need a computer to figure it out.

### Transformation functions

Second, $F_i(S)$. At their most basic, each $F_i$ is a function that takes in a 2-dimensional point and transforms
it into a new 2-dimensional point: $F_i \in \mathbb{R}^2 \rightarrow \mathbb{R}^2$. It's worth discussing
these functions, but not critical, so **this section is optional**.

In mathematical terms, each $F_i$ is a special kind of function called an [affine transformation](https://en.wikipedia.org/wiki/Affine_transformation).
We can think of them like mapping from one coordinate system to another. For example, we can define a coordinate system
where everything is shifted over:

$$
F_{shift}(x, y) = (x + 1, y)
$$

That is, for an input point $(x, y)$, the output point will be $(x + 1, y)$:

export const shiftData = simpleData.map(({x, y}) => { return {x: x + 1, y} })

<VictoryChart theme={VictoryTheme.clean}>
    <VictoryScatter data={simpleData} size={5} style={{data: {fill: "blue"}}}/>
    <VictoryScatter data={shiftData} size={5} style={{data: {fill: "orange"}}}/>
    <VictoryLegend
        data={[
            {name: "(x,y)", symbol: {fill: "blue"}},
            {name: "F(x,y)", symbol: {fill: "orange"}}
        ]}
        orientation={"vertical"}
        x={75}
        y={10}
    />
</VictoryChart>

This is a simple example designed to illustrate the principle. In general, $F_i$ functions have the form:

$$
F_i(x,y) = (a_i \cdot x + b_i \cdot y + c_i, d_i \cdot x + e_i \cdot y + f_i)
$$

The parameters ($a_i$, $b_i$, etc.) are values we get to choose. In the example above, we can represent our shift
function using these parameters:

$$
a_i = 1 \hspace{0.5cm} b_i = 0 \hspace{0.5cm} c_i = 1 \\
d_i = 0 \hspace{0.5cm} e_i = 1 \hspace{0.5cm} f_i = 0 \\
$$

$$
\begin{align*}
F_{shift}(x,y) &= (1 \cdot x + 0 \cdot y + 1, 0 \cdot x + 1 \cdot y + 0) \\
F_{shift}(x,y) &= (x + 1, y)
\end{align*}
$$

Fractal flames use more complex functions to produce a wide variety of images, but all follow this same format.

## Sierpinski's gasket

Using these definitions, we can build the first image. The paper defines a function system for us:

$$
F_0(x, y) = \left({x \over 2}, {y \over 2} \right) \\
~\\
F_1(x, y) = \left({{x + 1} \over 2}, {y \over 2} \right) \\
~\\
F_2(x, y) = \left({x \over 2}, {{y + 1} \over 2} \right)
$$

### The chaos game

import CodeBlock from '@theme/CodeBlock'

Next, how do we find out all the points in $S$? The paper lays out an algorithm called the "chaos game":

$$
\begin{align*}
&(x, y) = \text{random point in the bi-unit square} \\
&\text{iterate } \{ \\
&\hspace{1cm} i = \text{random integer from 0 to } n - 1 \\
&\hspace{1cm} (x,y) = F_i(x,y) \\
&\hspace{1cm} \text{plot}(x,y) \text{ if iterations} > 20 \\
\}
\end{align*}
$$

Let's turn this into code, one piece at a time.

First, the "bi-unit square" is the range $[-1, 1]$. We can pick a random point like this:

import biunitSource from '!!raw-loader!../src/randomBiUnit'

<CodeBlock language="typescript">{biunitSource}</CodeBlock>

Next, we need to choose a random integer from $0$ to $n - 1$:

import randintSource from '!!raw-loader!../src/randomInteger'

<CodeBlock language="typescript">{randintSource}</CodeBlock>

Finally, implementing the `plot` function. Web browsers have a [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
we can use for 2D graphics. In our case, the plot function will take an $(x,y)$ coordinate and plot it by
coloring the corresponding pixel in an [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData):

import plotSource from '!!raw-loader!./plot'

<CodeBlock language="typescript">{plotSource}</CodeBlock>

import Playground from '@theme/Playground'
import Scope from './scope'

import chaosGameSource from '!!raw-loader!./chaosGame'

<Playground scope={Scope} noInline={true}>{chaosGameSource}</Playground>

<hr/>

<small>
Note: The image here is slightly different than the fractal flame paper; I think the paper has an error,
so I'm choosing to plot the image in a way that's consistent with [`flam3` itself](https://github.com/scottdraves/flam3/blob/7fb50c82e90e051f00efcc3123d0e06de26594b2/rect.c#L440-L441).
</small>

## Weights

Finally, we'll introduce a "weight" parameter ($w_i$) assigned to each function, which controls
how often that function is used:

import randomChoiceSource from '!!raw-loader!../src/randomChoice'

<CodeBlock language={'typescript'}>{randomChoiceSource}</CodeBlock>

import chaosGameWeightedSource from "!!raw-loader!./chaosGameWeighted";

<CodeBlock language={'typescript'}>{chaosGameWeightedSource}</CodeBlock>

import GasketWeighted from "./GasketWeighted";
import {SquareCanvas} from "../src/Canvas";

<SquareCanvas><GasketWeighted/></SquareCanvas>