fireworks.js

/*
 * fireworks.js: A JavaScript animation experiment
 * -----------------------------------------------
 * http://schillmania.com/projects/fireworks/
 *
 * Provided "as-is", free and without warranty
 * Originally written in 2005. Old code ahead.
 *
 * Includes SoundManager 2 API (BSD).
 * http://schillmania.com/projects/soundmanager2/
 *
 * v0.9.1.20110703
*/

/*jslint white: false, onevar: false, undef: true, nomen: false, eqeqeq: false, plusplus: false, bitwise: true, regexp: false, newcap: true, immed: true */
/*global window, document, navigator, setTimeout, setInterval, clearInterval, enableDebugMode, writeDebug, soundManager, FireworkParticle, attachEvent */

var fc;

function Animator() {

  var self = this;
  writeDebug('Animator()');
  this.tweens = [];
  this.tweens['default'] = [1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1];
  this.tweens.blast = [12,12,11,10,10,9,8,7,6,5,4,3,2,1];
  this.tweens.fade = [10,10,10,10,10,10,10,10,10,10];
  this.queue = [];
  this.queue.IDs = [];
  this.active = false;
  this.timer = null;

  this.createTween = function(start,end,type) {
    // return array of tween coordinate data (start->end)
    type = type||'default';
    var tween = [start];
    var tmp = start;
    var diff = end-start;
    var x = self.tweens[type].length;
    for (var i=0; i<x; i++) {
      tmp += diff*self.tweens[type][i]*0.01;
      tween[i] = {};
      tween[i].data = tmp;
      tween[i].event = null;
    }
    return tween;
  };

  this.enqueue = function(o,fMethod,fOnComplete) {
    // add object and associated methods to animation queue
    // writeDebug('animator.enqueue()');
    var i;
    if (!fMethod) {
      writeDebug('animator.enqueue(): missing fMethod');
    }
    if (typeof(self.queue.IDs[o.oID])=='undefined') {
      // writeDebug('animator.enqueue(): added '+o.oID);
      i = self.queue.length;
      self.queue.IDs[o.oID] = i;
      self.queue[i] = o;
    } else {
      // writeDebug('animator.enqueue(): '+o.oID+' already queued');
      i = self.queue.IDs[o.oID]; // retrieve queue index
      self.queue[i].active = true;
      self.queue[i].frame = 0;
    }
    o.active = true; // flag for animation
    self.queue[i]._method = fMethod;
    self.queue[i]._oncomplete = fOnComplete?fOnComplete:null;
  };

  this.animate = function() {
    var active = 0;
    for (var i=self.queue.length; i--;) {
      if (self.queue[i].active) {
        self.queue[i]._method();
        active++;
      }
    }
    if (active===0 && self.timer) {
      // all animations finished
      self.stop();
    } else {
      // writeDebug(active+' active');
    }
  };

  this.start = function() {
    if (self.timer || self.active) {
      // writeDebug('animator.start(): already active');
      return false;
    }
    // writeDebug('animator.start()'); // report only if started
    self.active = true;
    self.timer = setInterval(self.animate,fc.intervalRate);
  };

  this.stop = function() {
    // writeDebug('animator.stop()',true);
    clearInterval(self.timer);
    self.timer = null;
    self.active = false;
    self.queue = [];
    self.queue.IDs = [];
  };

}

