Description
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
CS 559 Programming Assignment 2
implementation 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-codeorganization/) , 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
CS 559 Programming Assignment 2
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-andcoordinate-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
know why we’re starting where we are.
