Due: Thursday, September 17 (see the class late policy on the Syllabus)
Synopsis: You will make a program with an articulated object and have it be animated (move around).
Learning Objectives: To see how transformations and hierarchical objects are useful in modeling and animation, and to experiment with using them in web programming.
Evaluation: Check/No Check/Above and Beyond. You get a check if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). Gold stars to people who make interesting things (or even simple things that move in interesting ways). Your object must be hierarchical, and move in a way that shows it off (e.g. there’s a thing that moves that has a sub-piece that moves relative to it).
Handin: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. (Link). Make sure that you turn in all files needed for your program to run.
Description
In class, we’ve been learning about transformations. Now is you chance to try them 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 (there should be a rotate or something like that).
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.
A standard example is to make a car: the wheels of the car spin, but they stay attached to the car as it moves around.
Since we’re modernizing the class we thought it would be more appropriate to ask you to create a quadcopter – with 4 propellers that spin while the copter flies around. Since we’re doing 2D, it’s best to do this as a top view. I made one of these (link). Note: you can look at my code for reference if you like (I am not hiding it). However, you must make your own object and motion. You should do something better than me – both in terms of the thing you make and the quality of the code.
Since we prefer you to be creative, you don’t have to make a QuadCopter – 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. My QuadCopter flies around and its 4 propellers spin. We recommend you use “requestAnimationFrame” to do the animation (or setTimeout). See the tutorial, especially the last example.
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.
Coming Attractions
This assignment is part of Programming Assignment Group 1.
{ 1 trackback }