EffectHub.com: your best source for gaming

Recommendation

More Effects...

// credit to http://codepen.io/Sheepeuh/pen/cFazd  for the base of this codepen

//SOME SETTINGS TO PLAY WITH

var INTENSITY = 100;
var RAINRATIO = 0.5;

}
    this.explosion = function(x, y, color, amount) {
      amount = amount || 15;
      while (amount--) {
        this.drops.push( 
        {
          vx : (Math.random() * 4-2	),
          vy : (Math.random() * -4 ),
          x : x,
          y : y,
          radius : 0.65 + Math.floor(Math.random() *1.6),
          alpha : 1,
          color : color
        })
      }
    }

}
  
  function Rain(ctx,width) {
    this.vx = (Math.random() * 0.25);
    this.vy = (Math.random() * 9) + 1;
    this.x = Math.floor((Math.random()*width));
    this.y = -Math.random() * 30;
    this.alpha = 1;
    this.color = "hsla(200,100%,50%, 1)";
    this.render = function() {
       ctx.globalAlpha = this.alpha;
       ctx.fillStyle = this.color;
       ctx.fillRect(this.x, this.y, this.vy/4, this.vy);
    }
    this.explode = true;
  }
  
  function Snow(ctx,width) {
    this.vx = ((Math.random() - 0.5) * 5);
    this.vy = (Math.random() * 9) + 1;
    this.x = Math.floor((Math.random()*width));
    this.y = -Math.random() * 30;
    this.alpha = 1;
    this.radius = Math.random() * 4;
    this.color = "hsla(200,100%,80%, 1)";
    this.render = function() {
       ctx.globalAlpha = this.alpha;
       ctx.fillStyle = this.color;
       ctx.beginPath();
       ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
       ctx.fill();
    }
    this.explode = false;
  }
    
  
  ns.precCanvas = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');  
    var 	width = canvas.width = window.innerWidth;
	    var height = canvas.height = window.innerHeight;
    var particleSystem = new ParticleSystem(ctx, width, height, INTENSITY, RAINRATIO);
    (function draw() {
      requestAnimationFrame(draw);
      particleSystem.update();
      particleSystem.render();
    })();

}
  
  
})(window);

precCanvas();

CSS

HTML

Recommendation

Join Effecthub.com