Page 23: Fireworks

Spring 2026 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.

You can see examples of past assignments at 2023 Fireworks Gallery 2022 Fireworks Gallery 2021 Fireworks Gallery.

Exercise 2: Fireworks

Put all your code into 01-23-01.js . You can edit 01-23-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 features 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 advanced features (to get an “advanced” grade):

  • 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 at at 2023 Fireworks Gallery 2022 Fireworks Gallery 2021 Fireworks Gallery.

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  21  (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 features until you get the basics working.
01-23-01   rubric Kinds of boxes:
view - look at the box and experiment with it
examine - look at the code for the box
edit - change the box's content
rubric - several steps are suggested in the rubric page - form elements on page in rubric
   01-23-01.html   01-23-01.js
Kind Kind of rubric items:
standard - expected from all students
advanced - used to get a better grade
creative - an opportunity to do something creative
levels - rubric item graded by selected achievement level
optional - not required, but encouraged 		Description
standard user clicks mouse, firework shoots from the bottom towards mouse
standard firework moves to mouse position over time
standard firework disappears (explodes) when it gets to position
standard small moving pieces appear where big one explodes
standard pieces move outward from explosion
standard multiple fireworks at once (if user clicks quickly)
standard fireworks are different colors
advanced explosions fade out (or disappear) after a distance
advanced fireworks start from random locations at bottom
advanced random fireworks in addition to user clicks
advanced projectile motion
creative Creative Fireworks
Next: Page  24 - Student's Choice: Do Something Creative!