const dx = particles[j].x - particles[i].x;
                const dy = particles[j].y - particles[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < 300) {
                    particles[i].connection.push({ particle: particles[j], distance });
                    particles[j].connection.push({ particle: particles[i], distance });
                }
            }
        }

        function drawWeb() {
            ctx.beginPath();
            for (let i = 0; i < particles.length; i++) {
                const p = particles[i];
                ctx.moveTo(p.x, p.y);
                for (const c of p.connection) {
                    ctx.lineTo(c.particle.x, c.particle.y);
                }
            }
            ctx.strokeStyle = 'rgba(255, 204, 102, 0.7)';
            ctx.lineWidth = 3;
            ctx.stroke();
        }

        function drawSelf() {
            ctx.beginPath();
            ctx.arc(centerX, centerY, 60, 0, Math.PI * 2);
            ctx.fillStyle = `hsl(${particles[0].hue}, 100%, 50%)`;
            ctx.fill();
        }

        function animateParticles() {
            for (const p of particles) {
                p.x += p.vx;
                p.y += p.vy;

                // Simple damping and attraction simulation
                const