Page 25: Mascot Competition

The Fireworks, Snowman and Train are the “mascots” of CS559. They have been part of the assignments for years. But none of them is an articulated character. The snowman might wave its arms, but it really isn’t a good way to show off articulated character animation.

I feel like we need a new mascot (to add to the current set, not to replace). Something that is an articulated character (rigid pieces that rotate in a hierarchical fashion, like arms and legs). Something easy to draw with HTML5 Canvas. Something realistic to ask students to make. Something that is fun…

The obvious thing is to make Bucky Badger. I asked Gemini to do this. I am not trying to learn computer graphics, so I can let the AI do graphics programming for me.

I was feeling kind of crabby, so I made a crab. Well, I tried to get my AI assistants to make the crab, and ended up drawing it in Illustrator and converting it to an animated character.

Then I just asked Gemini to make a whole bunch; you can see the examples in this gallery. They are live, animated examples (written with HTML5 Canvas).

Here’s a static preview:

Now it’s your turn. You should think of something on your own, and program it yourself (so you can practice graphics programming and make sure that you understand the concepts of hierarchical modeling and animation).

Here’s a box: put a character in it. The character must be a hierarchical articulated figure. It must move its joints. It can be simple. The motion can be simple (wiggling the joints). You can even recreate one of the examples (don’t copy our code). But it will be much more fun if you come up with something yourself.

Tell us about your character. Be sure to give it a name.

Note: I am not asking you to ask an AI for help. I already asked some AIs for help; Gemini and Claude made a bunch of different examples, and they were pretty creative. They came up with good ideas and implemented them well. Not all of them were great.

The rubric:

• standard - There is an articulated thing. There are multiple pieces connected to each other with rotational joints. There is more than one level of “hierarchy” (some chain has length of more than 1). It is animated (the joints wave, at least).
• advanced - The “thing” seems like a character. It has multiple chains. (e.g. arms)
• creative - Graders’ discretion: shows creativity in the character design and/or its motion.

A bit of a warning: making good animation motion is hard. That’s why even my example just waves its arms around. On a future page, we’ll learn about inverse kinematics - a tool that can make it easier to define articulated character poses and animations.

Now might be a good time to checkpoint your localstorage, especially if you put something into the type-in box.