Demo lichblog

<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>

<script type='text/javascript'>
//<![CDATA[
window.onload = function(){
 var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  cw = window.innerWidth,
  ch = window.innerHeight,
  fireworks = [],
  particles = [],
  hue = 120,
  limiterTotal = 20,
  limiterTick = 0,
  timerTotal = 30,
  randomTime = 0,
  timerTick = 0,
  mousedown = false,
  mx,
  my;
 canvas.width = cw;
 canvas.height = ch;
 //$('canvas').css("background-size":cw);
 // var snd = new Audio("http://soundjax.com/reddo/38563%5EFirework.mp3"); // buffers automatically when created
 var snd = new Audio("http://soundjax.com/reddo/51715%5Efirework.mp3");
 // now we are going to setup our function placeholders for the entire demo

 // get a random number within a range
 function random( min, max ) {
  return min + Math.random()*(max-min);
 }
 // calculate the distance between two points
 function calculateDistance( p1x, p1y, p2x, p2y ) {
  return Math.sqrt((p1x-p2x)*(p1x-p2x) + (p1y-p2y)*(p1y-p2y));
 }
 // create firework
 function Firework( sx, sy, tx, ty ) {
  //actual coordinates
  this.x = sx;
  this.y = sy;
  //starting coordinate
  this.sx = sx;
  this.sy = sy;
  //target coordinates
  this.tx = tx;
  this.ty = ty;

  this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
  this.distanceTraveled = 0;
  //track past coordinates to creates a trail effect
  this.coordinates = [];
  this.coordinateCount = 2;

  while(this.coordinateCount--) {
   this.coordinates.push( [this.x, this.y ]);
  }
  this.angle = Math.atan2(ty - sy, tx - sx);
  this.speed = 1;
  this.acceleration = 1.2;
  this.brightness = random(50, 70);
  this.tragetRadius = 1;
 }

 // update firework
 Firework.prototype.update = function( index ) {
  // if(this.distanceTraveled >= this.distanceToTarget ){
   // fireworks.splice(index, 1);
  // }
  if( this.targetRadius < 8){
   this.targetRadius += 0.3;
  }else{
   this.targetRadius = 1;
  }
  this.speed *= this.acceleration;
  var vx = Math.cos(this.angle)*this.speed,
   vy = Math.sin(this.angle)*this.speed;
  this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);

  if(this.distanceTraveled >= this.distanceToTarget ){
   this.coordinates.pop();  
   this.coordinates.unshift([this.tx, this.ty]);
   //this.x = this.tx; this.y = this.ty;
   createParticles(this.x, this.y);
   snd.play();
   this.draw();
   fireworks.splice(index, 1);
  } else {
   this.x += vx;
   this.y += vy;
  }
  this.coordinates.pop();  
  this.coordinates.unshift([this.x, this.y]);
 };
 // draw firework
 Firework.prototype.draw = function() {
  ctx.beginPath();
  // move to the last tracked coordinate in the set, then draw a line to the current x and y
  ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
  ctx.lineTo( this.x, this.y );
  ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
  ctx.stroke();
  // ctx.beginPath();
  // ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI*2);
  // ctx.stroke();
 }
 // create particle
 function Particle( x, y, type ) {
  this.x = x;
  this.y = y;
  this.type = type;
  // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
  this.coordinates = [];
  this.coordinateCount = 6;
  while( this.coordinateCount-- ) {
   this.coordinates.push( [ this.x, this.y ] );
  }
    // TO Be Improved //
  switch (type)
  {
   case 1: var variation = random(1, 5);
     if (variation < 2) 
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 15 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 4;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = random( hue - 50, hue + 50 );
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.01, 0.02 );
     }else if (variation < 3)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 5 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = random( hue - 50, hue );
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else if (variation < 4)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 8 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = random( hue, hue + 50 );
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 15 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = random( hue - 50, hue + 50 );
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.3 );
     }
     break;
   case 2: var variation = random(1, 5);
     if (variation < 2) 
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 10 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 4;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 100;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.01, 0.02 );

     }else if (variation < 3)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 21 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 100;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else if (variation < 4)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 3 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 100;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 5 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the othis.hue = 100;
      this.hue = 100;
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.3 );
     }
     break;
   case 3: var variation = random(1, 5);
     // var hue = 10;
     if (variation < 2) 
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 10, 15 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 4;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 60;
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.01, 0.02 );

     }else if (variation < 3)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 11, 15 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 10;
      this.brightness = random( 10, 20);
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );


     }else if (variation < 4)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 11, 18 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 90;
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 11, 15 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 120;
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.3 );
     }
     break;
   case 4: var variation = random(1, 5);
     if (variation < 2) 
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 10 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 4;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 300;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.01, 0.02 );
     }else if (variation < 3)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 21 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 300;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else if (variation < 4)
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 3 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the overall hue variable
      this.hue = 300;
      this.brightness = random( 50, 80 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.03 );
     }else
     {
      // set a random angle in all possible directions, in radians
      this.angle = random( 0, Math.PI * 2 );
      this.speed = random( 1, 5 );
      // friction will slow the particle down
      this.friction = 0.95;
      // gravity will be applied and pull the particle down
      this.gravity = 3;
      // set the hue to a random number +-20 of the othis.hue = 100;
      this.hue = 100;
      this.brightness = random( 10, 20 );
      this.alpha = 1;
      // set how fast the particle fades out
      this.decay = random( 0.015, 0.3 );
     }
     break;
   default:
  }
 }
 // update particle
 Particle.prototype.update = function( index ) {
  // slow down the particle
  this.speed *= this.friction;
  // apply velocity
  this.x += Math.cos( this.angle ) * this.speed;
  this.y += Math.sin( this.angle ) * this.speed + this.gravity;
  // fade out the particle
  // this.alpha -= this.decay * this.alpha;
  this.alpha -= this.decay;
  if (this.type == 4 && this.alpha <= 0.5){
   this.brightness += 50;
   this.hue += 200;
   if (this.brightness >= 200)
    this.brightness = 0;
  }
  // remove the particle once the alpha is low enough, based on the passed in index
  if( this.alpha <= this.decay ) {
   particles.splice( index, 1 );
  }
  // remove last item in coordinates array
  this.coordinates.pop();
  // add current coordinates to the start of the array
  this.coordinates.unshift( [ this.x, this.y ] );
 }
 // draw particle
 Particle.prototype.draw = function() {
  ctx. beginPath();
  // move to the last tracked coordinates in the set, then draw a line to the current x and y
  ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
  ctx.lineTo( this.x, this.y );
  ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
  ctx.stroke();
 }
 // create particle group/explosion
 function createParticles( x, y ) {
  var particleCount = 300;
  var type = Math.floor(random(1, 5));
  while(particleCount--){
   particles.push(new Particle(x, y, type));
  }
 }
 // main demo loop
 function loop() {
  //requestAnimFrame(loop);
  hue += 0.5;
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle =  'rgba(0, 0, 0, 0.3)';
  ctx.fillRect(0, 0, cw, ch);
  ctx.globalCompositeOperation = "lighter";
  var i = fireworks.length;
  while(i--)
  {
   fireworks[i].draw();
   fireworks[i].update(i);
  }

  // loop over each particle, draw it, update it
  var i = particles.length;
  while( i-- ) {
   particles[ i ].draw();
   particles[ i ].update( i );
  }

  if( timerTick >= timerTotal + randomTime ){
   if (!mousedown){
    /* uniform */
    // fireworks.push( new Firework(cw/2, ch, 100, random(0, ch/2)));
    /* 0 to cw/2, more to*/
    // fireworks.push( new Firework(cw/2, ch, Math.floor(Math.sqrt(random(0, cw*cw/4))), random(0, ch/2)));
    
    var xPos = Math.pow(Math.floor((random(-Math.pow(cw/2, 1/3), Math.pow(cw/2, 1/3)))), 3);
    xPos += cw/2;
    fireworks.push( new Firework(cw/2, ch, xPos, random(0, ch/2)));
    // fireworks.push( new Firework(cw/2, ch, random(-10, 100), random(0, ch/2)));
    timerTick = 0;
    randomTime = Math.pow(random(2, 4), 2);
   } 
  } else {
   timerTick++;
  }
  // limit the rate at which fireworks get launched when mouse is down
  if( limiterTick >= limiterTotal ) {
   if( mousedown ) {
    // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
    fireworks.push( new Firework( cw / 2, ch, mx, my ) );
    limiterTick = 0;
   } else {
    limiterTick= limiterTotal;
   }
  } else {
   limiterTick++;
  } 
 }
 // mouse event bindings
 // update the mouse coordinates on mousemove
 canvas.addEventListener( 'mousemove', function( e ) {
  mx = e.pageX - canvas.offsetLeft;
  my = e.pageY - canvas.offsetTop;
 });

 // toggle mousedown state and prevent canvas from being selected
 canvas.addEventListener( 'mousedown', function( e ) {
  e.preventDefault();
  mousedown = true;
 });
 canvas.addEventListener( 'mouseup', function( e ) {
  e.preventDefault();
  mousedown = false;
 });
 setInterval(loop, 25);
 // (function game(){
 //  loop();
 //  setTimeout(game, Math.floor(random(30, 30)));
 // })(); 
};
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
const PARTICLES_PER_FIREWORK = 150; // 100 - 400 or try 1000
const FIREWORK_CHANCE = 0.02; // percentage, set to 0 and click instead
const BASE_PARTICLE_SPEED = 0.6; // between 0-4, controls the size of the overall fireworks
const FIREWORK_LIFESPAN = 600; // ms
const PARTICLE_INITIAL_SPEED = 4.5; // 2-8
// not so fun options =\
const GRAVITY = 9.8;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let particles = [];
let disableAutoFireworks = false;
let resetDisable = 0;

