`data/artifacts/08d1c975f6db/gemma3-12b.html`

110 lines
<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Balls</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { background-color: #eee; display: block; }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

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

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

    let balls = [];
    let gravity = 0.5;

    function init() {
      for (let i = 0; i < 20; i++) {
        balls.push({
          x: Math.random() * width,
          y: Math.random() * height,
          radius: Math.random() * 10 + 5,
          vx: (Math.random() - 0.5) * 4,
          vy: (Math.random() - 0.5) * 4,
          color: `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.8)`
        });
      }

      const gravitySlider = document.createElement('input');
      gravitySlider.type = 'range';
      gravitySlider.min = 0;
      gravitySlider.max = 10;
      gravitySlider.value = 0.5;
      gravitySlider.onchange = function() {
          gravity = parseFloat(this.value);
      };

      document.body.appendChild(gravitySlider);
    }


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

      for (let i = 0; i < balls.length; i++) {
        const ball = balls[i];

        // Update position
        ball.y += ball.vy;
        ball.x += ball.vx;

        // Bounce off walls
        if (ball.x + ball.radius > width || ball.x - ball.radius < 0) {
          ball.vx = -ball.vx;
        }
        if (ball.y + ball.radius > height || ball.y - ball.radius < 0) {
          ball.vy = -ball.vy;
        }

        // Apply gravity
        ball.vy += gravity;

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


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

      }
    }

    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    }

    init();

    let animationFrameId;

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


    resize();
    window.addEventListener('resize', resize);
    animate();

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