logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Create Fireworks Effect Using Html5 Canvas

Create Fireworks Effect Using Html5 Canvas

July 16, 2016 No comments Article SEO Website Designing

Create Fireworks Effect Using Html5 Canvas: Hi Friends, Today i will tell you about how to create fireworks effect using html5 canvas. As we know fireworks is necessary sometimes to make some day special in a website. When you want to launch your website, any festival comes, Anyone birthday is there or any other special occassion or event is happenninga at that moment, you can use fireworks with little css, js and html.

I am giving you one example, In the example i have used html5 canvas, Normal CSS and some javascript code with black background, white text and colored automatic fireworks which is moving on the screen.

Create Fireworks Effect Using Html5 Canvas Live Demo:

See the live demo and download the code from below:

SEO Website Designing Live Demo      SEO Website Designing Download

How to Create Fireworks Effect Using Html5 Canvas:

For creating a fireworks or explosive effect, you can use html5, css and javascript code which is given below:

HTML Code:

In the below code i have just created a canvas with a id screen to display all the fireworks. You can set your canvas size using the css style language. If you didn’t mention the code. it take it 100% of your device width.

 <canvas id="screen"></canvas>

<canvas id="screen"></canvas>

CSS Code:

In the below code i give the background color with absolute position. You can change the top and left to give the position on your screen.

canvas{
	background-color: #000000;
  position: absolute;
  top: 0px;
  left: 0px;
}

