Trees

The latest in a long line of experiments on procedural tree-drawing with JavaScript and HTML <canvas>. Click the tree to draw a new tree.

What makes it cool

There are a couple of ways that this tree generator is unique from others that I have seen on the web (some of which I’ve made). First and foremost, the tree grows more realistically. Many tree generators start at the base of the tree and draw outward to the smallest branches. The problem is that the base starts at its fully grown size, rather than growing wider as the tree grows. It still looks neat, but it isn’ realistic — they are more representative of how a tree is drawn than how a tree grows.

Here’s a rough outline of how it works:

Create a “seed”

A seed object is created with some semi-random properties, such as growth direction, speed, etc. A randomized sprite is generated for rendering leaves. Once the seed is fully initialized, a timer loop is used to update the state of the leaves.

Grow it

The tree is composed of branches objects, and each branch object is represented as a starting point followed by a series of vectors. As the branch grows, the vectors are updated to give it a more natural look.

Branch out

As they grow, branches… well… branch. New branches can occur at any point on a branch. As branches grow and split into new branches, larger and denser leaf graphics are generated. The end result is a totally unique tree every time.


What’s next?

This is a project that I’ve kept coming back to over the past couple of years. Each time I build this thing from scratch, I make some small improvements and learn a little more. Besides cleaning up the source code (its a little messy) I would like to parameterize everything in such a way that a larger variety of trees (and shrubery) are possible. I’d also love to make an interface where you could play with those parameters and see the effect in real time.


Do you love your tree?

If you are super fond of a tree that you grew, take a screenshot of it and send it to me. I’d love to put it on the site! Here's some to get started!