// Particle System Generator
class ParticleSystem {
constructor(canvas, options = {}) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.particles = [];
this.options = {
count: options.count || 100,
color: options.color || '#00ff41',
speed: options.speed || 2,
size: options.size || 3,
connectParticles: options.connectParticles || false
};
this.init();
}
init() {
// Create particles
for (let i = 0; i < this.options.count; i++) {
this.particles.push({
x: Math.random() * this.canvas.width,
y: Math.random() * this.canvas.height,
vx: Math.random() * this.options.speed - this.options.speed/2,
vy: Math.random() * this.options.speed - this.options.speed/2,
size: Math.random() * this.options.size + 1,
color: this.options.color
});
}
this.animate();
}
animate() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Update and draw particles
this.particles.forEach(particle => {
// Update position
particle.x += particle.vx;
particle.y += particle.vy;
// Bounce off walls
if (particle.x < 0 || particle.x > this.canvas.width) {
particle.vx = -particle.vx;
}
if (particle.y < 0 || particle.y > this.canvas.height) {
particle.vy = -particle.vy;
}
// Draw particle
this.ctx.beginPath();
this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
this.ctx.fillStyle = particle.color;
this.ctx.fill();
});
// Connect particles if enabled
if (this.options.connectParticles) {
this.connectNearbyParticles();
}
requestAnimationFrame(this.animate.bind(this));
}
connectNearbyParticles() {
const maxDistance = 100;
for (let i = 0; i < this.particles.length; i++) {
for (let j = i + 1; j < this.particles.length; j++) {
const dx = this.particles[i].x - this.particles[j].x;
const dy = this.particles[i].y - this.particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
// Draw line between particles
this.ctx.beginPath();
this.ctx.strokeStyle = this.options.color;
this.ctx.globalAlpha = 1 - (distance / maxDistance);
this.ctx.lineWidth = 1;
this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
this.ctx.stroke();
this.ctx.globalAlpha = 1;
}
}
}
}
}