canvas{ background-color: #000000; position: absolute; top: 0px; left: 0px; }




JavaScript Code:

Paste below code and see the magic in your screen.

var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
 
var minVx = -10;
var deltaVx = 20;
var minVy = 25
var deltaVy = 15;
var minParticleV = 5;
var deltaParticleV = 5;
 
var gravity = 1;
 
var explosionRadius = 200;
var bombRadius = 10;
var explodingDuration = 100;
var explosionDividerFactor = 10; // I couldn't find a better name. Got any?
 
var nBombs = 1; // initial
var percentChanceNewBomb = 5;
 
// Color utils forked from http://andreasstorm.com/
// (or someone who forked from there)
 
function Color(min) {
  min = min || 0;
  this.r = colorValue(min);
  this.g = colorValue(min);
  this.b = colorValue(min);
  this.style = createColorStyle(this.r, this.g, this.b);
};
 
function colorValue(min) {
  return Math.floor(Math.random() * 255 + min);
}
 
function createColorStyle(r,g,b) {
  return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
 
// A Bomb. Or firework.
function Bomb(){
  var self = this;
 
  self.radius = bombRadius;
  self.previousRadius = bombRadius;
  self.explodingDuration = explodingDuration;
  self.hasExploded = false;
  self.alive = true;
  self.color = new Color();
 
  self.px = (window.innerWidth / 4) + (Math.random() * window.innerWidth / 2);
  self.py = window.innerHeight;
 
  self.vx = minVx + Math.random() * deltaVx;
  self.vy = (minVy + Math.random() * deltaVy) * -1; // because y grows downwards
 
  self.duration = 
 
  self.update = function(particlesVector){
    if(self.hasExploded){
      var deltaRadius = explosionRadius - self.radius;
      self.previousRadius = self.radius;
      self.radius += deltaRadius / explosionDividerFactor;
      self.explodingDuration--;
      if(self.explodingDuration == 0){
        self.alive = false;
      }
    }
    else{
      self.vx += 0;
      self.vy += gravity;
      if(self.vy &gt;= 0){ // invertion point
        self.explode(particlesVector);
      }
 
      self.px += self.vx;
      self.py += self.vy;
    }
  };
 
  self.draw = function(ctx){
    ctx.beginPath();
    ctx.arc(self.px, self.py, self.previousRadius, 0, Math.PI * 2, false);
    if(self.hasExploded){
    }
    else{
      ctx.fillStyle = self.color.style;
      ctx.lineWidth = 1;
      ctx.fill();
    }
 
  };
 
 
  self.explode = function(particlesVector){
    self.hasExploded = true;
    var e = 3 + Math.floor(Math.random() * 3);
    for(var j = 0; j &lt; e; j++){
      var n = 10 + Math.floor(Math.random() * 21); // 10 - 30
      var speed = minParticleV + Math.random() * deltaParticleV;
      var deltaAngle = 2 * Math.PI / n;
      var initialAngle = Math.random() * deltaAngle;
      for(var i = 0; i &lt; n; i++){
        particlesVector.push(new Particle(self,  i * deltaAngle + initialAngle, speed));
      }
    }
  };
 
}
 
function Particle(parent, angle, speed){
  var self = this;
  self.px = parent.px;
  self.py = parent.py;
  self.vx = Math.cos(angle) * speed;
  self.vy = Math.sin(angle) * speed;
  self.color = parent.color;
  self.duration = 40 + Math.floor(Math.random()*20);
  self.alive = true;
 
  self.update = function(){
    self.vx += 0;
    self.vy += gravity / 10;
 
    self.px += self.vx;
    self.py += self.vy;
    self.radius = 3;
 
    self.duration--;
    if(self.duration &lt;= 0){
      self.alive = false;
    }
  };
 
  self.draw = function(ctx){
    ctx.beginPath();
    ctx.arc(self.px, self.py, self.radius, 0, Math.PI * 2, false);
    ctx.fillStyle = self.color.style;
    ctx.lineWidth = 1;
    ctx.fill();
  };
 
}
 
function Controller(){
  var self = this;
  self.canvas = document.getElementById("screen");
  self.canvas.width = screenWidth;
  self.canvas.height = screenHeight;
  self.ctx = self.canvas.getContext('2d');
 
  function setSpeedParams(){
    var heightReached = 0;
    var vy = 0;
 
    while(heightReached &lt; screenHeight &amp;&amp; vy &gt;= 0){
      vy += gravity;
      heightReached += vy;
    }
 
    minVy = vy / 2;
    deltaVy = vy - minVy;
 
    vx = (1 / 4) * screenWidth / (vy / 2);
    minVx = -vx;
    deltaVx = 2*vx;
  };
 
 
 
  self.resize = function(){
    screenWidth = window.innerWidth;
    screenHeight = window.innerHeight;
    self.canvas.width = screenWidth;
    self.canvas.height = screenHeight;
    setSpeedParams();
  };
  self.resize();
 
  window.onresize = self.resize;
 
  self.init = function(){
    self.readyBombs = [];
    self.explodedBombs = [];
    self.particles = [];
 
    for(var i = 0; i &lt; nBombs; i++){ self.readyBombs.push(new Bomb()); } } self.update = function(){ var aliveBombs = []; while(self.explodedBombs.length &gt; 0){
      var bomb = self.explodedBombs.shift();
      bomb.update();
      if(bomb.alive){
        aliveBombs.push(bomb);
      }
    }
    self.explodedBombs = aliveBombs;
 
    var notExplodedBombs = [];
    while(self.readyBombs.length &gt; 0){
      var bomb = self.readyBombs.shift();
      bomb.update(self.particles);
      if(bomb.hasExploded){
        self.explodedBombs.push(bomb);
      }
      else{
        notExplodedBombs.push(bomb);
      }
    }
    self.readyBombs = notExplodedBombs;
 
    var aliveParticles = [];
    while(self.particles.length &gt; 0){
      var particle = self.particles.shift();
      particle.update();
      if(particle.alive){
        aliveParticles.push(particle);
      }
    }
    self.particles = aliveParticles;
  }
 
  self.draw = function(){
    self.ctx.beginPath();
    self.ctx.fillStyle='rgba(0, 0, 0, 0.1)'; // Ghostly effect
    self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
 
 
 
    for(var i = 0; i &lt; self.readyBombs.length; i++){
      self.readyBombs[i].draw(self.ctx);
    }
 
    for(var i = 0; i &lt; self.explodedBombs.length; i++){
      self.explodedBombs[i].draw(self.ctx);
    }
 
    for(var i = 0; i &lt; self.particles.length; i++){
      self.particles[i].draw(self.ctx);
    }
 
  }
 
  self.animation = function(){
    self.update();
    self.draw();
 
   if(Math.random() * 100 &lt; percentChanceNewBomb) {
     self.readyBombs.push(new Bomb());
   }
 
 
    requestAnimationFrame(self.animation);
  }
}
 
var controller = new Controller();
controller.init();
requestAnimationFrame(controller.animation);

var screenWidth = window.innerWidth; var screenHeight = window.innerHeight;var minVx = -10; var deltaVx = 20; var minVy = 25 var deltaVy = 15; var minParticleV = 5; var deltaParticleV = 5;var gravity = 1;var explosionRadius = 200; var bombRadius = 10; var explodingDuration = 100; var explosionDividerFactor = 10; // I couldn't find a better name. Got any?var nBombs = 1; // initial var percentChanceNewBomb = 5;// Color utils forked from http://andreasstorm.com/ // (or someone who forked from there)function Color(min) { min = min || 0; this.r = colorValue(min); this.g = colorValue(min); this.b = colorValue(min); this.style = createColorStyle(this.r, this.g, this.b); };function colorValue(min) { return Math.floor(Math.random() * 255 + min); }function createColorStyle(r,g,b) { return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; }// A Bomb. Or firework. function Bomb(){ var self = this; self.radius = bombRadius; self.previousRadius = bombRadius; self.explodingDuration = explodingDuration; self.hasExploded = false; self.alive = true; self.color = new Color(); self.px = (window.innerWidth / 4) + (Math.random() * window.innerWidth / 2); self.py = window.innerHeight; self.vx = minVx + Math.random() * deltaVx; self.vy = (minVy + Math.random() * deltaVy) * -1; // because y grows downwardsself.duration =self.update = function(particlesVector){ if(self.hasExploded){ var deltaRadius = explosionRadius - self.radius; self.previousRadius = self.radius; self.radius += deltaRadius / explosionDividerFactor; self.explodingDuration--; if(self.explodingDuration == 0){ self.alive = false; } } else{ self.vx += 0; self.vy += gravity; if(self.vy &gt;= 0){ // invertion point self.explode(particlesVector); }self.px += self.vx; self.py += self.vy; } };self.draw = function(ctx){ ctx.beginPath(); ctx.arc(self.px, self.py, self.previousRadius, 0, Math.PI * 2, false); if(self.hasExploded){ } else{ ctx.fillStyle = self.color.style; ctx.lineWidth = 1; ctx.fill(); } };self.explode = function(particlesVector){ self.hasExploded = true; var e = 3 + Math.floor(Math.random() * 3); for(var j = 0; j &lt; e; j++){ var n = 10 + Math.floor(Math.random() * 21); // 10 - 30 var speed = minParticleV + Math.random() * deltaParticleV; var deltaAngle = 2 * Math.PI / n; var initialAngle = Math.random() * deltaAngle; for(var i = 0; i &lt; n; i++){ particlesVector.push(new Particle(self, i * deltaAngle + initialAngle, speed)); } } }; }function Particle(parent, angle, speed){ var self = this; self.px = parent.px; self.py = parent.py; self.vx = Math.cos(angle) * speed; self.vy = Math.sin(angle) * speed; self.color = parent.color; self.duration = 40 + Math.floor(Math.random()*20); self.alive = true;self.update = function(){ self.vx += 0; self.vy += gravity / 10;self.px += self.vx; self.py += self.vy; self.radius = 3;self.duration--; if(self.duration &lt;= 0){ self.alive = false; } };self.draw = function(ctx){ ctx.beginPath(); ctx.arc(self.px, self.py, self.radius, 0, Math.PI * 2, false); ctx.fillStyle = self.color.style; ctx.lineWidth = 1; ctx.fill(); };}function Controller(){ var self = this; self.canvas = document.getElementById("screen"); self.canvas.width = screenWidth; self.canvas.height = screenHeight; self.ctx = self.canvas.getContext('2d');function setSpeedParams(){ var heightReached = 0; var vy = 0;while(heightReached &lt; screenHeight &amp;&amp; vy &gt;= 0){ vy += gravity; heightReached += vy; }minVy = vy / 2; deltaVy = vy - minVy;vx = (1 / 4) * screenWidth / (vy / 2); minVx = -vx; deltaVx = 2*vx; };self.resize = function(){ screenWidth = window.innerWidth; screenHeight = window.innerHeight; self.canvas.width = screenWidth; self.canvas.height = screenHeight; setSpeedParams(); }; self.resize();window.onresize = self.resize;self.init = function(){ self.readyBombs = []; self.explodedBombs = []; self.particles = [];for(var i = 0; i &lt; nBombs; i++){ self.readyBombs.push(new Bomb()); } } self.update = function(){ var aliveBombs = []; while(self.explodedBombs.length &gt; 0){ var bomb = self.explodedBombs.shift(); bomb.update(); if(bomb.alive){ aliveBombs.push(bomb); } } self.explodedBombs = aliveBombs;var notExplodedBombs = []; while(self.readyBombs.length &gt; 0){ var bomb = self.readyBombs.shift(); bomb.update(self.particles); if(bomb.hasExploded){ self.explodedBombs.push(bomb); } else{ notExplodedBombs.push(bomb); } } self.readyBombs = notExplodedBombs;var aliveParticles = []; while(self.particles.length &gt; 0){ var particle = self.particles.shift(); particle.update(); if(particle.alive){ aliveParticles.push(particle); } } self.particles = aliveParticles; }self.draw = function(){ self.ctx.beginPath(); self.ctx.fillStyle='rgba(0, 0, 0, 0.1)'; // Ghostly effect self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height); for(var i = 0; i &lt; self.readyBombs.length; i++){ self.readyBombs[i].draw(self.ctx); }for(var i = 0; i &lt; self.explodedBombs.length; i++){ self.explodedBombs[i].draw(self.ctx); }for(var i = 0; i &lt; self.particles.length; i++){ self.particles[i].draw(self.ctx); }}self.animation = function(){ self.update(); self.draw(); if(Math.random() * 100 &lt; percentChanceNewBomb) { self.readyBombs.push(new Bomb()); } requestAnimationFrame(self.animation); } }var controller = new Controller(); controller.init(); requestAnimationFrame(controller.animation);



For downloading complete code, click below button

SEO Website Designing Live Demo      SEO Website Designing Download

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

I hope you will like Create Fireworks Effect Using Html5 Canvas. If You found it useful please subscribe my blog.

 

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: Create Fireworks Effect Using Html5 Canvas, CSS, fireworks html code for website, html code animation fireworks, HTML5, javascript, javascript explosion

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.