`data/artifacts/15f8755f21c5/qwen25-7b.html`

62 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 Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="starfield" width="800" height="600"></canvas>
    <input type="range" id="speedSlider" min="1" max="50" value="20" style="width:300px">

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

        let stars = [];
        for (let i = 0; i < 500; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height
            });
        }

        function drawStars() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const mouseX = (canvas.width / window.innerWidth) * event.clientX;
            const mouseY = (canvas.height / window.innerHeight) * event.clientY;

            stars.forEach((star, index) => {
                const angle = Math.atan2(star.y - mouseY, star.x - mouseX);
                const speed = 1 + (speedSlider.value / 50);
                star.x += Math.cos(angle) * speed;
                star.y += Math.sin(angle) * speed;

                if (star.x < 0 || star.x > canvas.width || star.y < 0 || star.y > canvas.height) {
                    stars[index] = { x: Math.random() * canvas.width, y: Math.random() * canvas.height };
                }

                ctx.fillStyle = `hsl(${360 / stars.length * index + mouseX * 2}, 100%, 50%)`;
                ctx.beginPath();
                ctx.arc(star.x, star.y, 2, 0, Math.PI * 2);
                ctx.fill();
            });
        }

        canvas.addEventListener('mousemove', drawStars);

        setInterval(drawStars, 30);
    </script>
</body>
</html>