let loop = () => {
  if (!disableAutoFireworks && Math.random() < FIREWORK_CHANCE) {
    createFirework();
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, i) => {
    particle.animate();
    particle.render();
    if (particle.y > canvas.height 
        || particle.x < 0 
        || particle.x > canvas.width
        || particle.alpha <= 0
       ) {
      particles.splice(i, 1);
    }
  });
  requestAnimationFrame(loop);
};
let createFirework = (
    x = Math.random() * canvas.width,
    y = Math.random() * canvas.height
  ) => {
  
  let speed = (Math.random() * 2) + BASE_PARTICLE_SPEED;
  let maxSpeed = speed;

  let red = ~~(Math.random() * 255);
  let green = ~~(Math.random() * 255);
  let blue = ~~(Math.random() * 255);
  
  // use brighter colours
  red = (red < 150 ? red + 150 : red);
  green = (green < 150 ? green + 150 : green);
  blue = (blue < 150 ? blue + 150 : blue);

  // inner firework
  for (let i = 0; i < PARTICLES_PER_FIREWORK; i++) {
    let particle = new Particle(x, y, red, green, blue, speed);
    particles.push(particle);

    maxSpeed = (speed > maxSpeed ? speed : maxSpeed);
  }

  // outer edge particles to make the firework appear more full
  for (let i = 0; i < 40; i++) {
    let particle = new Particle(x, y, red, green, blue, maxSpeed, true);
    particles.push(particle);
  }
  
};

