Description
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 our 4-point grading scheme, as discussed in our introductory lecture. 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 (i.e. a “4”) will be awarded for people who have crafted something particularly cool. As a general rule, no more than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4” grade.0
Description
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 
(http://graphics.cs.wisc.edu/Courses/559-f2015/Examples/QuadCopter/quad.html) ). Note: we are not hiding the source code of this
know why we’re starting where we are.
https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923
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)
Tutorial: Points and Vectors (http://graphics.cs.wisc.edu/WP/tutorials/points-vectors-and-coordinate-systems-why-are-points-and-vectors-different/)
Chapter 1 of Hart’s Big Fun Computer Graphics Book (Link)
Chapter 5 of Hart’s Big Fun Computer Graphics Book (Link)
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) (http://graphics.cs.wisc.edu/WP/tutorials/image-based-graphics-vs-object-based-graphics/) so you
11/3/22, 1:11 AM
Programming Assignment #2
4/4
