`data/artifacts/15f8755f21c5/gemma3-12b.html`

85 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starfield Warp</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: black; }
        #canvasContainer { width: 100vw; height: 100vh; position: relative; }
        #controls { position: absolute; top: 20px; left: 20px; color: white; font-family: sans-serif; }
    </style>
</head>
<body>

<div id="canvasContainer">
    <canvas id="starfieldCanvas"></canvas>
    <div id="controls">
        Speed: <input type="range" id="speedSlider" min="1" max="10" value="5" step="0.1">
    </div>
</div>

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

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let stars = [];
    let warpDirectionX = 0;
    let warpDirectionY = 0;
    let speed = 5;

    function init() {
        for (let i = 0; i < 200; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                z: Math.random() * canvas.width
            });
        }
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < stars.length; i++) {
            const star = stars[i];
            const x = star.x + warpDirectionX * speed * star.z / canvas.width;
            const y = star.y + warpDirectionY * speed * star.z / canvas.height;

            ctx.beginPath();
            ctx.arc(x, y, 1, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
        }

        requestAnimationFrame(draw);
    }

    canvas.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        warpDirectionX = (mouseX - canvas.width / 2) / canvas.width * 0.5;
        warpDirectionY = (mouseY - canvas.height / 2) / canvas.height * 0.5;
    });

    speedSlider.addEventListener('input', () => {
        speed = parseFloat(speedSlider.value);
    });


    init();
    draw();

    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      init(); //Reinitialize stars on resize
    });
</script>

</body>
</html>