class Particle {
  
  constructor(
    x = 0,
    y = 0, 
    red = ~~(Math.random() * 255), 
    green = ~~(Math.random() * 255), 
    blue = ~~(Math.random() * 255), 
    speed, 
    isFixedSpeed
  ) {
    
    this.x = x;
    this.y = y;
    this.red = red;
    this.green = green;
    this.blue = blue;
    this.alpha = 0.05;
    this.radius = 1 + Math.random();
    this.angle = Math.random() * 360;
    this.speed = (Math.random() * speed) + 0.1;
    this.velocityX = Math.cos(this.angle) * this.speed;
    this.velocityY = Math.sin(this.angle) * this.speed;
    this.startTime = (new Date()).getTime();
    this.duration = Math.random() * 300 + FIREWORK_LIFESPAN;
    this.currentDiration = 0;
    this.dampening = 30; // slowing factor at the end
    
    this.colour = this.getColour();
    
    if (isFixedSpeed) {
      this.speed = speed;
      this.velocityY = Math.sin(this.angle) * this.speed;
      this.velocityX = Math.cos(this.angle) * this.speed;
    }
    
    this.initialVelocityX = this.velocityX;
    this.initialVelocityY = this.velocityY;

  }
  
  animate() {
    
    this.currentDuration = (new Date()).getTime() - this.startTime;
    
    // initial speed kick
    if (this.currentDuration <= 200) {
      
      this.x += this.initialVelocityX * PARTICLE_INITIAL_SPEED;
      this.y += this.initialVelocityY * PARTICLE_INITIAL_SPEED;
      this.alpha += 0.01;

      this.colour = this.getColour(240, 240, 240, 0.9);
      
    } else {
      
      // normal expansion
      this.x += this.velocityX;
      this.y += this.velocityY;
      this.colour = this.getColour(this.red, this.green, this.blue, 0.4 + (Math.random() * 0.3));
      
    }
    
    this.velocityY += GRAVITY / 1000;
    
    // slow down particles at the end
    if (this.currentDuration >= this.duration) {
      this.velocityX -= this.velocityX / this.dampening; 
      this.velocityY -= this.velocityY / this.dampening;
    }
    
    if (this.currentDuration >= this.duration + this.duration / 1.1) {
      
      // fade out at the end
      this.alpha -= 0.02;
      this.colour = this.getColour();
      
    } else {
      
      // fade in during expansion
      if (this.alpha < 1) {
        this.alpha += 0.03;
      }
      
    }
  }
  
