Elm Tree Branching Experiment

Having grown tired of playing with circular branching experiments (hairball, inktest, flowerGlobe), I decided to tackle generating random trees with my new AS3 branching library.

It only took about 1 hour (plus a couple of hours tweaking numbers), versus a week or two for the original AS2 experiments (sakura, tree), and the results are vastly superior (from a realism perspective, if not yet artistically). Much of this was experience, but a lot of it was AS3 and the branching library giving me the freedom to explore the subject without worrying too much about performance or architecture. I also spent some time looking at real trees and really examining their shape and growth patterns – the advantage of winter in Edmonton is that it’s really easy to see branch structure.

I plan to see if I can make parts of this interactive, and hopefully create a 3D version in the not too distant future, either with PaperVision, or a simpler custom 3D engine (leaning towards the latter to begin).

It’s a little too large to embed here, so you’ll have to click the screenshot below to open the demo. You’ll need a large monitor (> 1200×1200 pixels) to view this well.


Grant Skinner

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

@gskinner

26 Comments

  1. Awesome, you got the exact same numbers as god ^^

  2. Damn, that looks/works too cool!

    Great stuff

  3. Looking good. I’d love to see the trunk and everything start as small as the tiny branches and grow over time as the rest of the tree forms. 🙂

  4. Josh,

    A couple of the guys here suggested the same thing. The issue is mainly with vector rendering. I have to blit everything back to a bitmap each frame to keep it running at a reasonable speed, so updating the thickness of existing branches is a bit of a challenge.

    On the other hand, I like a challenge, so maybe I’ll give it a go sometime. 🙂

  5. this i beautiful.

    i was working towards a similar project a year ago, but i don’t have quite the same skillset in branching and such, so mine’s not as pretty.

    http://ar11.net/work/daily/2007-01-11.swf

    as josh suggested, i was aiming more at a real time growth simulation, but i was busy with other stuff so i never got to finish.

    don’t run it for too long, it doesn’t manage cpu useage in a friendly fashion 😛

  6. Ditto on this being beautiful!

  7. gorgeous work!

  8. Wow! Usually if you’ve seen one, you’ve seen them all when it comes to recursive drawings of trees, but this is certainly the most realistic that I’ve seen done in Flash. Nice work!

  9. It is the realest tree shade i have ever seen!

  10. Great stuff, looks gorgeous.

  11. Waoh very realistic indeed ! and so fluid…

    But how come I always get the same tree ? How random is this supposed to be ?

    {Maz}

  12. I had a crowd of 10 voicing oohs and aahs around my desk 🙂 hats off!

  13. Nice work Grant.

    @Maz: its just and illusion, you don’t get same tree every time.

    Adrian.

  14. Maz – actually you are correct in a sense, the first tree that draws is the same each time you refresh the SWF. This is because I’m using this experiment to test a seeded random class, and I forgot to randomize the seed before the first draw before posting the experiment. Each time you click to restart after the first draw it randomizes the seed, and you get a unique tree.

    Now that you’ve noticed this, I won’t bother updating the SWF, so other people can see what you’re talking about.

    I should be posting the seeded random class in the next couple of days.

  15. This is really a smooth growing tree. Impressive!

  16. I look forward to that seeded random class, clearly it works very well! I’ve been wanting to add seeding into a lot of my random generated stuff in AS for awhile…

  17. Fine work simply superb.

  18. Wow Grant, nice job and looks simply fantastic – you’ve really taken this a long way from veins! =D

  19. Grantastic!

    A tint feature request: branch coloring and an ability to feed the tree with some water 🙂

  20. Grant, just stumbled on this. I built a PV3D version of some random trees here (http://lukesh.com/files/Trees/FractalExperiment1.html) more or less to mess around with some of the new PaperVision Great White features. I would really encourage you to take some of your experiments (like this one) into 3D. It’s a blast.

  21. wow awesome… !!!!, this is the first one that actually looks like a real tree..Very Well Done Mister!

  22. Hi ,

    Could anyone point me out to tutorial on how to do : Elm Tree Branching , “growing plant” effects?

    Thaks a lot!

  23. Really nice, very inspirational. Now how many beers will it take to get a look at that branching library 😀

  24. Underwaterdogg July 22, 2012 at 9:07am

    This is fantastic… but the tree is obviously weighted to the right. It would be cool to have a version weighted to the left and one to the center…or of course, better yet, to have it slightly more randomized in the lower branching structure if possible.

Comments are closed.