How to create realistic fireworks simulation in html5 canvas using javascript

how to make fireworks effect in html5 canvas using javascript - Nibunan

how to create fireworks in html5 canvas using javascript - Nibunan

how to write program to display fireworks effect in html5 canvas using javascript - Nibunan

how to write program to create crackers animation in html5 canvas using javascript - Nibunan

how to write code to create crackers effect in html5 canvas using javascript - Nibunan

Html5 canvas is evolving to give the rich graphics on browser without using flash or other plugins. Html5 canvas is being used in many places like games animations and rich user interfaces on web and so on.This airticle explains how to create realistic fireworks simulation in html5 canvas using javascript.

Demo

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Creating fireworks simulation using html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <audio style="display: none" id="myAudio" controls="">
      <source src="sound.wav" />
      </audio>
      <script type="text/javascript">
      var audio = document.getElementById("myAudio");
      function Random(range) {
      return Math.floor((Math.random() * range) + 1);
      }
      function RandomFloat(range) {
      return (Math.random() * range) + 1;
      }
      var viewport = new Viewport()
      function fire() {
      var bomb = new Bomb();
      while (viewport.objects.length > 2) {
      viewport.objects[0].dispose();
      viewport.objects.splice(0, 1);
      }
      viewport.addObject(bomb);
      }
      viewport.init();
      fire();
      setInterval(function () { fire(); }, 5000);
      </script>
      </body>
      </html>
    

Viewport


      function Viewport() {
      var me = this;
      me.objects = [];
      var canvas = document.getElementById("drawing-surface");
      function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }
      resizeCanvas();
      window.onresize = function () {
      resizeCanvas();
      }
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      me.doPaint = true;
      function drawBackgroundImage() {
      drawingSurface.globalAlpha = 1;
      drawingSurface.fillStyle = 'black';
      drawingSurface.fillRect(0, 0, canvas.width, canvas.height);
      }
      function drawObjects() {
      for (var i = 0; i < me.objects.length; i++) {
      me.objects[i].paint(drawingSurface);
      }
      }
      me.paintInit = function () {
      me.doPaint = true;
      }
      function paint() {
      me.paintInit();
      if (me.doPaint) {
      drawBackgroundImage();
      drawObjects();
      me.doPaint = false;
      }
      }
      var timer;
      me.init = function () {
      timer = setInterval(function () { paint(); }, 1000 / 30);
      };
      me.repaint = function () {
      me.doPaint = true;
      };
      me.addObject = function (obj) {
      me.objects.push(obj);
      }
      }
    

Bomb


      function Bomb() {
      var me = this;
      me.reset = function () {
      me.speed = 10;
      me.location = { x: window.innerWidth / 2, y: window.innerHeight };
      me.wind = RandomFloat(10) - 5;
      me.fireParticles = [];
      me.explodeParticles = [];
      for (var i = 0; i < 100; i++) {
      var particle = new FireParticle(me);
      me.fireParticles.push(particle);
      }
      for (var i = 0; i < 100; i++) {
      var particle = new CrackerParticle(me);
      particle.color = "rgb(255,255,0)";
      me.explodeParticles.push(particle);
      }
      };
      me.reset();
      me.move = function () {
      me.location.y -= me.speed;
      me.location.x += me.wind;
      }
      me.paint = function (context) {
      if (me.location.y < 200) {

      if (!me.explosed) {
      audio.play();
      }
      me.explosed = true;
      me.fireParticles.splice(0, me.fireParticles.length);
      }
      else {
      me.move();
      }
      for (var i = 0; i < 100; i++) {
      me.explodeParticles[i].paint(context)
      }
      for (var i = 0; i < me.fireParticles.length; i++) {
      me.fireParticles[i].paint(context)
      }
      }
      me.dispose = function () {
      me.explodeParticles.splice(0, me.explodeParticles.length);
      }
      }
    

Explode Particles


      function CrackerParticle(source) {
      var me = this;
      me.reset = function () {
      me.speed = RandomFloat(5) + 2;
      me.radius = 5;
      me.opacity = 255;
      me.color = 'rgb(255,255,0)';
      me.location = { x: source.location.x, y: source.location.y };
      me.randomVelocity = RandomFloat(5);
      me.angle = RandomFloat(359);
      };
      me.reset();
      me.move = function () {
      if (me.radius <= 1) {
      return;
      }
      me.radius -= 5 / (1000 / me.speed);
      me.opacity -= 255 / (1000 / me.speed);
      me.greenFactor -= 255 / ((1000 * 2) / me.speed);
      var xval = Math.cos(me.angle);
      if (xval > 0) {
      me.angle += 0.01;
      }
      else {
      me.angle -= 0.01;
      }
      me.location.x += Math.cos(me.angle) * me.randomVelocity;
      me.location.y += Math.sin(me.angle) * me.randomVelocity;
      };
      me.paint = function (context) {
      if (source.explosed) {
      me.move();
      context.beginPath();
      context.arc(me.location.x, me.location.y, me.radius, 0, 2 * Math.PI, false);
      context.fillStyle = me.color;
      context.globalAlpha = me.opacity / 255;
      context.fill();
      context.closePath();
      }
      else {
      me.location.x = source.location.x;
      me.location.y = source.location.y;
      }
      };
      }
    

Fire Particles


      function FireParticle(source) {
      var me = this;
      me.reset = function () {
      me.wind = 0;
      me.speed = RandomFloat(5) + 2;
      me.radius = 5;
      me.opacity = 255;
      me.greenFactor = 255;
      me.color = 'rgb(255,255,0)';
      me.location = { x: source.location.x + Random(10), y: source.location.y };
      };
      me.reset();
      me.move = function () {
      if (me.location.y > source.location.y + 100 || me.radius <= 1) {
      me.reset();
      }
      me.radius -= 5 / (100 / me.speed);
      me.opacity -= 255 / (100 / me.speed);
      me.greenFactor -= 255 / ((100 * 2) / me.speed);
      me.color = "rgb(255," + (Math.floor(me.greenFactor) + 1) + ",0)";
      me.location.x += me.wind;
      me.location.y += me.speed;
      if (source.location.y < me.location.y) {
      me.location.y -= source.speed;
      }
      };
      me.paint = function (context) {
      me.move();
      context.beginPath();
      context.arc(me.location.x, me.location.y, me.radius, 0, 2 * Math.PI, false);
      context.fillStyle = me.color;
      context.globalAlpha = me.opacity / 255;
      context.fill();
      context.closePath();
      };
      }