function FireworksController() {

  var self = this;
  this.intervalRate = 20; // rate (ms) to run animation at, general best default = 20
  this.DEBUG = true; // debug mode disabled by default
  this.oFW = null;
  this.isIE = !!(navigator.userAgent.match(/msie/i));
  this.isOpera = !!(navigator.userAgent.match(/opera/i));
  if (this.isOpera) {
    this.isIE = false; // no impersonation allowed here!
  }
  this.fireworks = [];
  this.animator = null;
  this.gOID = 0; // global object ID counter (for animation queue)
  this.particleTypes = 6;
  this.particleXY = 10;
  this.tweenFade = [100,90,80,70,60,50,40,30,20,10,0];
  this.isSafari = !!(navigator.appVersion.match(/webkit/i));
  this.canvasX = null;
  this.canvasY = null;
  this.screenY = null; // screen area (not entire page)
  self.scrollY = null;

  self.getWindowCoords = function() {
    self.canvasX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth);
    self.canvasY = (document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
    self.screenY = self.canvasY;
    self.scrollY = parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop, 10);
    self.canvasY += self.scrollY;
  };

  this.getWindowCoordsAlt = function() {
    self.canvasX = window.innerWidth-16;
    self.canvasY = window.innerHeight;
    self.screenY = self.canvasY;
    self.scrollY = parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop, 10);
    self.canvasY += self.scrollY;
  };

  this.getPanX = function(x) {
    x = parseInt(x, 10);
    var pos = x/self.canvasX;
    if (pos<0.4) {
      pos *= -1;
    } else if (pos >= 0.4 && pos <= 0.6) {
      pos = 0.5;
    }
    pos = parseInt(pos*100, 10);
    // writeDebug('getPanX('+x+'): '+pos+'%');
    return pos;
  };

  this.isEmpty = function(o) {
    // needs further hacking
    return (typeof(o)=='undefined'||(o===null&&o!==0)||(o===''&&o!==0)||o=='null');
  };

  this.init = function() {
    self.oFW = document.getElementById('fw');
    self.oFP = document.getElementById('fp');
    if (typeof(enableDebugMode)!='undefined' && (self.DEBUG||window.location.toString().toLowerCase().indexOf('debug')>=0)) {
      enableDebugMode();
    }
    self.getWindowCoords();
    self.animator = new Animator();
  };

  this.destructor = function() {
    for (var i=self.fireworks.length; i--;) {
      self.fireworks[i] = null;
    }
    self.fireworks = null;
  };

  if (this.isSafari || this.isOpera) {
    this.getWindowCoords = this.getWindowCoordsAlt;
  }

}

