Tree For A Web Page

See the Tree For A Web Page.

I ran across Aimee Major's web page one day while surfing. It was a nice home page, but what was interesting was that it had a tree trunk along the left edge and a wooden sign hanging from an out-reaching branch at the top of the page. The sign held some navigation links, and there were some little fuzzy dudes hanging out on top of the sign. (It doesn't look like that any more, and I never thought to take a screen shot, so you'll have to trust my description. :) [2002-04-28 : Woo-hoo! Aimee has made an archived but non-functioning version of the page available. Plus I snapped a screenshot in case that page goes away again.]

That got me thinking. It would be really cute if they blinked or walked around on the sign, since they looked like they should live in the tree. Then I was thinking that it would be even cooler if they ran up and down the tree (maybe spiraling up and down it like a barber pole) as you browsed the page. They could run up and down the tree so that they always stayed centered in the window as you scrolled the page up and down, and it would look like they were watching you read the web page. Heck, they could even chase your mouse around.

I figured I could write the code if she provided the animation cells. Fist I would need a proof of concept though, and she might not like the idea anyway. I got to thinking about what I could do with little guys running around a web page. From time to time I've had a web page for my character Nutsy (who is flying squirrel). I decided I could do the same thing to his web page. After all, he is a squirrel who lives in a tree. Then I was thinking that I could even change the whole page so that it actually looked more like a tree than anything else. It could be Nutsy's home tree instead of home page. Then he could run around chasing the mouse as you clicked on links and he could even give you a guided tour. That would be quite cool.

My first experiment showed that I could create a large tree image to be the page without the file size being too big. So, I set up a tree with places to put links.

I wanted to have the character move around the page chasing the mouse. I was thinking I would have a graph with a node at each link, and the character could determine which way to go by following a shortest path algorithm. That way his path would be appropriate and completely dynamic.

I also wanted to create dynamic animation loops. I considered creating a graph with each animation cell being a node and allowing the algorithm to pick a valid sequence of animation cells that would move the character along the current edge in the location graph. That would allow seemless animations, and the character's feet would never slide or jump. However, I decided to implement that later and just use fixed animation loops.

With a tree as the appearance, there wasn't any good place for text. I created an HTML word balloon so the character could 'talk' to the user. It came out quite well.

As far as artwork was concerned, I'm not the greates artist so I would try to concentrate on the code and not worry if the graphics looked very primitive.

I didn't actually get around to implementing any of the graph traversals. I started implementing a guided tour, but it was a pain to code and I didn't get much further. Still, I think the result is pretty cool.

  • 1999-10-23 : Initial concept work.
  • 2000-02-27 : Redrew the animations so that the squirrel is climbing the tree in bounds instead of hand-over-hand. Refactored the animation loop code. Added more steps to the tour animation.
    C o m m e n t s :    
    (nothing yet)