Page 6: Quadcopter Exercise

Note: this is not the last page. There is more in the workbook after this exercise. Next: SVG Tutorial and Transformations

Box 1: Exercise 4, Quadcopter

To try out hierarchical modeling and animation, you will make a QuadCopter. Since we’re still doing 2D, we’ll make a top view. This is a hierarchical model: the QuadCopter moves around (and turns) and has 4 propellers that stay attached, but spin around. You can make it fancier if you like. You can see examples from a previous class below.

Some requirements:

1. Your QuadCopter can be simple in shape, but it must have a front, and 4 arms that the rotors attach to.
2. The propellers can be simple, but them must have an obvious center that they spin around.
3. Your scene must have a QuadCopter that travels in a circle and points forward as it goes around the circle. (yes, real quadcopters do not need to face their direction of travel - but for this, the quadcopter has to face where it is going)
4. The propellers must spin at different rates.
5. Your quadcopter must be done using Canvas, and put into a Canvas element on this page. You can use the above canvas with id canvas1 on this page for it.

For your assignment, you need to make a quadcopter. If you want to make something else, you can make it in addition to the quadcopter. There are many other vehicles with spinning parts.

Your code must be in 03-06-01.html and 03-06-01.js. We’ve given you the basics. You must use window.requestAnimationFrame correctly, including using the time parameter. You learned about this in previous workbooks, and the code should give you plenty of examples. You may use features of Canvas that we have not learned about in class yet (like Bezier curves), but you do not have to.

You can see examples of past assignments at Galleries. Note: if you find code on the web from previous students, you should not look at it or copy it.

Beyond the Basics

The list above is for a complete assignment to get the regular points for this exercise (20). Basically, you need to make one quadcopter that moves in a circle with propellers that spin. You may earn up to advanced points by adding additional features.

1. Have multiple “copters” (vehicles with spinning parts): the copters need to be different in appearance or motion (2pt)
2. Have quadcopters that fly in complex paths (at least one should still fly in a circle). (2pts)
3. Make cool looking quadcopters (2pts).
4. Provide some kind of interaction (e.g., let the user fly a quadcopter with the keyboard). You can add controls to the HTML, or respond to events in the Canvas. If the user is supposed to do something, make sure that the HTML has instructions above the Canvas. (2pts)
5. Make the quadcopters “do something”. You could have people that the quadcopter flies to and rescues - they could wave their arms to flag it down (more articulated motion!). (2 pts)
6. Make other articulated objects in the scene that are animated to show off their articulations. (1 pts)

Note: for each of these, the grader will not give you points unless you explain what you did and how to see these features (things we should watch for, interactions we can try, etc.) in 03-workbook.txt. Also, no matter how much you do, we will only add at most 8 advanced points for the entire workbook.

Remember that the main learning goal of the assignment is hierarchical modeling using transformations with parts.

Remember: advanced points are harder to get than regular points. Be sure to get regular points first. For example, if you make a quadcopter do something more complex than flying in a circle, you should also have another one that flies in a circle.

Next: SVG Tutorial and Transformations