var can, c, W, H;//global vars go here var comets = []; const colors = ["#DBD44C", "#76AA5A", "#138EAD", "#6A6884", "#DD784D", "#00ECFF"]; let gravity = 0.35; // variables to calculate frames per second and display it let fps, prevTime, domFPS; let frames = 0; function normalizeX(x, y, xStart, yStart) { var xDiff = x - xStart; var yDiff = y - yStart; var length = Math.sqrt((xDiff * xDiff) + (yDiff * yDiff)); return (xDiff / length); } function normalizeY(x, y, xStart, yStart) { var yDiff = y - yStart; var xDiff = x - xStart; var length = Math.sqrt((xDiff * xDiff) + (yDiff * yDiff)); return (yDiff / length); } window.onload = function() { init(); draw(); } function init() { can = document.getElementById("can"); c = can.getContext("2d"); W = window.innerWidth; H = window.innerHeight; can.width = W; can.height = H; domFPS = document.getElementById("fps"); prevTime = Date.now(); //initialize globally declared objects here comets.push(new Comet(W / 2, -10)); } function draw() { requestAnimationFrame(draw); c.beginPath(); c.rect(0,0,W,H); c.fillStyle = "rgba(0,0,0,0.1)"; c.fill(); if (Math.floor(Math.random() * 100 + 1) <= 3) { var xPos = Math.random() * (W - 20) + 10; comets.push(new Comet(xPos, -10)); } // animation code goes here for (let i = comets.length - 1; i >= 0; --i) { comets[i].update(); if (comets[i].isDone()) { comets.splice(i, 1); } } frames++; fps = calcFPS(); // only update fps span content every 8 frames if (!(frames % 8)) { domFPS.textContent = fps; } } function spawnMega() { var xPos = Math.random() * (W - 80) + 40; comets.push(new Comet(xPos, -10, true)); } function Particle(x, y, xVel, yVel, color) { //define particles this.x = x; this.y = y; this.h = 3; this.color = color; this.xVel = xVel; this.yVel = yVel; this.lastPos = { x: undefined, y: undefined } // this.update = function() { // this.render(); // this.lastPos.x = this.x; // this.lastPos.y = this.y; // this.yVel += gravity; // this.y += this.yVel; // if (this.x <= 0 || this.x >= W) { // this.xVel *= -1; // } // this.x += this.xVel; // } // this.render = function() { // c.beginPath(); // c.strokeStyle = this.color; // c.lineWidth = this.h; // c.lineCap = "round"; // c.moveTo(this.lastPos.x, this.lastPos.y); // c.lineTo(this.x, this.y); // c.stroke(); // c.closePath(); // } } Particle.prototype.render = function() { c.beginPath(); c.strokeStyle = this.color; c.lineWidth = this.h; c.lineCap = "round"; c.moveTo(this.lastPos.x, this.lastPos.y); c.lineTo(this.x, this.y); c.stroke(); c.closePath(); } Particle.prototype.update = function() { this.render(); this.lastPos.x = this.x; this.lastPos.y = this.y; this.yVel += gravity; this.y += this.yVel; if (this.x <= 0 || this.x >= W) { this.xVel *= -1; } this.x += this.xVel; } function Comet(x, y, mega = false) { this.mega = mega; this.x = x; this.y = y; this.xVel = 0; this.yVel = 5; this.lastPos = { x: undefined, y: undefined } if (this.mega) { this.h = 25; this.nParticles = 200; this.explodeCounter = 135; this.velMult = 5; this.xVelAdd = 10; this.yVelAdd = 15; } else { this.h = 9; this.nParticles = Math.floor(Math.random() * 20 + 30); this.explodeCounter = 65; this.velMult = 3; this.xVelAdd = 5; this.yVelAdd = 9; } this.color = colors[parseInt(Math.random() * colors.length)]; this.particles = []; this.exploded = false; this.done = false; this.update = function() { if (!this.exploded) { if (this.y >= H || this.x >= W || this.x <= 0) { if (this.x < 0) { this.explodeLeft(); } else if (this.x > W) { this.explodeRight(); } else { this.explode(); } } else { this.render(); this.lastPos.x = this.x; this.lastPos.y = this.y; this.yVel += gravity; this.xVel += (Math.random() - 0.5); this.x += this.xVel; this.y += this.yVel; } } else {//if exploded for (let i = 0; i < this.nParticles; ++i) { this.particles[i].update(); } this.explodeCounter -= 1; if (this.explodeCounter === 0) { this.particles = []; this.done = true; } } } this.render = function() { c.beginPath(); c.strokeStyle = this.color; c.lineWidth = this.h; c.lineCap = "round"; c.moveTo(this.lastPos.x, this.lastPos.y); c.lineTo(this.x, this.y); c.stroke(); c.closePath(); } this.explode = function() { this.exploded = true; for (let i = 0; i < this.nParticles; ++i) { var xComp = this.x + Math.random() * 2 - 1; var yComp = this.y + Math.random() * -1; //normalize makes it circular xVel = normalizeX(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.xVelAdd); yVel = normalizeY(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.yVelAdd); this.particles.push(new Particle(this.x, this.y - 1, xVel, yVel, this.color)); } } this.explodeRight = function() { this.exploded = true; for (let i = 0; i < this.nParticles; ++i) { var xComp = this.x + Math.random() + 0.2; var yComp = this.y + Math.random() * 2 - 1.5; //normalize makes it circular xVel = normalizeX(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.xVelAdd); yVel = normalizeY(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.yVelAdd); this.particles.push(new Particle(this.x <= 0 ? 1 : this.x, this.y, xVel, yVel, this.color)); } } this.explodeLeft = function() { this.exploded = true; for (let i = 0; i < this.nParticles; ++i) { var xComp = this.x - Math.random() - 0.2; var yComp = this.y + Math.random() * 2 - 1.5; //normalize makes it circular xVel = normalizeX(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.xVelAdd); yVel = normalizeY(xComp, yComp, this.x, this.y) * (Math.random() * this.velMult + this.yVelAdd); this.particles.push(new Particle(this.x >= W ? (W - 1) : this.x, this.y, xVel, yVel, this.color)); } } this.isDone = function() { return this.done; } } function calcFPS() { let diff = Date.now() - prevTime; prevTime = Date.now(); return Math.round(1000 / diff); }

Comet Explosion!