`data/artifacts/0e969e848172/qwen3-14b.html`

142 lines
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2D Gravity Sandbox</title>
  <style>
    body {
      margin: 0;
      background: #000;
      overflow: hidden;
      font-family: sans-serif;
      color: #fff;
    }
    canvas {
      display: block;
    }
    #controls {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.5);
      padding: 10px;
      border-radius: 5px;
    }
    button {
      margin-right: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="controls">
    <button id="clear">Clear</button>
    <button id="toggleTrail">Toggle Trail</button>
  </div>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;
    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });

    const planets = [];
    const trails = [];
    const trailToggle = document.getElementById('toggleTrail');
    const clearBtn = document.getElementById('clear');
    let showTrails = true;

    trailToggle.addEventListener('click', () => {
      showTrails = !showTrails;
    });

    clearBtn.addEventListener('click', () => {
      planets.length = 0;
      trails.length = 0;
    });

    class Planet {
      constructor(x, y, mass, color) {
        this.x = x;
        this.y = y;
        this.mass = mass;
        this.color = color;
        this.vx = 0;
        this.vy = 0;
        this.trail = [];
      }

      update() {
        let ax = 0;
        let ay = 0;
        for (let other of planets) {
          if (other === this) continue;
          let dx = other.x - this.x;
          let dy = other.y - this.y;
          let distSq = dx * dx + dy * dy;
          let dist = Math.sqrt(distSq);
          let force = (other.mass * this.mass) / (distSq * 10000);
          ax += (dx / dist) * force;
          ay += (dy / dist) * force;
        }
        this.vx += ax * 0.1;
        this.vy += ay * 0.1;
        this.x += this.vx;
        this.y += this.vy;
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, Math.sqrt(this.mass) * 2, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }

      drawTrail() {
        if (!showTrails) return;
        ctx.beginPath();
        ctx.moveTo(this.trail[0].x, this.trail[0].y);
        for (let i = 1; i < this.trail.length; i++) {
          ctx.lineTo(this.trail[i].x, this.trail[i].y);
        }
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.closePath();
      }

      addTrailPoint() {
        this.trail.push({ x: this.x, y: this.y });
        if (this.trail.length > 50) this.trail.shift();
      }
    }

    canvas.addEventListener('click', (e) => {
      const x = e.clientX;
      const y = e.clientY;
      const mass = 1000 + Math.random() * 5000;
      const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      planets.push(new Planet(x, y, mass, color));
    });

    function animate() {
      ctx.clearRect(0, 0, width, height);
      for (let planet of planets) {
        planet.update();
        planet.addTrailPoint();
        planet.draw();
        planet.drawTrail();
      }
      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>