LateNightHacking Projects 1999

Auth

See the Tree For A Web Page.

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.