HTML5 tree generator

Always wanted to write a tree generator and decided to have a go with HTML5 and canvas. Have a look here. Should work on mobile and desktop. Took about 2 hours from start to finish, and as I’ve realised, it’s far from complete. I should point out that (as usual) haven’t really researched the proper way of doing this and just dived in with a vague hunch and a bit of enthusiasm to get me by. Thought I’d share a few things.

My general thinking was that a tree was just an iterative process of the following… Draw a branch with length, angle and number of branches it has at the end. And repeat.

My pseudo-code went something like this:

1. Create a branch object that accepted a start X and Y and the length of it’s parent.
2. Decide on this branch’s length by using the parent’s length and reduce it by a random amount.
3. Decide an angle for this branch within a certain set of limits
4. Draw this branch. The colour and width are relative to it’s length.
5. Draw a bunch of leaves around this location too.
6. Decide how many new branches will be created (within min and max limits)
7. If the branch length is shorter than a preset minimum, end this branch now.
8. If the branch length is still longer than a preset minimum, create a new instance os the branch code  with the X and Y of the end point of this branch and this branch’s length. Go to step 1.

Turns out, that’s pretty much how it works. Altering the length, angle and number of new branches does indeed create bunch of crazy looking trees.

As nasty as it is, here’s my current js code. If you’re a complete hack monkey like me, it may be interesting to illustrate the thinking above.

There are a few nuances though…

1. The first ‘branch’ is really the trunk, so its angle needs to be pretty much straight up.
2. I cheated by making the branch width relative to its length, so longer branches come out thicker. It works up to a point but in reality, a lower branch’s width keeps expanding as more branches are added above it. I haven’t coded this bit yet but should make the tree look more chunky.
3. My assumption that a tree branch ends in a certain number of new branches isn’t quite true. I’ve started staring at ‘real’ trees and it’s pretty obvious that new branches spur of a main branch while the main branch carries on straight. In reality, new branches can sprout off a main branch after it has been there a while. My code currently doesn’t allow for these ‘side shoots’.
4. The angle of a new branch drastically changes the look of a tree from tall and thin to random and scrappy. Again, in reality, branches don’t branch off at a random angle, they mostly point in the same general direction. My code works on a global angle. I.e. 0 degrees is always ‘straight up’. It should work on a local angle, where 0 degrees is the same direction as the parent branch. I just need to pass in the parent angle to the branch object so that it can use that. This is the main problem with my code at present.
5. I added some leaves as an afterthought but it’s very vague. The code just adds some random dots every time it created a new branch. The position of each leaf is simply randomised around the original branch’s start point. Looks ok, but in reality, not quite how leaves work!
6. Also, I’m using objects in a very clumsy way. I’m not even disposing of them! Shock! But this is just a quick experiment so as a crude garbage collection, I’m currently refreshing the page to draw another tree. It’s real nasty but does the job for now.

Definitely going to revisit this but in the meantime, hope that gives you a bit of inspiration to either have a first hack or to do it properly!

Here are some examples of tweaking the numbers. See below for what they are.