if (distance < 100) { // Threshold for connection visibility
    ctx.beginPath();
    ctx.moveTo(nodes[i].x, nodes[i].y);
    ctx.lineTo(nodes[j].x, nodes[j].y);
    ctx.strokeStyle = `hsla(${nodes[i].hue}, 80%, 50%, ${distance / 100})`;
    ctx.stroke();
}
        }
        
        // Update and render
        function update() {
            for (const node of nodes) {
                node.x += node.vx;
                node.y += node.vy;
                
                if (node.x < 0 || node.x > canvas.width) {
                    node.vx *= -1;
                }
                if (node.y < 0 || node.y > canvas.height) {
                    node.vy *= -1;
                }
            }
            
            ctx.fillStyle = `hsla(${Math.random() * 360}, 80%, 50%, ${nodes[Math.floor(Math.random() * nodes.length)].uncertainty})`;
            for (const node of nodes) {
                ctx.beginPath();
                ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
                ctx.fill();
            }
            
            drawConnections();
        }

        function loop() {
            update();
            requestAnimationFrame(loop);
        }

        loop();
    </script>
</body>
</html>

This code creates a