<iframe src="https://editor.p5js.org/juliuslsk/full/Mih5chBin" width="550" height="600"></iframe>
# Iterated Function System (IFS)
$
\text{葉柄：}
f_1\left(
\begin{bmatrix}
x \\
y
\end{bmatrix}
\right)
=
\begin{bmatrix}
0 & 0 \\
0 & 0.16
\end{bmatrix}
\begin{bmatrix}
x' \\
y'
\end{bmatrix}
+
\begin{bmatrix}
0 \\
0
\end{bmatrix}
$
$
\text{葉上部：}
f_2\left(
\begin{bmatrix}
x \\
y
\end{bmatrix}
\right)
=
\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}
$
$
\text{左小葉：}
f_3\left(
\begin{bmatrix}
x \\
y
\end{bmatrix}
\right)
=
\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}
$
$
\text{右小葉：}
f_4\left(
\begin{bmatrix}
x \\
y
\end{bmatrix}
\right)
=
\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}
$
以葉柄爲例，其矩陣方程式可理解為：
$
\begin{aligned}
x &= 0x' &+& 0y' &+& 0 \\
y &= 0x' &+& 0.16y' &+& 0
\end{aligned}
$
# p5.js 程式碼
```Javascript
// 葉梗 stem
function f1(startPoint) {
ret = createVector(0, 0);
ret.x = 0;
ret.y = 0.16 * startPoint.y;
return ret;
}
// 上部 upper part
function f2(startPoint) {
ret = createVector(0, 0);
ret.x = 0.85 * startPoint.x + 0.03 * startPoint.y;
ret.y = -0.04 * startPoint.x + 0.85 * startPoint.y + 1.6;
return ret;
}
// 左小葉 left part
function f3(startPoint) {
ret = createVector(0, 0);
ret.x = 0.2 * startPoint.x - 0.4 * startPoint.y;
ret.y = 0.15 * startPoint.x + 0.22 * startPoint.y + 1.6;
return ret;
}
// 右小葉 right part
function f4(startPoint) {
ret = createVector(0, 0);
ret.x = -0.15 * startPoint.x + 0.4 * startPoint.y;
ret.y = 0.15 * startPoint.x + 0.24 * startPoint.y + 0.44;
return ret;
}
```
通过调用random(1, 101)生成一个1到100的随机整数，这个随机数决定了选择哪个函数。
* 如果rnd是1到1之间的数（即1），将选择第一个函数f1（只处理y坐标，用于生成植物的茎部）。
* 如果rnd是2到86之间的数，将选择第二个函数f2（处理x和y坐标，生成植物的上部）。
* 如果rnd是87到93之间的数，将选择第三个函数f3（生成植物的左小叶）。
* 如果rnd是94到100之间的数，将选择第四个函数f4（生成植物的右小叶）。
这种方法确保了函数的选择不是平均分布的，而是依据设定的概率，从而使生成的图形具有不同的视觉重点和结构。例如，f2被选中的机会最大（占总概率的85%），因为它生成的是植物的主体部分，而其他函数则辅助生成较小的叶子或特定的细节。
这种概率设计使得生成的图形更加丰富和复杂。
```javascript
function getNextPoint(currentPoint) {
choices = [{
probabilityMargin: 1, // 1%概率
func: f1
},
{
probabilityMargin: 86, // 85%概率
func: f2
},
{
probabilityMargin: 93, // 7%概率
func: f3
},
{
probabilityMargin: 100, // 7% 概率
func: f4
}
];
let chosenFunction;
let rnd = floor(random(1, 101));
for (let i = 0; i < choices.length; i++) {
if (rnd <= choices[i].probabilityMargin) {
chosenFunction = choices[i].func;
break;
}
}
return chosenFunction(currentPoint);
}
```
Reference
Tutorial：https://www.algorithm-archive.org/contents/barnsley/barnsley.html
可以用GeoGebra來視覺化linear transformation：https://www.geogebra.org/m/YCZa8TAH