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.