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 two sub-branches should together have the same surface area as the parent when you saw through them. The surface area is split according to weight.
- Big sub-branches (with big weight) grow straight ahead, while small ones grow more to the side, up to 45°.
- Very small sub-branches with too small weights are cut off and not drawn anymore.
Background
The Javascript library I’m using is Paperjs, which I discovered through the PaperJS talk at 35C3 by bleeptrack.