Colourful firework 🎆

 

window.onload = () => {

 

const canvas = document.createElement(“canvas”);

const ctx = canvas.getContext(‘2d’);

 

const GRAVITY = 0.05;

const FRECTION = 0.99;

 

document.body.appendChild(canvas)

 

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

 

document.body.style.margin = 0;

document.body.style.overflow = “hidden”;

 

ctx.fillStyle = ‘rgba(0, 0, 0, 1)’;

ctx.fillRect(0, 0, canvas.width, canvas.height);

 

 

const clearCanvas = () => {

// ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = ‘rgba(10, 10, 10, 0.15)’;

ctx.fillRect(0, 0, canvas.width, canvas.height);

}

 

 

const resizeCanvas = () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

};

 

const randNum = (min, max) => Math.random() * (max – min) + min;

 

const randClr = () => {

const r = randNum(30, 256);

const g = randNum(30, 256);

const b = randNum(30, 256);

return `rgb(${r}, ${g}, ${b})`

}

 

const distance = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x2 – x1, 2) + Math.pow(y2 – y1, 2));

 

class Particle {

constructor(x, y) {

this.x = x;

this.y = y;

this.radius = randNum(1, 3);

this.dx = randNum(-3, 3);

this.dy = randNum(-3, 3);

this.hue = randNum(0, 360);

this.opacity = 1;

this.lineWidth = 2;

this.opacityRate = randNum(0.01, 0.1);

}

 

update() {

this.hue = (this.hue + 1) % 360;

this.opacity -= this.opacityRate;

 

this.dy += GRAVITY;

 

this.dx = this.dx * FRECTION;

this.dy = this.dy * FRECTION;

 

this.x += this.dx;

this.y += this.dy;

 

this.draw();

}

 

draw() {

ctx.lineWidth = this.lineWidth;

ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, ${this.opacity})`;

 

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

ctx.fill();

}

}

 

class Shoot {

constructor(x, y) {

this.r = randNum(2, 4);

this.x = canvas.width / 2;

this.y = canvas.height;

this.tx = x;

this.ty = y;

this.distance = distance(this.x, this.y, this.tx, this.ty);

this.hue = randNum(0, 360);

}

 

update() {

const lastPos = { x: this.x, y: this.y };

this.hue = (this.hue + 3) % 360;

this.x += (this.tx – this.x) * 0.05;

this.y += (this.ty – this.y) * 0.05;

this.distance = distance(this.x, this.y, this.tx, this.ty);

this.draw(lastPos);

}

 

 

draw(lastPos) {

ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, 1)`;

ctx.strokeStyle = `hsla(${this.hue}, 100%, 50%, 1)`;

ctx.lineWidth = this.r;

ctx.beginPath();

 

// ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);

// ctx.fill();

 

ctx.moveTo(lastPos.x, lastPos.y);

ctx.lineTo(this.x, this.y);

ctx.stroke();

}

 

 

}

 

class Firework {

constructor(x, y) {

this.x = x;

this.y = y;

// this.count = 500;

this.count = randNum(30, 80);

this.particles = Array.from({ length: this.count }, () => new Particle(this.x, this.y));

this.shoot = new Shoot(this.x, this.y);

}

 

update() {

if (this.shoot.distance > 5) {

this.shoot.update();

return;

}

 

this.particles.forEach((particle, i) => {

particle.update();

if (particle.opacity <= 0) this.particles.splice(i, 1)

});

 

if (this.particles.length === 0) {

fireworks.splice(fireworks.indexOf(this), 1);

}

 

}

}

 

const fireworks = [];

 

const fireFirework = ({ clientX, clientY }) => {

fireworks.push(new Firework(clientX, clientY));

}

 

 

const tick = () => {

clearCanvas();

fireworks.forEach(firework => firework.update());

window.requestAnimationFrame(tick);

}

 

 

window.addEventListener(‘resize’, resizeCanvas);

window.addEventListener(‘click’, fireFirework);

 

tick();

 

setInterval(() => {

fireworks.push(new Firework(

randNum(100, canvas.width – 100),

randNum(100, canvas.height – 250)

));

}, 1000);

 

for (let i = 0; i < 12; i++) {

setTimeout(() => {

fireworks.push(new Firework(

randNum(100, canvas.width – 100),

randNum(100, canvas.height – 250)

));

}, 100 * i);

}

}

 

alert(“Click on the screen for Firework”)

 

 

 

 

 

 

Thanks for reading this blog. Hope you get satisfied with the blog and definitely this blog must have valued your time and effort of reading.

 

Take a time to connect our other digital creations such as Instagram , Facebook and Youtube.

 

 

 

🧑‍💻🧑‍💻 Social Media Links of Tech DCode :

 

👉🏻 YouTube : https://www.youtube.com/channel/UCjJnEdeugftBwQ3yMuD4B_A

👉🏻 Instagram : https://www.instagram.com/thetechdcode/

👉🏻 Facebook Page : https://www.facebook.com/thetechdcode

👉🏻 Twitter : https://twitter.com/thetechdcode

👉🏻 Telegram Channel : https://t.me/thetechdcode

👉🏻 Tech DCode Linktree : https://linktr.ee/thetechdcode

👉🏻 My Personal Handles : https://linktr.ee/virtualshivamin

 

🧑‍💻🧑‍💻 Social Media Links of SHIVAM SINGH (OWNER) :

 

👉🏻 Instagram : https://www.instagram.com/virtualshivamin/

👉🏻 Facebook Page : https://www.facebook.com/virtualshivamin/

👉🏻 Twitter : https://twitter.com/virtualshivamin/

👉🏻 Personal Linktree : https://linktr.ee/virtualshivamin