Programatically Drawing Trees With Recursion

I get asked a lot of questions about my tree experiments, such as sakura and interactive elm. I thought I would write up a simple explanation to point people in the right direction.

The easiest place to start is with recursion. Trees are beautiful examples of recursion in the natural world. Recursion is a deep and very important topic, but for our purposes can be simplified to the idea of code calling itself. In the example below, each time you click the stage, all of the “active” (outermost) branches call code to draw two more branches at their ends, the next time you click, those new branches call the same code. Move your mouse around to vary the angle of all of the branches. As an aside, this example also has an interesting “emergent” property of drawing hexagons (try moving your mouse to the bottom when all of the branches are drawn).




This looks slightly like a tree, but is too uniform. To make it look more like a natural system, we need to introduce some randomness. By taking the example above, and simply adding a bit of logic to randomly vary the length and angle of each branch, as well as decreasing the branch thickness with each generation.

Now it looks quite a bit like a tree. From here, you just need to add in wandering branch drawing logic, so that branches curve and bend, and it will start to look a lot like the demos I linked to above. For help getting started with this, I’d recommend downloading my Varicose-g source code.

You can download the source of the above examples by clicking here.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

10 Comments

  1. Ummm…did I hear someone say ROCKSTAR! 🙂

    Good stuff Grant. 😉

  2. thank you! I’ve also seen the slides of your “My Favourite Things” presentation. Really handy.

  3. Very cool, thanks! Will be interesting to use this technique in 3D.

  4. Nice post Grant.

    Have been following your tree experiments for a while now..

    They are looking awesome…. especially the backtracing demo…

    ty for the sources they help me alot.

    Keep up the great work..

    Btw will you be attending FOTB 2008 ? would love to have a chat about things

  5. Thank you very much for your post on recursion and tree generation.

    Wonderful work that brings a “flash” (pardon the pun) back to the days of Robert Penner.

    Lovely…thank you so much for sharing. This blog is right near the top of my RSS list.

  6. Hi Dear,

    I am here watching countinew your animation these all excellent mind blowing

  7. Recursion is one of the most powerful programming functions around. I remember the day I figured it out, wow, everything seemed easier.

    This is a cool demo, and nice way to ‘view’ recursion in action. Nice work Grant, as always.

  8. I hail the god of trees.

    Although, I have known how to do this for quite a few years, I am pretty sure it was your featured work on Ultrashock that got me interested in the first place.

    To the newbie:

    Although recursion is very powerful, you will

    eventually run out of memory if there is too high a depth count.

  9. well. I just came across this class. You rock! I downloaded it and now i’m gonna learn!

    thanks!

  10. It reminds me of similar experiments I made back in ’81-’85 (when I was around 15) by using the graphics (and printers) of the day. It really makes me happy remembering it. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *