Drawing Trees With HTML5 Canvas

I’ve been playing with an idea for some time of a virtual garden app that generates unique plants based on plants models for the user to collect and cultivate. I’ve created a small demo using javascript & the HTML5 canvas element that will generate a random tree, with some fields to tweak some of the values involved in the algorithm.

See the demo ยป

generated-tree

The drawing is made using recursion to create branches on the canvas, with a little variability thrown in. The interesting thing about trying to draw plants with an algorithm is that their form needs to be somewhat randomized, but only so much. Achieveing that balance is very difficult and makes me appreciate the many mechanisms behind plant growth.

Source code on github