Page 13: Quadcopter Exercise

Note: this is not the last page. There is more in the workbook after this exercise.

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 they 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 02-13-01.html and 02-13-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 provided code should give you plenty of examples. You may use features of Canvas that we have not learned about in class yet, but you do not have to.

You can see examples of past assignments at 2023 Workbook 3 Gallery and 2022 Workbook 3 Gallery.

Beyond the Basics

The list above is for a complete assignment to get the basic items for this exercise. Basically, you need to make one quadcopter that moves in a circle with propellers that spin. The definition of “enough” advanced or creative features is at the discretion of the grader.

1. Have multiple “copters” (vehicles with spinning parts): the copters need to be different in appearance or motion.
2. Have quadcopters that fly in complex paths (at least one should still fly in a circle).
3. Make cool looking quadcopters.
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.
5. Make the quadcopters “do something”. You could have people whom the quadcopter flies to and rescues - they could wave their arms to flag it down (more articulated motion!).
6. Make other articulated objects in the scene that are animated to show off their articulations.

The grader might not recognize advanced features. You can describe what you’ve done in this type-in box to help them. Be sure to checkpoint your localstore and save it to a file!

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

Also remember that advanced items are harder to get than regular items. Be sure to complete the basic items first to get the easy points before you move on to get the harder points.