`data/artifacts/0f99d5cfb47a/qwen25-7b.html`

115 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Generative Art</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
            overflow: hidden;
        }
        canvas {
            border: 2px solid black;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        }
        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1em;
            width: 20%;
            max-width: 300px;
            height: 80vh;
            margin-left: 2em;
        }
        label, input, button {
            font-size: 1.2em;
            padding: 0.5em;
            margin: 0.5em;
        }
        #snapshot {
            background-color: #e6e6fa;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #snapshot:hover {
            background-color: #add8e6;
        }
    </style>
</head>
<body>
    <canvas id="artCanvas" width="800" height="400"></canvas>
    <div class="controls">
        <label for="density">Density:</label>
        <input type="range" min="10" max="100" value="50" step="10" id="density">
        <br>
        <label for="palette">Palette:</label>
        <input type="color" id="palette" value="#ff69b4">
        <br>
        <label for="motionSpeed">Motion Speed:</label>
        <input type="range" min="0.1" max="5" step="0.1" value="2" id="motionSpeed">
        <br>
        <button id="snapshot">Export Snapshot</button>
    </div>

    <script>
        const canvas = document.getElementById('artCanvas');
        const ctx = canvas.getContext('2d');

        const density = document.getElementById('density').value;
        const palette = document.getElementById('palette').value;
        const motionSpeed = parseFloat(document.getElementById('motionSpeed').value);

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < density * 10; i++) {
                let x = Math.random() * canvas.width;
                let y = Math.random() * canvas.height;
                ctx.beginPath();
                ctx.arc(x, y, 5, 0, 2 * Math.PI);
                ctx.fillStyle = palette;
                ctx.fill();
            }
        }

        function animate() {
            draw();
            requestAnimationFrame(animate);
        }

        document.getElementById('density').addEventListener('input', (e) => {
            density = e.target.value;
            console.log(`Density: ${density}`);
        });

        document.getElementById('palette').addEventListener('change', (e) => {
            palette = e.target.value;
            console.log(`Palette: ${palette}`);
        });

        document.getElementById('motionSpeed').addEventListener('input', (e) => {
            motionSpeed = e.target.value;
            console.log(`Motion Speed: ${motionSpeed}`);
        });

        document.getElementById('snapshot').addEventListener('click', () => {
            const link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = 'generative-art.png';
            link.click();
            console.log('Snapshot exported');
        });

        animate();

    </script>
</body>
</html>