function update_fps() { fps.innerHTML = Math.round(1000/(Date.now()-now)) now = Date.now() } function init_fps() { fps = document.createElement("a") fps.style.color = "lime" document.body.appendChild(fps) now = Date.now() } function init_canvas() { c = document.getElementById("cvs") ctx = c.getContext("2d") c.width = window.innerWidth c.height = window.innerHeight } function setup() { ps = [] text = prompt("Enter any text/emojies","🎊 2019 🎉") init(text) window.addEventListener("touchstart", on_touch_start) rockets = [] particles = 0 particles_2 = [] setTimeout(()=>{ setInterval(()=>{ rockets.push(new Rocket(c.width*Math.random(), c.height*Math.random())) },600+400*Math.random()) },500) } function update() { for(let r of rockets) { r.update() if(r.done == r.amount) rockets.splice(rockets.indexOf(r),1) } for(let p of particles_2) p.update() } function draw() { for(let r of rockets) r.draw() for(let p of particles_2) p.draw() if(!ps.length) { setTimeout(() => { if(text) { ctx.fillStyle = "lime" if(text.length <= 10) ctx.font = "12vmax Helvicia" else if(text.length <= 15) ctx.font = "10vmax Helvicia" else if(text.length <= 20) ctx.font = "6vmax Helvicia" ctx.fillText(text, 20, 200) }},10000) } } function Particle_1(sx,sy,color) { this.sx = sx this.sy = sy this.pos = { x: c.width*Math.random(), y: c.height*Math.random()} this.vel = {x:0, y:0} this.acc = {x:0, y:0} this.color = color this.div = 100 this.s = () => { return { x: this.sx-this.pos.x, y: this.sy-this.pos.y } } this.update = function() { this.acc.x = this.s().x / this.div this.acc.y = this.s().y / this.div this.div += 34 this.vel.x += this.acc.x this.vel.y += this.acc.y this.vel.x *= 0.94 this.vel.y *= 0.94 this.pos.x += this.vel.x this.pos.y += this.vel.y } this.draw = function() { ctx.beginPath() ctx.arc(this.pos.x,this.pos.y,1.3,0,2*Math.PI) var c = this.color ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+")" ctx.fill() ctx.closePath() } } class Particle_2 { constructor(x,y,r,g,b) { this.pos = {x:x, y:y} this.color = {r:r, g:g, b:b, a:1} this.vel = {x:10*Math.random()-5, y:10*Math.random()-5} } update() { this.vel.x *= 0.95 this.vel.y *= 0.93 this.vel.y += .1 this.pos.x += this.vel.x this.pos.y += this.vel.y this.color.a -= 0.025 } draw() { ctx.beginPath() ctx.arc(this.pos.x, this.pos.y, 1.5, 0, 2*Math.PI) var c = this.color ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")" ctx.fill() ctx.closePath() } } class Rocket { constructor(x, dy) { this.pos = {x: x, y: get_height()} this.dy = dy this.vel = {x: 0, y: -5} this.acc = {x: 0, y: -0.5} this.color = [{r:255,g:0,b:0,a:1},{r:0,g:255,b:0,a:1}, {r:0,g:0,b:255,a:1}] [Math.floor(3*Math.random())] this.particles = [] this.amount = 150 this.exploded = false this.r = 20 this.done = 0 } draw() { ctx.beginPath() ctx.arc(this.pos.x, this.pos.y, 3, 0, 2*Math.PI) var c = this.color ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")" ctx.fill() ctx.closePath() if(this.exploded) for(let p of this.particles) p.draw() } update() { if(this.pos.y > this.dy) { this.vel.x += this.acc.x this.vel.y += this.acc.y this.pos.x += this.vel.x this.pos.y += this.vel.y } else if(ps.length) { if(!this.exploded) { for(let i = 0; i < this.amount; i++) { let p = ps[Math.floor(ps.length*Math.random())] ps.splice(ps.indexOf(p),1) if(p) { p.pos.x = this.pos.x + 0 this.r*2*Math.random()-this.r p.pos.y = this.pos.y + 0 this.r*2*Math.random()-this.r this.particles.push(p) } } this.exploded = true this.color = {r:0,g:0,b:0,a:0} } for(let p of this.particles) { p.update() } } else if(!ps.length) { if(!this.exploded) { for(let i = 0; i < this.amount; i++) { this.particles.push(new Particle_2( this.pos.x, this.pos.y, 255*Math.random(), 255*Math.random(), 255*Math.random() )) } this.exploded = true this.color = {r:0,g:0,b:0,a:0} } for(let p of this.particles) { p.update() if(p.color.a <= 0) this.done++ } if(this.done == this.amount) { for(let i in this.particles) delete this.particles[i] this.particles = [] } } } } var get_height = () => window.innerHeight var get_width = () => window.innerWidth var on_touch_start = (e) => { rockets.push( new Rocket(e.touches[0].clientX,e.touches[0].clientY)) } function init(text) { ctx.fillStyle = "lime" if(text) { if(text.length <= 10) ctx.font = "12vmax Helvicia" else if(text.length <= 15) ctx.font = "10vmax Helvicia" else if(text.length <= 20) ctx.font = "6vmax Helvicia" ctx.fillText(text, 20, 200) } data = ctx.getImageData(0,0,c.width,c.height) ctx.fillStyle = "black" ctx.fillRect(0,0,c.width,c.height) for(let y = 0; y < c.height; y+=2) { for(let x = 0; x < c.width; x+=2) { if(data.data[(x+y*c.width)*4+3]>100) { var r = data.data[(x+y*c.width)*4] var g = data.data[(x+y*c.width)*4+1] var b = data.data[(x+y*c.width)*4+2] ps.push(new Particle_1(x,y,{r:r,g:g,b:b})) } } } delete data } function main() { update_fps() update() clear() draw() requestAnimationFrame(main) } function clear() { ctx.fillStyle = "rgba(0,0,0,0.25)" ctx.fillRect(0,0,c.width,c.height) } window.onload = () => { init_fps() init_canvas() setup() requestAnimationFrame(main) }

Firework 2019