function Firework(oC,startX,startY,burstX,burstY,burstType,nRadius,nParticles,nCircles,allowRandom,obeyBoundaries) {
  var self = this;
  this.oID = 'fp'+(fc.gOID++); // may be unneeded
  var p = '';
  for (var i=0; i<arguments.length-1; i++) {
    p += arguments[i]+',';
  }
  p += arguments[i];
  writeDebug('firework('+p+')');
  this.oC = oC;
  this.o = fc.oFW.cloneNode(!fc.isIE?true:false);
  this.particles = [];
  this.vX = -1;
  this.vY = -4;
  this.x = startX;
  this.y = startY;
  this.allowRandom = allowRandom;
  this.obeyBoundaries = obeyBoundaries;
  this.frame = 0;
  this.tween = [];
  this.active = false;

  this.moveTo = function(x,y) {
    self.o.style.left = x+'px';
    self.o.style.top = y+'px';
    self.x = x;
    self.y = y;
  };

  this.slideTo = function(x,y) {
    self.tween = [fc.animator.createTween(self.x,x,'blast'),fc.animator.createTween(self.y,y,'blast')];
    fc.animator.enqueue(self,self.animate,self.aniExplode);
  };

  this.aniExplode = function() {
    // called from animation finish
    self.o.style.background = 'none';
    self.o.style.border = 'none';
    for (var i=self.particles.length; --i;) {
      self.particles[i].o.style.display = 'block';
      fc.animator.enqueue(self.particles[i],self.particles[i].animate);
    }
    // attach oncomplete event handler to last particle
    self.particles[i].o.style.display = 'block';
    fc.animator.enqueue(self.particles[i],self.particles[i].animate,self.beginFade);
    var sID = 'boom'+parseInt(Math.random()*8, 10);
    if (soundManager.ok()) {
      soundManager.play(sID, {pan: fc.getPanX(self.x)});
    }
  };

  this.beginFade = function() {
    // writeDebug('beginFade');
    self.tween = fc.animator.createTween(1,0,'fade');
    fc.animator.enqueue(self,self.aniFade,self.destructor);
  };

  this.aniFade = function() {
    // writeDebug('firework.aniFade('+self.tween[self.frame].data+')');
    for (var i=self.particles.length; i--;) {
      self.particles[i].moveRel();
      self.particles[i].nextState();
      self.particles[i].setOpacity(fc.tweenFade[self.frame]);
    }
    if (self.frame++>=self.tween.length) {
      self.active = false;
      self.frame = 0;
      if (self._oncomplete) {
        self._oncomplete();
      }
      self._oncomplete = null;
      return false;
    }
    return true;
  };

  this.destructor = function() {
    writeDebug('firework.destructor()');
    // for (var i=0; i<self.particles.length; i++) {
    for (var i=self.particles.length; i--;) {
      self.particles[i].destructor();
      self.particles[i] = null;
    }
    self.particles = null;
    self.oC.removeChild(self.o);
    self.o = null;
    self.oC = null;
  };

  this.animate = function() {
    // generic animation method
    self.moveTo(self.tween[0][self.frame].data,self.tween[1][self.frame].data,'burst');
    if (self.frame++>=self.tween[0].length-1) {
      self.active = false;
      self.frame = 0;
      if (self._oncomplete) {
        self._oncomplete();
      }
      self._oncomplete = null;
      return false;
    }
    return true;
  };

  this.createBurst = function(circles,nMax,rMax,type) {
    // c: # of circles, n: # of particles per circle, r: max radius
    writeDebug('firework.createBurst('+circles+','+nMax+','+rMax+','+type+')');
    var i=0, j=0;
    var tmp = 0;
    var radiusInc = rMax/circles;
    var radius = radiusInc;
    var angle = 0;
    var angleInc = 0; // per-loop increment
    var radiusOffset = (self.allowRandom?(0.33+Math.random()):1);
    var particlesPerCircle = [];
    var isRandom = Math.random()>0.5;
    var circleTypes = [type,circles>1?parseInt(Math.random()*fc.particleTypes, 10):type];
    var thisType = null;

    for (i=0; i<circles; i++) {
      particlesPerCircle[i] = parseInt(nMax*(i+1)/circles*1/circles, 10)||1; // hack - nMax*(i+1)/circles;
      angle = angleInc; // could be offset as well
      angleInc = 360/particlesPerCircle[i];
      thisType = circleTypes[i%2];
      for (j=0; j<particlesPerCircle[i]; j++) {
        self.particles[tmp] = new FireworkParticle(self.o,self.allowRandom,thisType,burstX,burstY,self.obeyBoundaries);
        self.particles[tmp].slideTo(radius*Math.cos(angle*Math.PI/180),radius*radiusOffset*Math.sin(angle*Math.PI/180));
        angle += angleInc;
        tmp++;
      }
      radius += radiusInc; // increase blast radius
    }
  };

  // startX,startY,burstX,burstY,burstType,nRadius,nParticles,nCircles

  self.oC.appendChild(self.o);
  self.moveTo(self.x,self.y);
  self.createBurst(nCircles,nParticles,nRadius,burstType); // create an explosion
  self.slideTo(burstX,burstY);
  var sID = 'fire'+parseInt(Math.random()*2, 10);
  if (soundManager.ok()) {
    soundManager.play(sID, {pan: fc.getPanX(self.x)});
  }
  fc.animator.start();

}

