Programming Assignment #2

by Eftychios Sifakis on September 19, 2020

Due: Wednesday, September 30th. (see the class late policy on the Syllabus)

Synopsis: You will make a program with an object (or more) that uses the concept of hierarchical modeling and have it be animated.

Learning Objectives: To see how transformations in 2D and hierarchical objects are useful in modeling and animation, obtain exposure to the implementation of these concepts in the HTML Canvas and the transform stack it implements, and to experiment with using them in web programming.

Evaluation: Based on the announced evaluation system. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades will be awarded for people who make particularly cool pictures.

Hand-in: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. [Submission link] Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but much preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository (see, e.g. Demos 0-2 from Week 2). If you submit anything else than a single HTML file, please put everything in a single ZIP archive. It is not acceptable to submit a link to JSbin for this assignment!


In class, we’ve been learning about transformations (in 2D), create composite transforms by combining elementary ones, and the Canvas transform stack. Now is you chance to try these concepts 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 (i.e. the translate(), scale(), rotate() methods of the drawing context) as opposed to implementing these transforms via some other process (e.g. adding coordinates together by hand to implement a translation, or using a linear algebra library to implement such operations; the latter is a fine way to implement transforms as a general practice, but for this assignment we want you to use the canvas commands for elementary transforms as much as possible).

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.

An example of a hierarchical model might be a model of a car with spinning wheels: the wheels of the car rotate, but they stay attached to the car as it moves around. Another example would be a quadcopter as demonstrated in the lecture – with 4 propellers that spin while the copter flies around. Since we have only worked in 2D so far, consider how this would look in a top view (link). Note: we are not hiding the source code of this implementation from you, but you must make your own object and motion. This particular example is not intended to be an example of how to code up such models in JavaScript/Canvas, and you are strongly recommended to not use it as a starting point for your implementation. This is merely supposed to be a visual illustration of how a moving hierarchical object might look like. We also gave examples of hierarchically modeled objects in class, such as a simple articulated robotic chain (link). It is ok to use these code samples (the ones where we explicitly described the code during class; many/most of these will also be duplicated in our GitHub repository of demos) as starting points in your implementation, or to get some inspiration to get started. Again, you should deviate from these examples by adding your own shapes, connectivity of pieces, and/or motion.

Your implementation must demonstrate the use of the HTML Canvas transform stack, in service of the hierarchical modeling concept. If you’re not using the save()/restore() commands in a way similar to how we did in class, you are probably doing this wrong.

We would encourage you to 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 demo flies around and its 4 propellers spin. One possibility is to use “requestAnimationFrame” to do the animation (or setTimeout). See the tutorial, especially the last example. It is also OK to use sliders to control the animation, as we have seen in class (instead of the auto-update via the requestAnimationFrame mechanism) if that works best with your particular hierarchical model.

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.
  • How about a clock with two hands (minute/hour), where the clock itself is moving. Maybe have the clock mounted on some other object (a character’s hand?), or have several of them in your scene.
  • A model of the solar system, with planets and their moons?

To compete for a “4” (above-and-beyond) grade we suggest that you model objects with interesting motion, have some added complexity to the hierarchical structure of your object (say, something more than a Y-shaped robotic arm with 2 fingers …), or use components in your model that are particularly creative.

Readings (new!)

Although we will try to make the class lectures and slides be as descriptive as possible, and have them be your primary reference for many of the concepts discussed in class, we will also provide supplemental reading materials that help build more sound foundations for the theoretical concepts discussed in class. Although reading these in great detail is not an absolute necessity for completing the programming assignments, we believe you would benefit from doing so; some of these will also prepare you for the lectures ahead of us!

At this point, we recommend that you review the following:

  • Readings about the basic math (Linear Algebra and coordinate systems)
  • If you need to brush up on linear algebra, you can try chapters 1,2 and 4 or Practical Linear Algebra (Link, Link, Link)
  • Foundations of Computer Graphics (Chapter 6, section 1 Link) discusses transformations in a manner similar to Hart, if you want to see it another way.
  • Reading ahead to Chapter 7 of Hart’s Big Fun Computer Graphics Book (Link) will give you a sense of why we’re so interested in transformations.
  • There is a highly recommended tutorial about types of graphics (image vs. objects) so you know why we’re starting where we are.

Leave a Comment

Previous post:

Next post: