Barnsley Fern (IFS) — Explanation & Equations

An English explanation focusing on the core formulas behind the classic Iterated Function System fern, plus a single‑file p5.js demo.

1) What the code does (English)

We maintain a single point $(x_n, y_n)$. At each step we randomly choose one of four affine maps and update the point. Repeating this (the so‑called chaos game) produces the fern's self‑similar structure.

$$ \begin{pmatrix}x_{n+1}\\ y_{n+1}\end{pmatrix} = \begin{pmatrix}a_i & b_i\\ c_i & d_i\end{pmatrix} \begin{pmatrix}x_n\\ y_n\end{pmatrix} + \begin{pmatrix}e_i\\ f_i\end{pmatrix} \quad \text{with probability } p_i\,. $$

Here $i\in\{1,2,3,4\}$. The four maps and their probabilities are chosen to sculpt the stem, the main leaflet mass, and two side leaflets.

2) Random selection (probabilities)

Draw $r\sim\mathcal U(0,1)$. Using cumulative probabilities $\mathrm{CDF}=(0.01,\,0.86,\,0.93,\,1.00)$, pick $i$ as:

$$ i(r) = \begin{cases} 1,& r<0.01,\\ 2,& 0.01\le r<0.86,\\ 3,& 0.86\le r<0.93,\\ 4,& 0.93\le r<1.\end{cases} $$

These correspond to probabilities $(p_1,p_2,p_3,p_4)=(0.01,0.85,0.07,0.07)$.

3) The four affine transforms

Standard Barnsley coefficients (stem, main mass, left leaflet, right leaflet):

$$T_1:\; \begin{bmatrix}x'\\y'\end{bmatrix}= \begin{bmatrix}0 & 0\\ 0 & 0.16\end{bmatrix}\! \begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}0\\0\end{bmatrix}\quad (p=0.01)$$

$$T_2:\; \begin{bmatrix}x'\\y'\end{bmatrix}= \begin{bmatrix}0.85 & 0.04\\ -0.04 & 0.85\end{bmatrix}\! \begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}0\\1.6\end{bmatrix}\quad (p=0.85)$$

$$T_3:\; \begin{bmatrix}x'\\y'\end{bmatrix}= \begin{bmatrix}0.20 & -0.26\\ 0.23 & 0.22\end{bmatrix}\! \begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}0\\1.6\end{bmatrix}\quad (p=0.07)$$

$$T_4:\; \begin{bmatrix}x'\\y'\end{bmatrix}= \begin{bmatrix}-0.15 & 0.28\\ 0.26 & 0.24\end{bmatrix}\! \begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}0\\0.44\end{bmatrix}\quad (p=0.07)$$

$T_1$ compresses towards the stem; $T_2$ generates most of the mass (slight rotation + scale + upward shift); $T_3, T_4$ add side leaflets.

4) Mapping math coordinates to canvas pixels

Given target extents $x\in[x_{\min},x_{\max}]$ and $y\in[y_{\min},y_{\max}]$, canvas width $W$, height $H$:

$$ p_x = \frac{x - x_{\min}}{x_{\max}-x_{\min}}\,W,\qquad p_y = \Bigl(1 - \frac{y - y_{\min}}{y_{\max}-y_{\min}}\Bigr)\,H. $$

For the canonical fern: $x_{\min}