Page 7: Try Canvas Programming

CS559 Spring 2021 Sample Solution - Workbook 2

Written by CS559 course staff

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

This page has two programming exercises.

The second one is more challenging, but has bonus points. You should only try it after completing the rest of the workbook. Think of it as a way to get from an AB to an A or A+.

You should do these exercises by editing the files 02-07-01.js and 02-07-02.js.

Box 1: Canvas Event Programming

In the Canvas element box (with id box1canvas), please implement the following behavior:

  1. When the user clicks in the element, a circle appears under the mouse. Circles get added, so the user can make lots of circles. When I say circle, I mean a filled in circle (mathematically, this is a disc).

  2. If a circle is under the mouse, it changes color. The circle changes color back to its original color when the mouse leaves. When the circle first appears, it might have the “under the mouse color” or the “not under the mouse” color. While a newly created circle is under the mouse, a new circle might not notice that it is under the mouse until after the mouse moves over it. Either way is OK.

  3. (bonus - more work for less points) If you click on a circle, it changes its color, but it still must be affected by mouse over.

If you do parts 1 and 2 (which everyone should do), (these colors are examples): when you click, a green circle appears; when the mouse enters a green circle, it changes to yellow, when it leaves the yellow circle it changes back to green. In part 3, if you click on a yellow circle (if you try to click on a green circle, it would change to yellow when you enter), it may change to red. The red circle would change to orange (or yellow) when the mouse enters it, but would change back to red, not green, when the mouse leaves. Of course, you need to let the user make lots of circles - and they should all work correctly.

All of your code for this exercise should go into the file 02-07-01.js. You should not need to change 02-07-01.html We’ve started things for you.

Rubric for Box 1 (With how this example would have been graded)
  • making circles appear when the mouse is clicked (Box: 02-07-01) (Points:5) (5/5)
  • having the circles change color when the mouse is over them (Box: 02-07-01) (Points:4) (4/4)
  • having the circles change their color back when the mouse leaves them (Box: 02-07-01) (Points:4) (4/4)
  • having the circle change color when clicked (bonus points), with the hover behavior still working (Box: 02-07-01) (Bonus Points:1) (1/1)
Hints
  • The examples on Page  6  (Interactive 2D Scenes) should give you lots of ideas. Those did rectangles, not circles. But a lot of other things are the same.
  • You will need to keep a list of circles, so you can check if the mouse is inside of them.
  • You can do this in a purely event driven style (using onclick and onmousemove) or with an animation loop.
  • You can make the circles all the same size (pick a radius - like 10 pixels).
  • You can decide if the mouse is over a circle by checking to see if the distance between the mouse and the center of the circle is less than the circle’s radius.
  • Making the behavior correct at the edge of the box is hard, since you may not get mousemove events when the mouse is outside the box. Don’t worry if the mouse behavior isn’t correct outside of the canvas.
  • Get part 1 to work first (making circles on click). Then get part 2 to work.
  • Getting the mouse position relative to the element requires knowing where the element is. Read the example code on Page  4  (Canvas Drawing: Your Turn) to see a way to do this.

Exercise 2: Fireworks

And put all your code into 02-07-02.js. You can edit 02-07-02.html if you want to, but you shouldn’t need to.

Your job is to make something that looks like fireworks.

  1. When the user clicks the mouse in the canvas (rectangle), a circle (a firework) starts at the bottom edge of the screen and travels to the mouse position.
  2. When the firework (circle) gets to the position of the click, it explodes. That is, it changes to a bunch of small squares that start moving outward from that position. They move until they get to the edge of the screen (or they can “fade out” - see the bonus below) after a while.
  3. You need to be able to have multiple fireworks happening at the same time (the user should be able to click to shoot a new one before the first one is done).
  4. You should have the fireworks be different colors.

You can start simple and add extra, more complex things worth bonus points:

  • Have the explosion pieces fade out over time. They disappear before they get to the edge of the screen (unless they started close to the egde).
  • Gave the circles start at random locations on the ground (but make sure they “explode” at the mouse positions)
  • Add random fireworks in addition to the ones created by user clicks.
  • Make the fireworks follow projectile motion (have downward acceleration due to gravity) - this means that the fireworks move in parabolic arcs, not straight lines. (If you want to do this, you’ll need to remember your high school physics).
The rubric explains how much each of these features is worth (With how the second example would have been graded)
  • user clicks mouse, firework shoots from the bottom towards mouse (Box: 02-07-02) (Points:3) (3/3)
  • firework moves to mouse position over time (Box: 02-07-02) (Points:3) (3/3)
  • firework disappears (explodes) when it gets to position (Box: 02-07-02) (Points:3) (3/3)
  • small moving pieces appear where big one explodes (Box: 02-07-02) (Points:2) (2/2)
  • pieces move outward from explosion (Box: 02-07-02) (Points:2) (2/2)
  • multiple fireworks at once (if user clicks quickly) (Box: 02-07-02) (Points:3) (3/3)
  • fireworks are different colors (Box: 02-07-02) (Points:2) (2/2)
  • explosions fade out (or disappear) after a distance (Box: 02-07-02) (Bonus Points:2) (2/2)
  • fireworks start from random locations at bottom (Box: 02-07-02) (Bonus Points:1) (1/1)
  • random fireworks in addition to user clicks (Box: 02-07-02) (Bonus Points:1) (1/1)
  • projectile motion (Box: 02-07-02) (Bonus Points:2) (2/2 as long as something has projectile motion)
Hints
  • The rubric breaks the assignment into small steps. This can help you plan. Do each step before moving on to the next.
  • Read the code on Page  6  (Interactive 2D Scenes) for ideas.
  • Your firework objects will probably want to store their target destination so they can check when they arrive.
  • You may need to check if the object has past its goal - in case it doesn’t hit it exactly.
  • Your small (explosion pieces) may want to keep track of time so they can disappear or fade over time.
  • Don’t try to do the bonus points until you get the basics working.

Summary: Canvas Exercises

This is the end of the workbook. Don’t forget to commit and push your work to GitHub, and to do the Workbook Quiz to let us know that you are done and ready to be graded!

Page Rubric
  • (Box: 02-07-01) (5 pts) making circles appear when the mouse is clicked
  • (Box: 02-07-01) (4 pts) having the circles change color when the mouse is over them
  • (Box: 02-07-01) (4 pts) having the circles change their color back when the mouse leaves them
  • (Box: 02-07-02) (3 pts) user clicks mouse, firework shoots from the bottom towards mouse
  • (Box: 02-07-02) (3 pts) firework moves to mouse position over time
  • (Box: 02-07-02) (3 pts) firework disappears (explodes) when it gets to position
  • (Box: 02-07-02) (2 pts) small moving pieces appear where big one explodes
  • (Box: 02-07-02) (2 pts) pieces move outward from explosion
  • (Box: 02-07-02) (3 pts) multiple fireworks at once (if user clicks quickly)
  • (Box: 02-07-02) (2 pts) fireworks are different colors
  • (Box: 02-07-01) (1 bonus pts) having the circle change color when clicked (bonus points), with the hover behavior still working
  • (Box: 02-07-02) (2 bonus pts) explosions fade out (or disappear) after a distance
  • (Box: 02-07-02) (1 bonus pts) fireworks start from random locations at bottom
  • (Box: 02-07-02) (1 bonus pts) random fireworks in addition to user clicks
  • (Box: 02-07-02) (2 bonus pts) projectile motion