Workbook 2, page 5: Try Canvas Programming

This workbook has two programming exercises.

The first one is required. Completing it correctly is part of "completing" the workbook.

The second one is optional. Doing it correctly gets you bonus points. You cannot get bonus points for exercise 2 if you don't have a solution to exercise 1.

You should do these exercises by editing the file "A02_p5.js", we've actually started things for you. specifically, your code for exercise 1 should go into the function wb2_pg5_ex1, and your code for exercise 2 should go into the function wb2_pg5_ex2. Please put all of your code inside of these functions!

Exercise 1: Canvas Event Programming

In the Canvas element box (with id ex1canvas) inside this box, please give 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).

  2. If a circle is under the mouse, it changes color.

All of your code for this exercise should go into the function wb2_pg5_ex1 in the file A02_p5.js - we've started things for you.


Exercise 2: Fireworks

This is a bonus exercise: if you do it correctly, you will get bonus points. But don't try it until you get exercise 1 working.

And put all your code into the function wb2_pg5_ex2.

Your job is to make something that looks like simple fireworks.

  1. When the user clicks the mouse in the rectangle, a circle starts at the bottom edge of the screen and travels to the mouse position.
  2. When the circle gets to the position of the click, 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") 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).

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

Roughly, you will get 1 bonus point for #1 (shooting circles to specific locations), 1 bonus point for #2 (having them "explode" at that location), and more points for extra features and creativity.

Summary: Canvas Exercises

That's the main programming part for this week, however, on page 6 we have one last detail to discuss.