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