  render() {
    
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.lineWidth = this.lineWidth;
    ctx.fillStyle = this.colour;
    ctx.shadowBlur = 8;
    ctx.shadowColor = this.getColour(this.red + 150, this.green + 150, this.blue + 150, 1);
    ctx.fill();
    
  }
  
  getColour(red, green, blue, alpha) {
    
    return `rgba(${red || this.red}, ${green || this.green}, ${blue || this.blue}, ${alpha || this.alpha})`;
    
  }
  
}

let updateCanvasSize = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};


// run it!

updateCanvasSize();
$(window).resize(updateCanvasSize);
$(canvas).on('click', (e) => {
  
  createFirework(e.clientX, e.clientY);
  
  // stop fireworks when clicked, re-enable after short time
  disableAutoFireworks = true;
  clearTimeout(resetDisable);
  resetDisable = setTimeout(() => {
    disableAutoFireworks = false;
  }, 5000);
  
});

loop();
//]]>
</script>

<style type='text/css'>
canvas{
cursor:crosshair;
position:fixed;
width:100%;
height:100%;
background:#222;
display:block
</style>

<canvas id='canvas' ></canvas>

<script type='text/javascript'>
      //<![CDATA[
      window.requestAnimFrame = ( function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function( callback ) {
          window.setTimeout( callback, 1000 / 60 );
        };
      })();
