I get asked a lot of questions about my tree experiments, such as sakura and interactive elm. I thought I would write up a simple explanation to point people in the right direction.

The easiest place to start is with recursion. Trees are beautiful examples of recursion in the natural world. Recursion is a deep and very important topic, but for our purposes can be simplified to the idea of code calling itself. In the example below, each time you click the stage, all of the “active” (outermost) branches call code to draw two more branches at their ends, the next time you click, those new branches call the same code. Move your mouse around to vary the angle of all of the branches. As an aside, this example also has an interesting “emergent” property of drawing hexagons (try moving your mouse to the bottom when all of the branches are drawn).









This looks slightly like a tree, but is too uniform. To make it look more like a natural system, we need to introduce some randomness. By taking the example above, and simply adding a bit of logic to randomly vary the length and angle of each branch, as well as decreasing the branch thickness with each generation.

Now it looks quite a bit like a tree. From here, you just need to add in wandering branch drawing logic, so that branches curve and bend, and it will start to look a lot like the demos I linked to above. For help getting started with this, I’d recommend downloading my Varicose-g source code.

You can download the source of the above examples by clicking here.