Programming Assignment 2: Hierarchical modeling

by Eftychios Sifakis on February 3, 2016

Due: Monday, February 8th (see the class late policy on the Syllabus)

Synopsis: You will make a program with an articulated object and have it be animated (move around).

Learning Objectives: To see how transformations and hierarchical objects are useful in modeling and animation, and to experiment with using them in web programming.

Evaluation: Check/No Check/Above and Beyond. You get a check if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). Gold stars to people who make interesting things (or even simple things that move in interesting ways). Your object must be hierarchical, and move in a way that shows it off (e.g. there’s a thing that moves that has a sub-piece that moves relative to it).

Handin: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. (Link). Make sure that you turn in all files needed for your program to run.


In class, we’ve been learning about transformations. Now is you chance to try them out!

Like the previous assignment, you must make a web page with an HTML5 Canvas on it. You must do all the drawing with Canvas. In fact, you must use the canvas transformation commands (there should be a rotate or something like that).

Transformations are helpful all of the time. However, they are really useful when you want to make objects that are hierarchical (have parts that move relative to other parts). They are also really useful for moving things around.

A standard example is to make a car: the wheels of the car spin, but they stay attached to the car as it moves around. Another example we had explicitly asked students to implement in previous class offerings was a quadcopter – with 4 propellers that spin, while the copter flies around. It’s best to do something like this in a 2D top view. Last semester, Professor Gleicher prepared a sample solution that was such a quadcopter. You can view his example here (link). Note: you can look at his code for reference if you like (it is not hidden). However, you must make your own object and motion. You should aspire to do something better than this example – both in terms of the thing you make and the quality of the code.

Since we prefer you to be creative, you don’t have to make a QuadCopter – be creative! Pick something interesting. It just has to have parts that move relative to each other (e.g. be hierarchical). And it should have at least one part that has two children (like the quadcopter has 4 propellers, or a car has 2 wheels). And it has to move by itself to show this off.

You do need to animate your object (or objects) in a way that shows off the hierarchy. The QuadCopter flies around and its 4 propellers spin. We recommend you use “requestAnimationFrame” to do the animation (or setTimeout). See the tutorial, especially the last example.

Some ideas (but you should be creative!)

  • You could make a car (side view) where the wheels spin while it drives. Or make it a dump truck and the back can tilt up and down. Or a firetruck where the ladder goes up and down.
  • You could make a tree where the branches wave in the wind.

Print Friendly, PDF & Email

Previous post:

Next post: