Interactive Elm Tree: Backtracing Branches

My new branching library makes tracking child/parent relationships between branches quite easy, so I wanted to see if I could build a simple interactive demo that took advantage of this. The result was the demo below that lets you roll over the end of any branch of the dynamically generated tree and see it traced back through its parents to the trunk it originated from. Each place it branched from a parent is indicated by a circle.

The real challenge in building this arose due to the fact that there are no sprites that correspond to branches Ҁ“ all the branch instances share a single canvas that they draw to with the drawing API, and those vector graphics are blitted to a bitmap before you ever see them. This means there is nothing to register rollovers, and I cannot (easily) dynamically update the appearance of branches in response to an interaction. To solve this, I did two things:

  1. I register each branch end point with a central list, and associate it with the IBranch instance. This lets me find the nearest end point when the user moves their mouse.

  2. As the branch draws, it maintains an array of the points it draws to, and a dictionary of child branches and the array index they split off at. This lets me redraw a branch from scratch, from its start, to the position where a child split off from it.

While it wasn’t hugely complicated, it was an interesting programming exercise trying to architect it in a clean way (without relying on things like singletons or root references), and getting it to work properly.

Now I need to try to think of something neat to do with this logic. Ideas are welcome. πŸ™‚

In the previous tree drawing demo, Maz pointed out that the first tree to draw always looks the same if you reload the page. This is because I am using a seeded random class I’ve been working on, and will share in the next few days. The first draw always uses the same seed, whereas subsequent draws (when you click the SWF) use a random seed. I decided to leave that behaviour intact for this demo so people could check it out. If it doesn’t draw the same tree for you each time you reload, let me know your OS, browser, and player version Ҁ“ I’m studying how parts of this work with garbage collection and memory allocation on different systems. More on that in a future post.

Grant Skinner

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



  1. If I reload, the tree is different each time.

    I’m running Flash player on Mozilla Firefox under Windows XP Pro SP2.

    When running the swf, Firefox uses about 122k of memory, 126k at the end, when i reload it drops back to 122k and builds up to 126k again (should it have any concern for your research).

  2. /* Now I need to try to think of something neat to do with this logic. Ideas are welcome. πŸ™‚ */

    Idea #1: Each branch endpoint is draggable, allowing user to move, and shake branches.

  3. I do get the same tree every time I reload the page. Flash player on Mozilla Firefox on OS X 10.5.

    Nice work.

  4. yeah, awesome, i love it.

  5. You never cease to amaze. The tree looks absolutely lovely, and the tracing of the parents is quite nice.

    Any-thoughts on adding x/y/z to the branches? A spinning 3d generated tree would be epic.

  6. The tree is not completely similar, the branches go into generaly the same direction but there is definately a difference each time I reload.

    Opera 9.24

    Flash player

    Windows Vista

    Greetz Erik

  7. so very elegant πŸ™‚ congrates

  8. Re: Now I need to try to think of something neat to do with this logic. Ideas are welcome. πŸ™‚

    Make transformer robots. 2D is fine, too; maybe package them as components for people to make games with.

  9. Hey Grant, Nice work. I am in blown away by your tree.

    I did a tree experiment a while back. I was looking for a way to grow a tree, send it to bitmap and then maintain some info about the branches so I could make a fun interactive nav.

    I came up with this “not as cewl as yours”

    It’s linked up to a DB => PHP => XML which supplies the information about experiments for the apples.

    You will also notice in the background, the birds. Another experiment in flocking and such.

    Anyway thanx for all your stuff, it’s really a great source for my inspiration.

  10. Hello Grant,

    I am assuming you are locking your bitmap before you draw the branches? With the growth of the tree new branches are the fastest growing and the trunk is slower. Would it still kill performance if you dedicated most the time to new growth and only occasionally redrawing the trunk. This could be done is separate bitmaps that are merged. Just thinking out loud.

  11. It reminds me of google maps where you can drag and drop the directions line

  12. Svidzinsky Volodia January 31, 2008 at 3:25am

    Oh! it is realy nice! I’ve tried to do something like this, but I couldn’t find any good idea of building such smooth traectory. As for dragging branches, inverse kinematic would be usefull

  13. Grant, the drawings look beautiful and I like the seeded random class. However I don’t get the same tree every time I reload the page. I am on Mac OS X 10.4.11, Firefox, Flash Player version 9,0,115,0.

  14. Hey, this is really great. I’m doing some experiment with branches but i couldn’t get this far. My sincere greetings.

  15. Hey Grant,

    As the branches get thinner, are you simply adjusting the lineWidth property? And if so, how are you able to keep the transition between widths so smooth?


  16. I get a different tree each time.

    Windows Vista SP1

    Internet Explorer 7.0.6001.18000

    Flash Player 10

  17. Could you apply this logic to UML, or maybe some sort of idea generator based one a single imput. based on that input use yahoo pipes to retrieve a feed of related topics diplayed via this tree logic… let me know if that makes sense to anyone…


    (P.S. Good job grant, once again πŸ™‚

  18. I get the same tree every time i reload the page.

    Running Windows XP SP3, Firefox 3.0, Flash Player 10,0,1,218.

    Very nice tree by the way! Me like.

  19. You should use this to visualize really big DVCS-based projects! Like GitHub’s network view, but more artistic πŸ™‚

  20. hi,i want the code for curved lines. can u plzz help me in doing the code for curved line over a circle

  21. I wanted to congratulate you on your branches generator. I find it mesmerizing to watch them grow with each click.

    I also want to thank you for it, because I used a couple of generated trees to create this image:

    I extended the trunks to make more room, but the branches are yours.

    Hope you like it πŸ™‚ and if you wish I can send you a copy of the file in full size.

Leave a Reply

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