Page 8: Fireworks

Spring 2025 Sample Solution

This exercise is more challenging, but has advanced items. You should only try for advanced items after completing the rest of the workbook.

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  (7 basic + 4 advanced)   02-08-01.html   02-08-01.js
There are basic or advanced gallery items to be completed for Box 02-08-01. To get full points, please add explanations of what you did in the .html file (or as notes in the Workbook Form) and submit at least one screenshot and one video recording of the box to the Workbook Canvas Assignment.

Summary: Fireworks

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