var canvas = document.getElementById( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    cw = window.innerWidth,
    ch = window.innerHeight,
    fireworks = [],
    particles = [],
    hue = 120,
    limiterTotal = 5,
    limiterTick = 0,
    timerTotal = 80,
    timerTick = 0,
    mousedown = false,
    mx,
    my;
      canvas.width = cw;
      canvas.height = ch;
      function random( min, max ) {
        return Math.random() * ( max - min ) + min;
      }
      function calculateDistance( p1x, p1y, p2x, p2y ) {
        var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
        return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
      }
      function Firework( sx, sy, tx, ty ) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
        this.distanceTraveled = 0;
        this.coordinates = [];
        this.coordinateCount = 3;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = Math.atan2( ty - sy, tx - sx );
        this.speed = 2;
        this.acceleration = 1.05;
        this.brightness = random( 50, 70 );
        this.targetRadius = 1;
      }
      Firework.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        if( this.targetRadius < 8 ) {
          this.targetRadius += 0.3;
        } else {
          this.targetRadius = 1;
        }
        this.speed *= this.acceleration;
        var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
        this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
        if( this.distanceTraveled >= this.distanceToTarget ) {
          createParticles( this.tx, this.ty );
          fireworks.splice( index, 1 );
        } else {
          this.x += vx;
          this.y += vy;
        }
      }
      Firework.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
        ctx.stroke();
      }
      function Particle( x, y ) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinateCount = 5;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = random( 0, Math.PI * 2 );
        this.speed = random( 1, 10 );
        this.friction = 0.95;
        this.gravity = 1;
        this.hue = random( hue - 50, hue + 50 );
        this.brightness = random( 50, 80 );
        this.alpha = 1;
        this.decay = random( 0.015, 0.03 );
      }
      Particle.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        this.speed *= this.friction;
        this.x += Math.cos( this.angle ) * this.speed;
        this.y += Math.sin( this.angle ) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if( this.alpha <= this.decay ) {
          particles.splice( index, 1 );
        }
      }
      Particle.prototype.draw = function() {
        ctx. beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        ctx.stroke();
      }
      function createParticles( x, y ) {
        var particleCount = 30;
        while( particleCount-- ) {
          particles.push( new Particle( x, y ) );
        }
      }
      function loop() {
        requestAnimFrame( loop );
        hue= random(0, 360 );
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect( 0, 0, cw, ch );
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while( i-- ) {
          fireworks[ i ].draw();
          fireworks[ i ].update( i );
        }
        var i = particles.length;
        while( i-- ) {
          particles[ i ].draw();
          particles[ i ].update( i );
        }
        if( timerTick >= timerTotal ) {
          if( !mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
          }
        } else {
          timerTick++;
        }
        if( limiterTick >= limiterTotal ) {
          if( mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
          }
        } else {
          limiterTick++;
        }
      }
      canvas.addEventListener( 'mousemove', function( e ) {
        mx = e.pageX - canvas.offsetLeft;
        my = e.pageY - canvas.offsetTop;
      });
      canvas.addEventListener( 'mousedown', function( e ) {
        e.preventDefault();
        mousedown = true;
      });
      canvas.addEventListener( 'mouseup', function( e ) {
        e.preventDefault();
        mousedown = false;
      });
      window.onload = loop;
      //]]>
    </script>

<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>

<style type="text/css">
#bp_toc {
    background: #FFFFFF;
    border: 0 solid #000000;
    margin-top: 10px;
    padding: 10px 0;
    width: 100%;
}
h3.bp_toc_title {
    font-size: 28px;
    line-height: 30px;
    padding-top: 40px;
    margin: 0 0 20px;
}
#bp_tocm {
    margin-right: 30px;
}
#bp_toc a {
    text-decoration: none !important;
}
#bp_toc a:hover {
    text-decoration: underline !important;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #4e4949;
    border-bottom: 5px solid #dfdfdf;
    padding: 10px;
    width: 50%;
}
.toc-entry-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.toc-header-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    width: 15%;
}
.toc-header-col3 {
    width: 35%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
    color: #EBEBEB;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.4em;
    text-decoration: none;
    border-collapse: separate;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    background: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    padding: 10px;
}
.toc-entry-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    color: #45818E;
    font-family: 'Verdana',Arial,sans-serif;
    font-size: 12px;
}
.toc-note {
    background-color: #4e4949;
    color: #EBEBEB;
    display: inline-block;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #dfdfdf;
}
</style>