function FireworkParticle(oC,isRandom,type,baseX,baseY,obeyBoundaries) {

  var self = this;
  this.oC = oC;
  this.oID = 'fp'+(fc.gOID++); // may be unneeded
  this.o = fc.oFP.cloneNode(true);
  this.obeyBoundaries = obeyBoundaries;
  // set type: index becomes Y offset (for background image)
  this.type = null;

  this.oImg = this.o.getElementsByTagName('img')[0];
  this.oImg._src = this.oImg.src;
  this.o.style.display = 'none';
  this.baseX = baseX;
  this.baseY = baseY;
  this.x = 0;
  this.y = 0;
  this.vx = 0;
  this.vy = 0;
  this.frame = 0;
  this.tween = [];
  this.active = null;
  this.tweenType = 'blast';
  this.states = [];
  this.state = parseInt(Math.random()*3, 10);
  this.isRandom = isRandom;
  this._mt = 5;

  this.moveTo = function(x,y) {
    self.o.style.left = x+'px';
    self.o.style.top = y+'px';
    self.vx = x-self.x;
    self.vy = y-self.y;
    self.x = x;
    self.y = y;
  };

  this.moveRel = function() {
    // continue last moveTo() pattern, bouncing off walls if applicable
    var toX = self.x+self.vx;
    var toY = self.y+self.vy;
    if (self.obeyBoundaries) {
      var xMax = fc.canvasX-self.baseX-fc.particleXY;
      var yMax = fc.canvasY-self.baseY-fc.particleXY;
      var yMin = fc.scrollY;
      if (self.vx>=0) {
        if (toX>=xMax) {
          self.vx *= -1;
        }
      } else if (self.vx<0 && toX+self.baseX<=0) {
        self.vx *= -1;
      }
      if (self.vy>=0) {
        if (toY>=yMax) {
          self.vy *= -1;
        }
      } else if (self.vy<0) {
        if (toY+self.baseY-yMin<=0) {
          self.vy *= -1;
        }
      }
    }
    self.moveTo(self.x+self.vx,self.y+self.vy);
  };

  this.setOpacity = function(n) { // where n = 0..100
    self.oImg.style.marginLeft = -100+(n*fc.particleXY/10)+'px';
  };

  this.nextState = function() {
    var vis = self.o.style.visibility;
    if (self.state == 2 && vis != 'hidden') {
      self.o.style.visibility = 'hidden';
    } else if (self.state != 2 && vis == 'hidden') {
      self.o.style.visibility = 'visible';
    }
    self.state = parseInt(Math.random()*3, 10);
  };

  this.slideTo = function(x1,y1) {
    // writeDebug('slideTo (x/y): '+x1+','+y1);
    if (self.isRandom) {
      // randomize a bit
      x1 += (x1*0.2*(Math.random()>0.5?1:-1));
      y1 += (y1*0.2*(Math.random()>0.5?1:-1));
    }
    self.tween = [fc.animator.createTween(self.x,x1,self.tweenType),fc.animator.createTween(self.y,y1,self.tweenType)];
    // prevent X overflow (scrolling)
    var xMax = fc.canvasX-fc.particleXY;
    var yMax = fc.canvasY-fc.particleXY;
    var xMin = fc.particleXY-self.baseX;
    var yMin = fc.scrollY;
    var toX = null;
    var toY = null;
    if (self.obeyBoundaries) {
      for (var i=self.tween[0].length; i--;) {
        // bounce off walls where applicable
        toX = self.tween[0][i].data+self.baseX;
        toY = self.tween[1][i].data+self.baseY;
        if (toX>=xMax) {
          self.tween[0][i].data -= (toX-xMax)*2;
          // self.tween[0][i].event = 'bounce';
        } else if (toX<0) {
          self.tween[0][i].data -= (toX*2);
          // self.tween[0][i].event = 'bounce';
        }
        if (toY>=yMax) {
          self.tween[1][i].data -= (toY-yMax)*2;
          // self.tween[1][i].event = 'bounce';
        } else if (toY-yMin<=0) {
          self.tween[1][i].data -= (toY-yMin)*2;
          // self.tween[1][i].event = 'bounce';
        }
      }
    }
  };

  this.animate = function() {
    var f0 = self.tween[0][self.frame].data;
    var f1 = self.tween[1][self.frame].data;
    self.moveTo(f0,f1);
    // possible bounce event/sound hooks
    // if (self.tween[0][self.frame].event) soundManager.play(self.tween[0][self.frame].event);
    // if (self.tween[1][self.frame].event) soundManager.play(self.tween[1][self.frame].event);
    if (self.frame++>=self.tween[0].length-1) {
      if (self._oncomplete) {
        self._oncomplete();
      }
      self._oncomplete = null;
      self.active = false;
      self.frame = 0;
      return false;
    } else if (self.frame>10) {
      self.nextState();
    }
    return true;
  };

  this.destructor = function() {
    self.oImg = null;
    self.oC.removeChild(self.o);
    self.oC = null;
    self.o = null;
  };

  this.setType = function(t) {
    self.type = t;
    self.oImg.style.marginTop = -(fc.particleXY*t)+'px';
  };

  self.setType(type);
  self.oC.appendChild(self.o);

}

