//alert("Made by AskPlays\nPlease upvote if you like it!"); var canvas, ctx, width, height; var fireworks = []; var particles = []; function setup () { canvas = document.getElementById("canvas"); setSize(canvas); ctx = canvas.getContext("2d"); ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, width, height); fireworks.push(new Firework(Math.random()*(width-200)+100)); window.addEventListener("resize", windowResized); document.addEventListener("click", onClick); requestAnimationFrame(loop); } var loop = function() { ctx.globalAlpha = 0.1; ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, width, height); ctx.globalAlpha = 1; for (let i=0; i 80) particles.splice(i, 1); } if(Math.random()<1/60) fireworks.push(new Firework(Math.random()*(width-200)+100)); //console.log(fireworks); requestAnimationFrame(loop); } //requestAnimationFrame(loop); class Particle { constructor(x, y, col) { this.x = x; this.y = y; this.col = col; this.vel = randomVec(2); this.lifetime = 0; } update() { this.x += this.vel.x; this.y += this.vel.y; this.vel.y += 0.015;//gravity this.vel.x *= 0.99;//air resistance this.vel.y *= 0.99;//air resistance this.lifetime++; } draw() { ctx.globalAlpha = Math.max(1-this.lifetime/80, 0); ctx.fillStyle = this.col; ctx.fillRect(this.x, this.y, 2, 2); } } class Firework { constructor(x) { this.x = x this.y = height; this.isBlown = false; this.col = randomCol(); } update() { this.y -= 2; if(this.y < 350-Math.sqrt(Math.random()*500)*40) { this.isBlown = true; for(let i=0; i<60; i++) { particles.push(new Particle(this.x, this.y, this.col)) } } return this.isBlown; } draw() { ctx.globalAlpha = 1; ctx.fillStyle = this.col; ctx.fillRect(this.x, this.y, 2, 2); } } //picking random Colors for the fireworks function randomCol() { var letters = '0123456789ABCDEF'; var nums = []; for (var i = 0; i < 3; i++) { nums[i] = Math.floor(Math.random()*256); } //brightening colors var brightest = 0; for (var i = 0; i < 3; i++) { if (brightest < nums[i]) brightest = nums[i]; } brightest /= 255; for (var i = 0; i < 3; i++) { nums[i] /= brightest; } //number to hex var color ="#"; for (var i = 0; i < 3; i++) { color += letters[Math.floor(nums[i]/16)]; color += letters[Math.floor(nums[i]%16)]; } return color; } //picking random Vectors with random speeds function randomVec(max) { let dir = Math.random()*Math.PI*2; let spd = Math.random()*max; return {x: Math.cos(dir)*spd, y: Math.sin(dir)*spd}; } function setSize(canv) { canv.style.width = (innerWidth) + "px"; canv.style.height = (innerHeight) + "px"; width = innerWidth; height = innerHeight; canv.width = innerWidth*window.devicePixelRatio; canv.height = innerHeight*window.devicePixelRatio; canvas.getContext("2d").scale (window.devicePixelRatio, window.devicePixelRatio); } function onClick(e) { fireworks.push(new Firework(e.clientX)); } function windowResized() { setSize(canvas); ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, width, height); }

Fireworks with physics