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