Web Page Icon

Firework Effect

A Dynamic Visual Display: Fireworks Animation

Fireworks are a symbol of celebration, bringing excitement, beauty, and awe to any occasion. In the digital world, fireworks animations allow designers to replicate the vibrancy of real-life fireworks through programming, providing users with engaging and interactive visual experiences. These animations are often used in websites, games, and apps to create captivating displays that mimic the burst of colors and particles found in actual fireworks shows.

At its core, a fireworks animation captures the essence of fireworks by simulating their key elements: the launch, the explosion, and the fading of particles. A firework's journey begins as it shoots into the sky, followed by an explosion at its peak, scattering colorful sparks. These sparks gradually fade away, creating a momentary but spectacular display. The goal of a fireworks animation is to mimic these stages in a visually appealing and fluid way.

Creating Fireworks Animations with HTML5 and JavaScript

One of the most popular methods for creating fireworks animations on the web is using HTML5 Canvas combined with JavaScript. The <canvas> element in HTML5 provides a space for drawing graphics directly within a browser, while JavaScript controls the animation. The power of JavaScript enables developers to simulate the random behavior of fireworks, including their explosion patterns, particle effects, colors, and movement.

A fireworks animation typically consists of particles that represent the small sparks scattered during an explosion. These particles vary in size, color, and speed, simulating the unpredictable nature of fireworks. JavaScript also allows developers to incorporate physics into the animation, ensuring that particles move outward from the center of the explosion and eventually fall back to the ground due to gravity.

The timing and easing functions of JavaScript are crucial for making the animation appear smooth and natural. For instance, easing functions control the acceleration and deceleration of particles, preventing them from moving too abruptly and ensuring that the animation flows seamlessly. In addition, developers often introduce random elements such as particle speed, color, and size to enhance realism and mimic the unpredictable nature of fireworks.

Example of Fireworks Animation

In a simple fireworks animation, when a user clicks on the screen, a firework explodes at the click location, with colorful particles shooting outward. Here's how the code works:

  1. Canvas Setup: The canvas fills the entire screen, providing an area where the animation is drawn.
  2. Particles: Each firework consists of numerous particles, which have random properties such as color, size, and movement.
  3. Animation Loop: A loop continuously updates the position of each particle and redraws it on the canvas until the particle fades out.
  4. User Interaction: The animation is triggered by a user action, such as clicking, making it interactive.

Advanced Techniques in Fireworks Animation

While basic fireworks animations can be achieved using simple JavaScript and canvas, more advanced techniques can elevate the experience. For example, developers can add multi-stage fireworks, where the firework explodes in multiple phases, creating a more complex and visually engaging effect. Additionally, sound integration can enhance the experience by synchronizing audio with the animation, creating a more immersive display.

To add more depth to the animation, gradient colors can be used to create smooth transitions between different shades, mimicking the gradual change in color seen in real fireworks. For a truly dynamic experience, 3D fireworks can be implemented using libraries like Three.js, allowing users to interact with fireworks in three-dimensional space.

Why Use Fireworks Animations?

Fireworks animations serve multiple purposes in digital design. They are used in celebrations such as product launches or special events, bringing an element of excitement and festivity to the screen. Additionally, they can increase engagement by adding interactivity to websites and games, where users can trigger the display themselves. Fireworks animations are also a great way to add aesthetic appeal to websites, making the design more captivating and visually dynamic.

html 
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Fireworks Animation</title>
      <link rel="stylesheet" href="test.css">
    </head>
    <body>
      <canvas id="fireworksCanvas"></canvas>
      <script src="test.js"></script>
    </body>
    </html>
css 
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
  }
  
  canvas {
    display: block;
  }
js 
const canvas = document.getElementById("fireworksCanvas");
    const ctx = canvas.getContext("2d");
    
    // Set canvas to full-screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    window.addEventListener("resize", () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
    
    const fireworks = [];
    const particles = [];
    
    class Firework {
      constructor(x, y, targetY, color) {
        this.x = x;
        this.y = y;
        this.targetY = targetY;
        this.color = color;
        this.speedY = (y - targetY) / 30;
        this.radius = 3;
        this.exploded = false;
      }
    
      draw() {
        if (!this.exploded) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        }
      }
    
      update() {
        if (!this.exploded) {
          this.y -= this.speedY;
          if (this.y <= this.targetY) {
            this.exploded = true;
            this.createParticles();
          }
        }
      }
    
      createParticles() {
        const colors = ["red", "blue", "yellow", "green", "purple", "orange"];
        for (let i = 0; i < 100; i++) {
          const color = colors[Math.floor(Math.random() * colors.length)];
          particles.push(new Particle(this.x, this.y, color));
        }
      }
    }
    
    class Particle {
      constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = Math.random() * 2 + 1;
        this.speedX = Math.random() * 4 - 2;
        this.speedY = Math.random() * 4 - 2;
        this.alpha = 1;
      }
    
      draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
      }
    
      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.alpha -= 0.02;
      }
    }
    
    function createFirework(x, y) {
      const colors = ["red", "blue", "yellow", "green", "purple", "orange"];
      const color = colors[Math.floor(Math.random() * colors.length)];
      const targetY = Math.random() * canvas.height * 0.5; // Random target height
      fireworks.push(new Firework(x, y, targetY, color));
    }
    
    function animate() {
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    
      for (let i = fireworks.length - 1; i >= 0; i--) {
        const firework = fireworks[i];
        if (firework.exploded) {
          fireworks.splice(i, 1);
        } else {
          firework.update();
          firework.draw();
        }
      }
    
      for (let i = particles.length - 1; i >= 0; i--) {
        const particle = particles[i];
        if (particle.alpha <= 0) {
          particles.splice(i, 1);
        } else {
          particle.update();
          particle.draw();
        }
      }
    
      requestAnimationFrame(animate);
    }
    
    canvas.addEventListener("click", (e) => {
      createFirework(e.clientX, canvas.height);
    });
    
    animate();