FireWorks Animation

Project Overview: Fireworks Launcher

This project is an interactive web-based animation that simulates a fireworks launcher using the HTML5 Canvas API. It features a "cannon" at the bottom of the screen that follows the user's mouse or touch movements. When the user clicks or touches the screen, the cannon fires projectiles that travel upward and eventually explode into a burst of colorful particles, creating a classic fireworks effect.

The project is built using a modular object-oriented approach in JavaScript. It defines specific behaviors for different elements: the Cannon (the source), Cannonballs (the projectiles), and Particles (the explosion fragments). A central animation loop continuously updates the positions of these objects and redraws them on the screen, while a semi-transparent background fill is used to create a "trail" effect behind moving objects.

Key Code Parts

1. Cannon Rotation Logic
The cannon stays at the bottom center of the screen and uses trigonometry to calculate the angle between its base and the user's mouse position.

this.update = function() {
  desiredAngle = Math.atan2(mouse.y - this.y, mouse.x - this.x);
  this.angle = desiredAngle;
  this.draw();	
};

This snippet uses Math.atan2 to ensure the cannon always points exactly toward the user's cursor.

2. Creating the "Trail" Effect
Instead of completely clearing the screen every frame, the code draws a semi-transparent rectangle over the previous frame. This causes older positions of particles to fade out slowly rather than disappearing instantly.

c.fillStyle = "rgba(18, 18, 18, 0.2)";
c.fillRect(0, 0, canvas.width, canvas.height);

By setting the alpha value to 0.2, the animation gains a smooth motion-blur effect that makes the fireworks look more realistic.

3. The Explosion Lifecycle
Every cannonball has a "time to live" (TTL). Once that timer hits zero, the cannonball is removed from the screen and replaced by an Explosion object containing multiple particles.

if (cannonballs[i].timeToLive <= 0) {
  // Create particle explosion after time to live expires
  explosions.push(new Explosion(cannonballs[i]));
  cannonballs.splice(i, 1);
}

This logic manages the transition from a single flying projectile into a multi-particle burst.

4. Particle Physics
The individual particles within an explosion are given random velocities and are programmed to bounce off the edges of the screen to keep the action contained within the view.

if (this.x + this.radius + this.dx > canvas.width || this.x - this.radius + this.dx < 0) {
  this.dx = -this.dx;
}

This simple "if" statement checks if a particle has hit the left or right wall and reverses its horizontal direction (dx) to create a bounce.