articles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height)); } } // Handle mouse interactions canvas.addEventListener('mousemove', function(e) { particles.push(new Particle(e.x, e.y)); if (particles.length > 200) { particles.shift(); } }); // Animation loop function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } requestAnimationFrame(animate); } initParticles(); animate(); , canvas.height/4); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); break; case 4: ctx.beginPath(); ctx.moveTo(canvas.width/4, canvas.height/4); ctx.lineTo(canvas.width/4*3, canvas.height/4*3); ctx.lineTo(canvas.width/4*3, canvas.height/4); ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = color; ctx.stroke(); break; case 5: ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'difference'; ctx.fillStyle = color; ctx.fillRect(0, 0, canvas.width, canvas.height); break; } document.body.appendChild(canvas); } } } generateImage();