Description
Description
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
(http://glmatrix.net/) or TWGL (https://twgljs.org/) that we discussed in class. Although
glMatrix would be gently 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
CS 559 Programming Assignment 3
https://canvas.wisc.edu/courses/320922/assignments/1727899?module_item_id=5469690 3/3
modeled object implemented via Canvas calls [JSbin link] (https://jsbin.com/hozeyar) , and
then saw how the exact same functionality (and appearance) can be implemented using
glMatrix representations of transformation matrices [JSBin link] (http://jsbin.com/yifahoq) .
We also saw an example that uses TWGL as the underlying matrix library [JSBin link]
(https://jsbin.com/qutelof) . 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] (http://jsbin.com/leropag) ). 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]
(http://jsbin.com/zimaqos) . You can find implementations for all these examples in our GitHub
repository (https://github.com/sifakis/CS559F22_Demos) 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.
One possible idea in your quest for making your assignment more interesting: You may
consider using some simple parametric curves like the ones we have been recently talking
about, to either add interesting shapes, or create an interesting motion/animation by making
certain objects move along a curved trajectory … just an idea, certainly not a requirement!
CS 559 Programming Assignment 3
