Programming Assignment #3

by Eftychios Sifakis on October 1, 2020

Due: Wednesday, October 7th. (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, using explicit matrix and vector representations for the points and transforms involved.

Learning Objectives: To obtain experience in using mathematical representations of 2D transforms (i.e. matrices), how such transforms are applied to homogeneous representations of vectors, and how transforms are combined.

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 from Week 5). 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 your previous programming assignment, you were asked to create a scene with one of more objects that are created according to the principles of hierarchical modeling. In creating such objects, you were asked to leverage the HTML5 Canvas transformation commands (i.e. the translate(), scale(), rotate() methods of the drawing context) and the stack supported within canvas (manipulated via the save(), restore() methods) to create models with multiple components whose transforms hierarchically depend on each other.

This week’s assignment asks you to produce something that visually could be very similar or even identical to the result of Assignment #2; however, instead of using the Canvas transforms and stack, you are asked to implement any transforms (and, by “implement”, we mean creating all the elementary transforms, combining them to create composite transforms, applying them to point locations to convert them from one coordinate system to another) using explicit matrix representations, using a matrix/vector library such as glMatrix or TWGL that we discussed in class. Although glMatrix would be slightly recommended, since we had the opportunity to cover it in more detail in class, you are absolutely welcome to use TWGL or some other matrix library instead.

One possible idea, if you are happy with the result you turned in for Programming Assignment #2 would be to first create a version of the same product, that is visually identical to what you implemented using the Canvas transformation functionality, but internally substitute all the calls to the translate(), scale(), rotate() calls (or the save(), restore() methods for the built-in transform stack) with glMatrix transform representations and operations. We saw a very good example of this in class; we examined a hierarchically modeled object implemented via Canvas calls [JSbin link], and then saw how the exact same functionality (and appearance) can be implemented using glMatrix representations of transformation matrices [JSBin link]. We also saw an example that uses TWGL as the underlying matrix library [JSBin link]. The only canvas transform-related operation you are allowed to use (it’s only optional to do so …) is the setTransform() method, if you don’t end up applying the transform yourself (like in this example [JSBin link]). You can also optionally implement your own stack (you are not allowed to use Canvas’ own stack, as in the save(), restore() methods) as we saw in examples in-class [JSBin link]. You can find implementations for all these examples in our GitHub repository under directories Week4/ and Week5/.

Although it is perfectly acceptable to produce a result that is identical to your programming assignment #2, as always we encourage you to be creative. If you want your submission to be competitive for a “4” score, similar embellishments that would boost your score in the previous assignment (in terms of aesthetics, complexity of motion, intricacy of model) would also be considered here; however note that if you previously got a “4” for being creative, but now you turned in the exact same visual result, it might not be enough to just change the matrix representation of the transforms to get a “4” again … you will need to be creative in a similar but different way.

Leave a Comment

Previous post:

Next post: