Concept:
The concept behind my code is a joyful celebration brought to life through a fireworks simulation. It all started with a personal inspiration – something that never fails to make me happy. I wanted to capture that happiness and express it through code, turning it into a dynamic and interactive fireworks display.
At first, my code was a simple attempt at creating a fireworks animation. It lacked the functionality to launch fireworks interactively. It looked like this:
However, during my programming class, I learned how to incorporate user interaction. Now, when the mouse is pressed, the fireworks are generated. So, my code has evolved to include this interactive feature.
Highlight of Code:
The update() method in the provided code is a central part of the fireworks simulation. It controls the behavior of a firework object based on whether it has exploded or is still ascending in the sky.
update() {
if (this.exploded) { // Update particles if the firework has exploded
for (let i = 0; i < this.particleCount; i++) {
this.particles[i].update();
}
if (this.particleCount === this.particleEnded) {
this.alive = false;
}
} else { // Accelerate, move, and draw the firework until it explodes
this.accelerate();
this.move();
this.draw();
if (this.vy >= 0) {
this.explode();
}
}
}
if (this.exploded) { … }: This condition checks whether the firework object has already exploded. The code within this block is executed if the firework has exploded..
Inside this block, there’s a for loop that iterates through all the particles of the firework’s explosion, which are stored in the particles array. It calls the update() method for each particle. This is responsible for updating the position, velocity, and appearance of each particle as they move away from the explosion point.
After updating the particles, there’s another check to see if the number of particles that have ended (burned out) is equal to the total particle count (this.particleCount). If this condition is met, it sets the alive property of the firework to false. This means that all the particles have completed their animation, and the firework is considered no longer active.
else { … }: This section of the code is executed when the firework is still ascending in the sky and has not yet exploded. It corresponds to the earlier phase of the firework’s motion.
this.accelerate();: This method is called to apply an acceleration to the firework. Typically, this acceleration represents the effect of gravity, causing the firework to fall faster as it ascends.
this.move();: This method updates the position of the firework, simulating its movement upward in the sky.
this.draw();: This method is responsible for drawing the firework on the canvas, typically as a line representing its trail as it rises.
if (this.vy >= 0) { … }: This condition checks whether the vertical velocity (vy) of the firework has become non-negative, indicating that the firework has reached its peak height and is about to explode. If the condition is met, it calls the explode() method to initiate the explosion phase.
Reflection:
The code successfully achieves the initial concept of creating an interactive and visually appealing fireworks display, effectively simulating the behavior of fireworks with a personal touch through mouse interaction. While the code does a decent job at creating realistic fireworks, there’s room for improvement in enhancing visual effects, such as diverse particle shapes, a broader range of colors, and smoother transitions, to make the display even more captivating.
For future work and improvements, several exciting possibilities exist. These include experimenting with enhanced particle effects, introducing a wider variety of colors and color transitions, adding sound effects to complement the visuals, allowing for the simultaneous launch of multiple fireworks, implementing user-configurable parameters for customization, enhancing the visual background for a more immersive environment, optimizing performance for better handling of a large number of particles