<div id='bp_tocm'>
<div id='bp_toc'>
<script type='text/javascript'>
//<![CDATA[
var postTitle=[],postUrl=[],postDate=[],postSum=[],postLabels=[],sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0; function loadtoc(c){if("entry"in c.feed){var d=c.feed.entry.length;totalEntires+=d;totalPosts=c.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var b=document.createElement("script");b.type="text/javascript";startindex=totalEntires+1;b.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc");tocdiv.appendChild(b)}for(b=0;b<d;b++){for(var a=c.feed.entry[b],e=a.title.$t,k=a.published.$t.substring(0,10),l,f=0;f<a.link.length;f++)if("alternate"== a.link[f].rel){l=a.link[f].href;break}var g="content"in a?a.content.$t:"summary"in a?a.summary.$t:"",g=g.replace(/<\S[^>]*>/g,"");if(g.length>numChars)var g=g.substring(0,numChars),h=g.lastIndexOf(" "),g=g.substring(0,h)+"...";h="";if("category"in a){for(f=0;f<a.category.length;f++)h+="<a href=\"javascript:filterPosts('"+a.category[f].term+"');\" title=\"Click here to select all posts with label '"+a.category[f].term+"'\">"+a.category[f].term+"</a>, ";a=h.lastIndexOf(",");-1!=a&&(h=h.substring(0, a))}postTitle.push(e);postDate.push(k);postUrl.push(l);postSum.push(g);postLabels.push(h)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc());sortPosts(sortBy);tocLoaded=!0}function filterPosts(c){postFilter=c;displayToc(postFilter)}function allPosts(){postFilter="";displayToc(postFilter)} function sortPosts(c){function d(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var b=0;b<postTitle.length-1;b++)for(var a=b+1;a<postTitle.length;a++)"titleasc"==c&&postTitle[b]>postTitle[a]&&d(b,a),"titledesc"==c&&postTitle[b]<postTitle[a]&&d(b,a),"dateoldest"==c&&postDate[b]> postDate[a]&&d(b,a),"datenewest"==c&&postDate[b]<postDate[a]&&d(b,a)} function displayToc(c){var d=0,b,a="Click to sort by title",e="Click to sort by date",k="";"titleasc"==sortBy&&(a+=" (descending)",e+=" (newest first)");"titledesc"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"dateoldest"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"datenewest"==sortBy&&(a+=" (ascending)",e+=" (oldest first)");""!=postFilter&&(k="Click to show all posts");b="<table><tr>";b+='<td class="toc-header-col1">';b+='<a href="javascript:toggleTitleSort();" title="'+a+'">POST TITLE</a>'; b+="</td>";b+='<td class="toc-header-col2">';b+='<a href="javascript:toggleDateSort();" title="'+e+'">POST DATE</a>';b+="</td>";b+='<td class="toc-header-col3">';b+='<a href="javascript:allPosts();" title="'+k+'">LABELS</a>';b+="</td>";b+="</tr>";for(a=0;a<postTitle.length;a++)""==c?(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++): (z=postLabels[a].lastIndexOf(c),-1!=z&&(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++));b+="</table>";c=d==postTitle.length?'<div class="toc-note">Displaying all '+postTitle.length+" posts<br/></div>":'<div class="toc-note">Displaying '+d+" posts labeled '"+(postFilter+"' of "+postTitle.length+" posts total<br/></div>");tocdiv.innerHTML= c+b}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc";sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest";sortPosts(sortBy);displayToc(postFilter)}function showToc(){tocLoaded?(displayToc(postFilter),document.getElementById("toclink")):alert("Just wait... TOC is loading")} function hideToc(){document.getElementById("toc").innerHTML="";document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">\u00bb Show Table of Contents</a> <img src="http://chenkaie.blog.googlepages.com/new_1.gif"/>'};
//]]>
</script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc' type='text/javascript'></script>
</div>
</div>