Solved:Programming Assignment#3 Solution

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.


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

https://canvas.wisc.edu/courses/320922/assignments/1727899?module_item_id=5469690    2/3
11/3/22, 1:11 AM    Programming Assignment #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!






















https://canvas.wisc.edu/courses/320922/assignments/1727899?module_item_id=5469690    3/3