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

101 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D Gravity Sandbox</title>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; }
        canvas { border: 1px solid #fff; pointer-events: none; }
        .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }
    </style>
</head>
<body>
<canvas id="gravityCanvas" width="800" height="600"></canvas>
<div class="controls">
    <button onclick="clearPlanets()">Clear Planets</button>
    <label><input type="checkbox" onchange="toggleTrails()" checked> Show Trails</label>
</div>
<script>
const canvas = document.getElementById('gravityCanvas');
const ctx = canvas.getContext('2d');

let planets = [];
let trails = [];

function Planet(x, y, mass) {
    this.x = x;
    this.y = y;
    this.mass = mass;
    this.vx = 0;
    this.vy = 0;
}

Planet.prototype.update = function() {
    for (let i = 0; i < planets.length; i++) {
        if (this !== planets[i]) {
            const dx = this.x - planets[i].x;
            const dy = this.y - planets[i].y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            const force = (this.mass * planets[i].mass) / (dist * dist);
            const ax = (dx / dist) * (force / this.mass);
            const ay = (dy / dist) * (force / this.mass);

            this.vx += ax;
            this.vy += ay;

            if (trails.length > 0 && trails[trails.length - 1].x === this.x && trails[trails.length - 1].y === this.y) {
                trails.pop();
            }
            trails.push({ x: this.x, y: this.y });
        }
    }

    this.x += this.vx;
    this.y += this.vy;

    if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
        planets.splice(planets.indexOf(this), 1);
        trails = [];
    }
};

function clearPlanets() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    planets = [];
    trails = [];
}

function toggleTrails() {
    trails = trails.length ? [] : [...trails];
}

canvas.addEventListener('click', e => {
    const x = Math.max(0, Math.min(canvas.width - 1, (e.clientX - canvas.getBoundingClientRect().left) / canvas.width * canvas.width));
    const y = Math.max(0, Math.min(canvas.height - 1, (e.clientY - canvas.getBoundingClientRect().top) / canvas.height * canvas.height));
    planets.push(new Planet(x, y, e.button + 1));
});

setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < planets.length; i++) {
        const planet = planets[i];
        ctx.beginPath();
        ctx.arc(planet.x, planet.y, 5 * Math.sqrt(planet.mass), 0, 2 * Math.PI);
        ctx.fillStyle = `hsl(${i * 360 / planets.length}, 100%, 50%)`;
        ctx.fill();

        if (trails.length) {
            const trail = trails[trails.length - 1];
            ctx.beginPath();
            ctx.moveTo(trail.x, trail.y);
            ctx.lineTo(planet.x, planet.y);
            ctx.strokeStyle = `hsla(${i * 360 / planets.length}, 100%, 50%, 0.2)`;
            ctx.stroke();
        }

        planet.update();
    }
}, 16);
</script>
</body>
</html>