Alex's notes

The note tree

Plants need water, sunlight and nutrients to grow. The tree you see in the lower right hand corner of this page thrives off updates to my notes. Each time I add or modify the notes, the tree grow a little. How does this work?

The tree is a Cellular automaton with cells that take on states like \, |, and /. The rules of the cellular automaton dictate how the branches of the trees grow. For example, here’s a simple rule that causes a vertical branch to grow straight up:

    →   |
|       |

When applied iteratively, this rule generates the following tree:

generative tree
Not much emerges from this single rule — just a big vertical tree.

It’s not very exciting. Let’s add another rule that generates an angled branch on top of a vertical branch:

    →  \
|       |

Now we have two competing rules: each rule applies to a single vertical branch. Since both rules could apply in this case, we can flip a coin to decide which rule to use. (Technically speaking, this means our tree generator is a stochastic cellular automaton.) While we’re at it, let’s throw in a few more rules to grow off of the angled branch:

         |
 \    →   \
  |        |

          \
  \    →   \
  |        |

          -
  \    →   \
   |        |

Again, we can select which rule to apply randomly. If we run the tree growing algorithm now, we get the following lopsided tree:

generative tree
A windblown tree.

If we want the tree to look more natural, we need to add more rules. Angled branches should be able to grow to the right, for example.

The final version of the tree generator has around 30 rules, including rules for growing “fruit” (represented by o, that grow into O, that ripen into @, that drop . seeds, which fall to the ground and start new trees).

generative tree
The completed generator.

These animations show a sped-up version of the same simulation that grows the tree in the background of this site. This tree grows by one simulation step every time I update, as if being fed from the bits I commit to the site’s source code.

This tree generation idea has been adapted from my old portfolio website (2016).

?
| | \| | . | \ | \ | \ \| / \| - --- |--- |/| / . \|/|/ | | - \ | | . \|/ \|/| /|/| | . | |/ | |/ | \ / \| \| | /\|/ \---| - | || |/ | \ \|/| -| ||\| | - | |/ |\|| | / \ \|/| |/| \| / - | \ | |- |/ \ . | ./\|/ \| @ | --- \ | - /| /| / / \ \|/|/ |\-- | /|/ \ / | | / - \|/ | -- \|/| - \ | / . \ |\|/ |\|/|./ \ | | - | | |/ - \ | | |\|\|\| - \|/- \|/|\| | | | \ | \|| | |/ / \| @ - | |/\ \| / | \ \| | - |/ / \ | / \| --- . - - | - |/ | - \ |/ \|/ | \|/ \| | | | |/ | | | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^