Assignment 2: Fireworks Frenzy

(Click on screen)

For this assignment, I wanted to create something that looks appealing but is interactive as well. Ever since we learnt loops and manipulating speed and colors, I wanted to create a display of fireworks, because fireworks are something I admire not just as a kid but even now.

When the user clicks on the canvas, a new firework is created at that position. The firework ascends from below the screen, and when it reaches its designated height, it explodes into a burst of lines, each growing in length until it reaches a random maximum length. Once a firework is exploded, it is removed.

I implemented this by using an array to store and delete the fireworks and an array for the lines for each firework. I used 5 for loops: the first one is to iterate over the fireworks array and call the functions (in reverse order since we are deleting items), the second one is to iterate over the lines array and increase their length, the third one is to recheck that all lines reached its max length and updating the ‘done’ flag (this was to fix some glitches), the fourth one is to have the lines of the firework at different angles around the center, the fifth one is to find the endpoint of each line using the length and angle to finally create the firework.

I am happy with the entire code since I had to learn how arrays and functions work to implement this. What helped was that I am familiar with using arrays in Python and C++. The part that I am particularly proud of though is the function that brings everything together, since I had to recall how polar coordinates work to find the endpoint of a line:

function showFirework(firework) {
  R = random(10,250);
  G = random(10,250);
  B = random(10,250);
  stroke(R,G,B);
  strokeWeight(2);
  fill(R,G,B);
  if (!firework.isExploded) {
    ellipse(firework.x, firework.y, firework.radius * 2, firework.radius * 2); //center of firework
  } 
  else {
    for (let i = 0; i < firework.lines.length; i++) {
      //determining end point of line using angle and length
      const xEnd =
        firework.x +
        cos(radians(firework.lines[i].angle)) * firework.lines[i].length; //polar coordinates
      const yEnd =
        firework.y +
        sin(radians(firework.lines[i].angle)) * firework.lines[i].length;
      line(firework.x, firework.y, xEnd, yEnd);
    }
  }
}

Overall, I am satisfied with the output. In the future, I would like to make it more realistic by adding some fireworks using particle explosion as well as adding sound.