function createFirework(nRadius,nParticles,nCircles,nBurstType,startX,startY,burstX,burstY,allowRandom,obeyBoundaries) {

  // check all arguments, supply random defaults if needed
  var tmp = '';
  for (var i in arguments) {
    if (arguments.hasOwnProperty(i)) {
      tmp += i+',';
    }
  }
  writeDebug('createFirework('+tmp+')');

  if (fc.isEmpty(startX)) {
    startX = parseInt(Math.random()*fc.canvasX, 10);
  } else {
    startX = parseInt(fc.canvasX*startX/100, 10);
  }

  if (fc.isEmpty(startY)) {
    startY = fc.canvasY-fc.particleXY;
  } else {
    startY = fc.canvasY-fc.screenY+parseInt(fc.screenY*startY/100, 10);
  }

  if (fc.isEmpty(burstX)) {
    burstX = parseInt(fc.canvasX*0.1+(Math.random()*fc.canvasX*0.8), 10);
  } else {
    burstX = parseInt(fc.canvasX*burstX/100, 10);
  }

  if (fc.isEmpty(burstY)) {
    burstY = fc.canvasY-parseInt(Math.random()*fc.screenY, 10);
  } else {
    burstY = fc.canvasY-parseInt(fc.screenY*(100-burstY)/100, 10);
  }

  if (fc.isEmpty(nBurstType)) {
    nBurstType = parseInt(Math.random()*fc.particleTypes, 10);
  }

  if (fc.isEmpty(nRadius)) {
    nRadius = 64+parseInt(Math.random()*fc.screenY*0.75, 10);
  } else if (nRadius.toString().indexOf('%')>=0) {
    nRadius = parseInt(parseInt(nRadius, 10)/100*fc.screenY, 10);
  } else if (nRadius.toString().indexOf('.')>=0) {
    nRadius = parseInt(nRadius*fc.screenY, 10);
  } else {
    nRadius = parseInt(nRadius*fc.screenY/100, 10);
  }

  if (fc.isEmpty(nParticles)) {
    nParticles = 4+parseInt(Math.random()*64, 10);
  }

  if (fc.isEmpty(nCircles)) {
    nCircles = Math.random()>0.5?2:1;
  }

  if (fc.isEmpty(allowRandom)) {
    allowRandom = Math.random()>0.5;
  }

  if (fc.isEmpty(obeyBoundaries)) {
    obeyBoundaries = Math.random()>0.5;
  }

  // update screen coordinates
  fc.getWindowCoords();

  fc.fireworks[fc.fireworks.length] = new Firework(document.getElementById('fireContainer'),startX,startY,burstX,burstY,nBurstType,nRadius,nParticles,nCircles,allowRandom,obeyBoundaries);

}

soundManager.url = './swf/';
soundManager.useHighPerformance = true;
soundManager.useHTML5Audio = true;
soundManager.wmode = 'transparent';

soundManager.onready(function() {

  var sounds = {
    'fire0': 'boom3.mp3',
    'fire1': 'boom4.mp3',
    'boom0': 'boom1.mp3',
    'boom1': 'boom2.mp3',
    'boom2': 'pop1.mp3',
    'boom3': 'pop2.mp3',
    'boom4': 'pop3.mp3',
    'boom5': 'pop4.mp3',
    'boom6': 'pop5.mp3',
    'boom7': 'pop6.mp3'
  };

  for (var item in sounds) {
    if (sounds.hasOwnProperty(item)) {
      soundManager.createSound({
        id: item,
        url: '/static/js/libs/audio/' + sounds[item],
        autoLoad: true
      });
    }
  }

});

fc = new FireworksController();

// create null objects if APIs not present
if (typeof(writeDebug)=='undefined') {
  window.writeDebug = function() {
    return false;
  };
}

function addEventHandler(o,evtName,evtHandler) {
  return (typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler));
}

function removeEventHandler(o,evtName,evtHandler) {
  return (typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler));
}

addEventHandler(window,'resize',fc.getWindowCoords);
addEventHandler(window,'scroll',fc.getWindowCoords);
addEventHandler(window,'load',fc.init);
addEventHandler(window,'unload',fc.destructor);