Confetti Party Popper Animation using JavaScript

What is a Party Popper ?

A party popper is a handheld pyrotechnic device commonly used at parties. It emits a loud popping noise by means of a small friction-actuated explosive charge that is activated by pulling a string. The explosive charge comes from a very small amount of Armstrong’s mixture (a highly sensitive explosive) in the neck of the bottle-like shape.

Follow this video for complete guidance :

 

1. Create confetti.js file with following code in it
   confetti.js

   var maxParticleCount = 150; //set max confetti count
   var particleSpeed = 2; //set the particle animation speed
   var startConfetti; //call to start confetti animation
   var stopConfetti; //call to stop adding confetti
   var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
   var removeConfetti; //call to stop the confetti animation and remove all confetti immediately
   
   (function() {
     startConfetti = startConfettiInner;
     stopConfetti = stopConfettiInner;
     toggleConfetti = toggleConfettiInner;
     removeConfetti = removeConfettiInner;
     var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
     var streamingConfetti = false;
     var animationTimer = null;
     var particles = [];
     var waveAngle = 0;
     
     function resetParticle(particle, width, height) {
       particle.color = colors[(Math.random() * colors.length) | 0];
       particle.x = Math.random() * width;
       particle.y = Math.random() * height - height;
       particle.diameter = Math.random() * 10 + 5;
       particle.tilt = Math.random() * 10 - 10;
       particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
       particle.tiltAngle = 0;
       return particle;
     }
   
     function startConfettiInner() {
       var width = window.innerWidth;
       var height = window.innerHeight;
       window.requestAnimFrame = (function() {
         return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimationFrame ||
           function (callback) {
             return window.setTimeout(callback, 16.6666667);
           };
       })();
       var canvas = document.getElementById("confetti-canvas");
       if (canvas === null) {
         canvas = document.createElement("canvas");
         canvas.setAttribute("id", "confetti-canvas");
         canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
         document.body.appendChild(canvas);
         canvas.width = width;
         canvas.height = height;
         window.addEventListener("resize", function() {
           canvas.width = window.innerWidth;
           canvas.height = window.innerHeight;
         }, true);
       }
       var context = canvas.getContext("2d");
       while (particles.length < maxParticleCount)
         particles.push(resetParticle({}, width, height));
       streamingConfetti = true;
       if (animationTimer === null) {
         (function runAnimation() {
           context.clearRect(0, 0, window.innerWidth, window.innerHeight);
           if (particles.length === 0)
             animationTimer = null;
           else {
             updateParticles();
             drawParticles(context);
             animationTimer = requestAnimFrame(runAnimation);
           }
         })();
       }
     }
   
     function stopConfettiInner() {
       streamingConfetti = false;
     }
   
     function removeConfettiInner() {
       stopConfetti();
       particles = [];
     }
   
     function toggleConfettiInner() {
       if (streamingConfetti)
         stopConfettiInner();
       else
         startConfettiInner();
     }
   
     function drawParticles(context) {
       var particle;
       var x;
       for (var i = 0; i < particles.length; i++) {
         particle = particles[i];
         context.beginPath();
         context.lineWidth = particle.diameter;
         context.strokeStyle = particle.color;
         x = particle.x + particle.tilt;
         context.moveTo(x + particle.diameter / 2, particle.y);
         context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
         context.stroke();
       }
     }
   
     function updateParticles() {
       var width = window.innerWidth;
       var height = window.innerHeight;
       var particle;
       waveAngle += 0.01;
       for (var i = 0; i < particles.length; i++) {
         particle = particles[i];
         if (!streamingConfetti && particle.y < -15)
           particle.y = height + 100;
         else {
           particle.tiltAngle += particle.tiltAngleIncrement;
           particle.x += Math.sin(waveAngle);
           particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
           particle.tilt = Math.sin(particle.tiltAngle) * 15;
         }
         if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
           if (streamingConfetti && particles.length <= maxParticleCount)
             resetParticle(particle, width, height);
           else {
             particles.splice(i, 1);
             i--;
           }
         }
       }
     }
   })();

2. Create index.html file with following code in it
   index.html

   <style type="text/css">
     img{
       object-fit: cover;
       width: 100%;
       height: 100%;
       overflow: hidden;
     }
     body:after{
       content: '';
       background: #44444447;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       z-index: 2;
       position: absolute;
     }
     body{
       position: relative;
       margin: 0;
       padding: 0;
       height: 100vh;
       width: 100%;
     }
     canvas{
       position: absolute;
       top: 0;
     }
   
   </style>
   <body class="image">
     <img src="https://media.gq-magazine.co.uk/photos/602bf9c02c8a63e895f408bf/master/w_3000,h_1996,c_limit/16022021_2021-02-16%20at%204.57.45%20PM%203.jpg">
   </body>
   
   <script type="text/javascript" src="confetti.js"></script>
   <script type="text/javascript">
       startConfetti();
   </script>