EffectHub.com: your best source for gaming

Recommendation

More Effects...

// Try messing around with the variables in the newParticle function to change the effect
var newParticle = function(){
  //The Particle constructor accepts a particlesystem, life time in ms and a config object
  new Particle(ps,1500,{
    //Linear is just a method of the particle system which animates from parameter 1 to parameter 2.
    //You could also input static values for the variables in the config object
    //or why not extend the particle system with your own method for non linear animation
    x: ps.linear(ps.width/2,Math.random()*ps.width),
    y: ps.accelerating(ps.height/2,Math.random()*-0.1-0.5,0.0009),
    size: ps.linear(60,0),
    //radialGradientLinearHSLA does like linear animate from parameter 1 to parameter 2
    //but the parameters each contain 2 hsla colors for the gradient
    // [h1,s1,l1,a1,h2,s2,l2,a2] 
    fillStyle: ps.radialGradientLinearHSLA([20,90,70,0,40,60,50,0],[1440,100,70,1,1430,100,50,0])
  });
}

//The newParticle function below will produce snow
//Uncomment it to test it
/*
var newParticle = function(){
  var x = Math.random()*600
  new Particle(ps,5000,{
    x: ps.linear(x,x),
    y: ps.linear(0,Math.random()*ps.height/2+ps.height/2),
    size: ps.linear(Math.random()*15+5,5),
    fillStyle: ps.radialGradientLinearHSLA([0,0,100,1,0,0,100,0],[0,0,100,0,0,0,100,0])
  });
}
*/
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

Ps = function(canvas){
  this.ctx = canvas.getContext('2d');
  this.width = canvas.width;
  this.height = canvas.height;
  this.stack = [];
  this.time = performance.now();
  this.steps = 0
  this.pause = false
  this.ctx.globalCompositeOperation = 'lighter';
  this.draw = function(){
    this.ctx.setTransform(1,0,0,1,0,0);
    this.ctx.clearRect(0,0,this.width,this.height);
    for(var i=0;i<this.stack.length;i++){
      this.stack[i].draw();
    }
  };
  this.update = function(dt){
    for(var i=0;i<this.stack.length;i++){
      this.stack[i].update(dt);
    }
    for(var i=0;i<2;i++){
      newParticle()
    }
  };
  this.loop = function(){
    this.draw();
    this.lastFrameTime = this.time;
    this.time = performance.now();
    this.dt = this.time - this.lastFrameTime;
    if(this.dt<100&&!this.pause)this.update(this.dt);
    this.steps++
  };
  this.startLoop = function(){
    this.loop();
    window.requestAnimationFrame(this.startLoop.bind(this));
  };
  this.init = function(){
    window.requestAnimationFrame(this.startLoop.bind(this));
  };
  this.linear = function(start,end){
    return function(life){
      var a = start,
          b = (end-start)/life;
      return {
        val: start,
        fn: function(dt){
          return a += b*dt;
        }
      };
    };
  };
  this.accelerating = function(start,vel,acc){
    return function(life){
      var a = start;
      return {
        val: start,
        fn: function(dt){
          a = a + vel*dt + acc*dt*dt/2
          vel += acc*dt
          return a;
        }
      };
    };
  };
  this.radialGradientLinearRGBA = function(start,end){
    return function(life,ps){
      var a = start;
      var b = [];
      for(var i=0;i<start.length;i++){
        b[i] = (end[i]-start[i])/life;
      }
      var grd = ps.ctx.createRadialGradient(0.5,0.5,0,0.5,0.5,0.5);
      grd.addColorStop(0,'rgba('+(a[0]|0)+','+(a[1]|0)+','+(a[2]|0)+','+a[3].toFixed(5)+')');
      grd.addColorStop(1,'rgba('+(a[4]|0)+','+(a[5]|0)+','+(a[6]|0)+','+a[7].toFixed(5)+')');
      return {
        val: grd,
        fn: function(dt){
          for(var i=0;i<a.length;i++){
            a[i] += b[i]*dt;
            if(a[i]<0){
              a[i] = 0;
            }else if(a[i]>255){
              a[i] = 255;
            }else if((i+1)%4===0&&a[i]>1){
              a[i] = 1
            }
          }
          grd = ps.ctx.createRadialGradient(0.5,0.5,0,0.5,0.5,0.5);
          grd.addColorStop(0,'rgba('+a[0].toFixed()+','+a[1].toFixed()+','+a[2].toFixed()+','+a[3].toFixed(5)+')');
          grd.addColorStop(1,'rgba('+a[4].toFixed()+','+a[5].toFixed()+','+a[6].toFixed()+','+a[7].toFixed(5)+')');
          return grd;
        }
      };
    };
  };
  this.radialGradientLinearHSLA = function(start,end){
    return function(life,ps){
      var a = start;
      var b = [];
      for(var i=0;i<start.length;i++){
        b[i] = (end[i]-start[i])/life;
      }
      var grd = ps.ctx.createRadialGradient(0.5,0.5,0,0.5,0.5,0.5);
      grd.addColorStop(0,'hsla('+a[0].toFixed(5)+','+a[1].toFixed(5)+'%,'+a[2].toFixed(5)+'%,'+a[3].toFixed(5)+')');
      grd.addColorStop(1,'hsla('+a[4].toFixed(5)+','+a[5].toFixed(5)+'%,'+a[6].toFixed(5)+'%,'+a[7].toFixed(5)+')');
      return {
        val: grd,
        fn: function(dt){
          for(var i=0;i<a.length;i++){
            a[i] += b[i]*dt;
          }
          grd = ps.ctx.createRadialGradient(0.5,0.5,0,0.5,0.5,0.5);
          grd.addColorStop(0,'hsla('+a[0].toFixed(5)+','+a[1].toFixed(5)+'%,'+a[2].toFixed(5)+'%,'+a[3].toFixed(5)+')');
          grd.addColorStop(1,'hsla('+a[4].toFixed(5)+','+a[5].toFixed(5)+'%,'+a[6].toFixed(5)+'%,'+a[7].toFixed(5)+')');
          return grd;
        }
      };
    };
  };
};

var Particle = function(ps,life,conf){
  this.ps = ps;
  this.life = life;
  this.dynamicVariables = [];
  this.setup(conf);
  this.stackPos = this.ps.stack.length;
  this.ps.stack.push(this);
};

Particle.prototype.setup = function(conf){
  for(var prop in conf){
    if(typeof conf[prop] === 'function'){
      this[prop] = conf[prop](this.life,this.ps);
      this.dynamicVariables.push(this[prop]);
    }else{
      this[prop] = {val: conf[prop]};
    }
  }
};

Particle.prototype.update = function(dt){
  for(var i=0;i<this.dynamicVariables.length;i++){
    this.dynamicVariables[i].val = this.dynamicVariables[i].fn(dt);
  }
  if(this.life<0){
    this.kill();
  }else{
    this.life -= dt;
  }
};

Particle.prototype.draw = function(){
  this.ps.ctx.setTransform(this.size.val,0,0,this.size.val,this.x.val-this.size.val/2,this.y.val-this.size.val/2);
  this.ps.ctx.fillStyle = this.fillStyle.val;
  this.ps.ctx.fillRect(0,0,1,1);
};

Particle.prototype.kill = function(){
  if(this.stackPos+1 === this.ps.stack.length){
    this.ps.stack.pop();
  }else{
    var i = this.stackPos;
    this.ps.stack[i] = this.ps.stack.pop();
    this.ps.stack[i].stackPos = i;
  }
};

ps = new Ps(document.querySelector('canvas'));
ps.init();

CSS

HTML

Recommendation

Join Effecthub.com