/* * 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 = '../js/fireworks/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: '/js/fireworks/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);