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:
When the user clicks in the element, a circle appears under the mouse.
Circles get added (so the user can make lots of circles).
If a circle is under the mouse, it changes color.
All of your code for this exercise should go into the function
in the file
A02_p5.js - we've started things for you.
- The examples on page 4 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
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.
- 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 to see a way to do this.
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
Your job is to make something that looks like simple fireworks.
- 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.
- 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.
- 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:
- have the circles start at random locations on the ground (but make sure they "explode" at the mouse positions)
- add some random fireworks in addition to the ones created by clicks
- randomize the colors (so each firework is a different color)
- make things follow projectile motion (have downward acceleration due to gravity)
- or other creative things (although, the "shooting at the mouse position and having it explode there" is a requirement)
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.