Page 6: Quadcopter Exercise

CS559 Spring 2021 Sample Solution - Workbook 3

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6 and page 8.

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.

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.

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.

We discourage you from trying to read the old code. It’s done in a weird way (archaic JavaScript - creating classes by hacking the prototype), uses drawing features we haven’t learned in class (Bezier curves), and is written in a weird way to account for future features. You’re better off figuring out how to do it yourself.

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.

  1. Have multiple “copters” (vehicles with spinning parts) (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, 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.

Next: SVG Tutorial and Transformations

Page 6 Rubric (39 points total)
Points (28):
Box 03-06-01
10 pt
quadcopter has a front and 4 arms
Box 03-06-01
10 pt
four attached propellers that spin
Box 03-06-01
2 pt
propellers spin at different rates
Box 03-06-01
3 pt
goes around a circle
Box 03-06-01
3 pt
faces points forward while going around circle
Bonus points (11):
Box 03-06-01
2 pt
multiple vehicles (must have spinning parts)
Box 03-06-01
2 pt
complex paths (at least one 'copter must be a circle)
Box 03-06-01
2 pt
cool looking vehicles
Box 03-06-01
2 pt
interaction (be sure to document)
Box 03-06-01
2 pt
quadcopters do something beyond move in a path
Box 03-06-01
1 pt
other articulated object