59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
(() => {
|
|
const canvas = document.getElementById("particles");
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
let particles = [];
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 4 + 1;
|
|
this.speedX = Math.random() * 0.5 - 0.25;
|
|
this.speedY = Math.random() * 0.5 + 0.2;
|
|
}
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
if (this.y > canvas.height) this.y = 0;
|
|
}
|
|
draw() {
|
|
ctx.fillStyle = "#FFDD00";
|
|
ctx.globalAlpha = 0.6;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function initParticles() {
|
|
particles = [];
|
|
for (let i = 0; i < 80; i += 1) {
|
|
particles.push(new Particle());
|
|
}
|
|
}
|
|
|
|
function animateParticles() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for (const particle of particles) {
|
|
particle.update();
|
|
particle.draw();
|
|
}
|
|
requestAnimationFrame(animateParticles);
|
|
}
|
|
|
|
resizeCanvas();
|
|
initParticles();
|
|
animateParticles();
|
|
window.addEventListener("resize", () => {
|
|
resizeCanvas();
|
|
initParticles();
|
|
});
|
|
})();
|