---
slug: 2024/11/playing-with-fire-transforms
title: "Playing with fire: Transforms and variations"
date: 2024-11-15 13:00:00
authors: [bspeice]
tags: []
---

Now that we have a basic chaos game in place, it's time to spice things up. Transforms and variations create the
interesting patterns that fractal flames are known for.

<!-- truncate -->

This blog post uses a set of reference parameters ([available here](../params.flame)) to demonstrate a practical
implementation of the fractal flame algorithm. If you're interested in tweaking the parameters, or generating
your own art, [Apophysis](https://sourceforge.net/projects/apophysis/) is a good introductory tool.

TODO: Include the reference image here

## Transforms and variations

import CodeBlock from '@theme/CodeBlock'

We previously introduced "transforms" as the "functions" of an "iterated function system." Their general format is:

$$
F_i(x,y) = (a_i \cdot x + b_i \cdot y + c_i, \hspace{0.2cm} d_i \cdot x + e_i \cdot y + f_i)
$$

import coefsSrc from '!!raw-loader!../src/coefs'

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

We also introduced the Sierpinski Gasket functions ($F_0$, $F_1$, and $F_2$), demonstrating how they are related to
the general format. For example:

$$
\begin{align*}
F_0(x,y) &= \left({x \over 2}, {y \over 2}\right) \\
&= (a_0 \cdot x + b_0 \cdot y + c_0, d_0 \cdot x + e_0 \cdot y + f_0) \\
& a_0 = 0.5 \hspace{0.2cm} b_0 = 0 \hspace{0.2cm} c_0 = 0 \\
& d_0 = 0 \hspace{0.2cm} e_0 = 0.5 \hspace{0.2cm} f_0 = 0
\end{align*}
$$

TODO: Explain the applyCoefs function

However, these transforms are pretty boring. We can build more exciting images by using additional functions
within the transform. These "sub-functions" are called "variations":

$$
F_i(x, y) = V_j(a_i \cdot x + b_i \cdot y + c_i, \hspace{0.2cm} d_i \cdot x + e_i \cdot y + f_i)
$$

The fractal flame paper lists 49 variation functions ($V_j$ above), but the sky's the limit here.
For example, the official `flam3` implementation supports
[98 variations](https://github.com/scottdraves/flam3/blob/7fb50c82e90e051f00efcc3123d0e06de26594b2/variations.c).

Our reference image will focus on just four variations:

### Linear (variation 0)

This variation returns the $x$ and $y$ coordinates as-is:

$$
V_0(x,y) = (x,y)
$$

import linearSrc from '!!raw-loader!../src/linear'

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

### Julia (variation 13)

This variation still uses just the $x$ and $y$ coordinates, but does crazy things with them:

<small>TODO: Is this related to the Julia set?</small>

$$
\begin{align*}
r &= \sqrt{x^2 + y^2} \\
\theta &= \text{arctan}(x / y) \\
\Omega &= \left\{
\begin{array}{lr}
0 \hspace{0.4cm} \text{w.p. } 0.5 \\
\pi \hspace{0.4cm} \text{w.p. } 0.5 \\
\end{array}
\right\} \\

V_{13}(x, y) &= \sqrt{r} \cdot (\text{cos} ( \theta / 2 + \Omega ), \text{sin} ( \theta / 2 + \Omega ))
\end{align*}
$$

import juliaSrc from '!!raw-loader!../src/julia'

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

### Popcorn (variation 17)

This is known as a "dependent variation" because it depends on knowing the transform coefficients
(specifically, $c$ and $f$):

$$
V_{17}(x,y) = (x + c \cdot \text{sin}(\text{tan }3y), y + f \cdot \text{sin}(\text{tan }3x))
$$

import popcornSrc from '!!raw-loader!../src/popcorn'

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

### PDJ (variation 24)

This is known as a "parametric" variation because it has additional parameters given to it:

$$
p_1 = \text{pdj.a} \hspace{0.2cm} p_2 = \text{pdj.b} \hspace{0.2cm} p_3 = \text{pdj.c} \hspace{0.2cm} p_4 = \text{pdj.d} \\
V_{24} = (\text{sin}(p_1 \cdot y) - \text{cos}(p_2 \cdot x), \text{sin}(p_3 \cdot x) - \text{cos}(p_4 \cdot y))
$$

import pdjSrc from '!!raw-loader!../src/pdj'

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

## Blending

Now, one variation is fun, but we can also combine variations in a single transform by "blending."
Each variation receives the same $x$ and $y$ inputs, and we add together each variation's $x$ and $y$ outputs.
We'll also give each variation a weight ($v_{ij}$) to control how much it contributes to the transform:

$$
F_i(x,y) = \sum_{j} v_{ij} V_j(a_i \cdot x + b_i \cdot y + c_i, \hspace{0.2cm} d_i \cdot x + e_i \cdot y + f_i)
$$

The formula looks intimidating, but it's not hard to implement:

import blendSource from "!!raw-loader!./blend";

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

And with that in place, we have enough to render a first full fractal flame.
The sliders below change the variation weights for each transform (the $v_{ij}$ parameters);
try changing them around to see which parts of the image are controlled by
each transform.

import BrowserOnly from "@docusaurus/BrowserOnly";
import Canvas from "../src/Canvas";
import FlameBlend from "./FlameBlend";

<Canvas width={500} height={500}>
    <BrowserOnly>{() => <FlameBlend/>}</BrowserOnly>
</Canvas>

## Post transforms

After variation blending, we apply a second set of transform coordinates.

The fractal flame below starts with the same initial transforms/variations as the previous fractal flame,
but allows modifying the post-transform coefficients.

$$
P_i(x, y) = (\alpha_i x + \beta_i y + \gamma_i, \delta_i x + \epsilon_i y + \zeta_i)
$$

import FlamePost from "./FlamePost";

<Canvas width={500} height={500}>
    <BrowserOnly>{() => <FlamePost/>}</BrowserOnly>
</Canvas>

## Final transform

import FlameFinal from "./FlameFinal";

<Canvas width={500} height={500}>
    <BrowserOnly>{() => <FlameFinal/>}</BrowserOnly>
</Canvas>