Page 8: Fireworks

CS559 Spring 2023 Sample Solution

This exercise is more challenging, but has advanced points. You should only try for advanced points after completing the rest of the workbook. Think of the advanced points as a way to get from an AB to an A or A+.

Exercise 2: Fireworks

Put all your code into 02-08-01.js. You can edit 02-08-01.html if you want to, but you shouldn’t need to. You should use the canvas API to draw, not SVG.

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 advanced points 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. The explosions should each be a different color (it’s OK if the upwards particles all have the same color).

You can start simple and add extra, more complex things worth advanced 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 edge).
  • Have 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).

You can see some examples on the galleries page on the course website.

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 advanced points until you get the basics working.
Box 02-08-01 Rubric (24 points total)
Points (18):
Box 02-08-01
3 pt
user clicks mouse, firework shoots from the bottom towards mouse
Box 02-08-01
3 pt
firework moves to mouse position over time
Box 02-08-01
3 pt
firework disappears (explodes) when it gets to position
Box 02-08-01
2 pt
small moving pieces appear where big one explodes
Box 02-08-01
2 pt
pieces move outward from explosion
Box 02-08-01
3 pt
multiple fireworks at once (if user clicks quickly)
Box 02-08-01
2 pt
fireworks are different colors
Advanced points (6):
Box 02-08-01
2 pt
explosions fade out (or disappear) after a distance
Box 02-08-01
1 pt
fireworks start from random locations at bottom
Box 02-08-01
1 pt
random fireworks in addition to user clicks
Box 02-08-01
2 pt
projectile motion

Summary: Fireworks

This is the end of the workbook. Don’t forget to commit and push your work to GitHub, and to do Canvas Assignment submissions WB2 and WB2G to let us know that you are done and ready to be graded! See Next: Hand-in and Gallery .