Procedurally generated trees

How to make beautiful art from a few lines of code

These trees are procedurally regenerated on every page load.

Basic algorithm

At the heart of this algorithm, there is a recursive function which draws a tree branch (as a rotated black rectangle) and its sub-branches. The function calls itself recursively for the two sub-branches, using smaller branch sizes. When the width is finally too small to continue for the branch we’re looking at, we draw a leaf and stop there.

To randomize the tree shape, we’re picking two weights from 0 to 1 for the two branches, which are adding up to 1. The weights are used to determine the sub-branch sizes and angles.


The Javascript library I’m using is Paperjs, which I discovered through the PaperJS talk at 35C3 by bleeptrack.