<!DOCTYPE html>
<html>
<head>
    <title>Canvas-Bound Interactive Generative Art</title>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="artCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('artCanvas');
        const ctx = canvas.getContext('2d');
        const colors = ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1'];

        function generateNodes(count) {
            let nodes = [];
            for (let i = 0; i < count; i++) {
                nodes.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    vx: (Math.random() - 0.5) * 2,
                    vy: (Math.random() - 0.5) * 2,
                    color: colors[Math.floor(Math.random() * colors.length)]
                });
            }
            return nodes;
        }

        function drawArt(nodes) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            nodes.forEach(node => {
                // Update node position with subtle movement
                node.x += node.vx;
                node.y += node.vy;

                // Boundary check to keep nodes within canvas
                if (node.x < 0 || node.x > canvas.width) node.vx = -node.vx;
                if (node.y < 0 || node.y > canvas.height) node.vy = -node.vy;

                // Draw node
                ctx.fillStyle = node.color;
                ctx.beginPath();
                ctx.arc(node.x, node.y, 5, 0, 2 * Math.PI);
                ctx.fill();

                // Connect nodes with lines
                ctx.strokeStyle = node.color;
                nodes.forEach(otherNode => {
                    ctx.beginPath();
                    ctx.moveTo(node.x, node.y);
                    ctx.lineTo(otherNode.x, otherNode.y);
                    ctx.stroke();
                });
            });
        }

        let nodes = generateNodes(10);

        function animate() {
            drawArt(nodes);
            requestAnimationFrame(animate);
        }

        animate();

        canvas.addEventListener('click', function(event) {
            nodes.push({
                x: event.offsetX,
                y: event.offsetY,
                vx: (Math.random() - 0.5) * 2,
                vy: (Math.random() - 0.5) * 2,
                color: colors[Math.floor(Math.random() * colors.length)]
            });
        });
    </script>
</body>
</html>


Inscription #58866629