Solved:Programming Assignment#2 Solution

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

https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923    2/4implementation 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  (https://jsbin.com/wovupusife) ). 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  (http://graphics.cs.wisc.edu/Courses/559-f2015/Examples/QuadCopter/quad.html) demo flies around and its 4 propellers spin. One possibility is to use “requestAnimationFrame” to do the animation (or setTimeout). See the tutorial  (http://graphics.cs.wisc.edu/WP/tutorials/when-do-i-draw-some-comments-on-code-organization/) , 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


https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923    3/4





































































4/4