CS559 Spring 2021 Sample Solution - Workbook 3
Written by CS559 course staff
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
Rubric for Box 1 (With how this example would have been graded)
- quadcopter has a front and 4 arms (Points:10) (10/10 for the plain Red-Green-Blue QuadCopter and the Helicarrier)
- four attached propellers that spin (Points:10) (10/10 for all three QuadCopters)
- propellers spin at different rates (Points:2) (2/2 for all three QuadCopters)
- goes around a circle (Points:3) (3/3 for the plain Red-Green-Blue QuadCopter)
- faces points forward while going around circle (Points:3) (3/3 for the plain Red-Green-Blue QuadCopter)
- multiple vehicles (must have spinning parts) (Points:2) (2/2 for three QuadCopters)
- complex paths (at least one 'copter must be a circle) (Points:2 for the plain Red-Green-Blue QuadCopter) (2/2)
- cool looking vehicles (Points:2) (2/2 for the Helicarrier)
- interaction (be sure to document) (Points:2) (2/2 for the keyboard interaction for the Gunship)
- quadcopters do something beyond move in a path (Points:2) (2/2 for the Helicarrier turning and moving towards the random person)
- other articulated object (Points:1) (1/1 for the random person waving their arms)
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 an example from the 2015 class below.
- Your QuadCopter can be simple in shape, but it must have a front, and 4 arms that the rotors attach to.
- The propellers can be simple, but them must have an obvious center that they spin around.
- 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)
- The propellers must spin at different rates.
- Your quadcopter must be done using Canvas, and put into a Canvas element on this page.
You can use the above canvas with id
canvas1on this page for it.
We have asked students to do variants of this assignment in the past. So, if you look around, you will find the old assignment, and even old example code. We can’t stop you from looking at them. Don’t copy them!
In fact here’s the 2015 Quadcopter Assignment, and the 2015 Quadcopter Example. You can look at the old program to get an idea of what to do for this assignment. The front of the quadcopter is flatter than the back - so it does have a front. The propellers spin at different rates - but not in a meaningful way. Real quadcopters control themselves by varying the speeds of the rotors.
The old assignment was actually more open ended (you didn’t have to make a QuadCopter - that’s just what this version does). 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.
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 8 bonus points by adding additional features.
- Have multiple “copters” (vehicles with spinning parts) (2pt)
- Have quadcopters that fly in complex paths (at least one should still fly in a circle). (2pts)
- Make cool looking quadcopters (2pts).
- 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)
- 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)
- Make other articulated objects in the scene that are animated to show off their articulations. (1 pts)
Note: for each of these, it is the grader’s discretion how many points you get. Also, no matter how much you do, we will only add at most 11 bonus points for the entire workbook (including the potential bonus points on page 8).
Remember that the main learning goal of the assignment is hierarchical modeling using transformations with parts.
Be sure to explain in the text of the html file if there are any bonus point features - especially if they are not obvious (things we should watch for, interactions we can try, etc.).
Remember: bonus points are harder to get than regular points. Be sure to get those 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.