globals: { var ctx; var canvas; var clock; var clock2; var particles = new Array; var partCount; var fireworks = new Array; var currentHue; var partSpeed; var partSpeedVariance; var partWind; var partFriction; var partGravity; var hueMin; var hueMax; var fworkSpeed; var fworkAccel; var hueVariance; var flickerDensity; var showShockwave; var clearAlpha; var a = 1; } function init(){ window.addEventListener("resize", getSize(), false); getSize(); ctx.clearRect(0, 0, width, height); clearInterval(clock); clock = setInterval(main, 33); clock2 = setInterval(launchRocket, 1000); particles = []; partCount = 150; fireworks = []; currentHue = 0; partSpeed = 0; partSpeedVariance = 10; partWind = 50; partFriction = 5; partGravity = 3; hueMin = 0; hueMax = 360; fworkSpeed = 3; fworkAccel = 10; hueVariance = 30; flickerDensity = 30; //highest at 50 clearAlpha = 25; lineWidth = 1; } function main(){ ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'rgba(0,0,0,'+clearAlpha/100+')'; ctx.fillRect(0,0,width,height); updateFireworks(); updateParticles(); drawFireworks(); drawParticles(); } function createParticles(x,y,hue){ for(var i=0;iwidth||p.y<0||p.y>height||p.alpha<0.05){ self.particles.splice(i, 1); } } } function drawParticles(){ for(var i=0;i0&&rand(0,(50-flickerDensity))==0){ ctx.beginPath(); ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false) self.ctx.closePath(); var randAlpha = rand(50,100)/100; ctx.fillStyle = "hsla("+p.hue+", 100%, "+p.brightness+"%, "+randAlpha+")"; ctx.fill(); } } } function createFireworks(startX, startY, targetX, targetY){ fireworks.push({ x: startX, y: startY, startX: startX, startY: startY, hitX: false, hitY: false, coordLast: [ {x: startX, y: startY}, {x: startX, y: startY}, {x: startX, y: startY} ], targetX: targetX, targetY: targetY, speed: fworkSpeed, angle: Math.atan2(targetY - startY, targetX - startX), acceleration: fworkAccel/100, hue: currentHue, brightness: rand(50, 80), alpha: rand(0.5,1, false), lineWidth: lineWidth }); currentHue = rand(hueMin, hueMax); } function updateFireworks(){ for(var i=0;i= f.targetX){ if(f.x + vx <= f.targetX){ f.x = f.targetX; f.hitX = true; }else{ f.x += vx; } }else{ if(f.x + vx >= f.targetX){ f.x = f.targetX; f.hitX = true; }else{ f.x += vx; } } if(f.startY >= f.targetY){ if(f.y + vy <= f.targetY){ f.y = f.targetY; f.hitY = true; }else{ f.y += vy; } }else{ if(f.y + vy >= f.targetY){ f.y = f.targetY; f.hitY = true; }else{ f.y += vy; } } if(f.hitX&&f.hitY){ createParticles(f.targetX, f.targetY, f.hue); fireworks.splice(i, 1); } } } function drawFireworks(){ ctx.globalCompositeOperation = "lighter"; for(var i=0;i

Fancy & Realistic Fireworks