`data/artifacts/2ca024f41f3c/gemma3-12b.html`

119 lines
<!DOCTYPE html>
<html>
<head>
<title>Solar System Orrery</title>
<style>
body { margin: 0; overflow: hidden; background-color: black; }
#controls { position: absolute; top: 10px; left: 10px; color: white; font-family: sans-serif; }
canvas { display: block; }
</style>
</head>
<body>

<div id="controls">
  Speed: <input type="range" id="speedSlider" min="0.1" max="5" value="1" step="0.1"><br>
  <button id="pauseButton">Pause</button>
</div>

<canvas id="solarCanvas"></canvas>

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

// Orbital data (approximate)
const planets = [
  { name: 'Mercury', radius: 5, orbitRadius: 10, orbitalSpeed: 3 },
  { name: 'Venus', radius: 8, orbitRadius: 25, orbitalSpeed: 2.5 },
  { name: 'Earth', radius: 10, orbitRadius: 40, orbitalSpeed: 2 },
  { name: 'Mars', radius: 7, orbitRadius: 60, orbitalSpeed: 1.5 },
  { name: 'Jupiter', radius: 18, orbitRadius: 100, orbitalSpeed: 1 },
  { name: 'Saturn', radius: 15, orbitRadius: 140, orbitalSpeed: 0.9 },
  { name: 'Uranus', radius: 12, orbitRadius: 180, orbitalSpeed: 0.8 },
  { name: 'Neptune', radius: 11, orbitRadius: 220, orbitalSpeed: 0.7 }
];

let paused = false;
let timeScale = 1; // Speed slider value
let angle = 0;

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


function drawOrbit(planet) {
  ctx.beginPath();
  ctx.arc(0, 0, planet.orbitRadius, 0, 2 * Math.PI);
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.lineWidth = 1;
  ctx.stroke();
}

function drawPlanet(planet) {
    const x = planet.orbitRadius * Math.cos(planet.angle);
    const y = planet.orbitRadius * Math.sin(planet.angle);

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


function update() {
  if (paused) return;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

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

    planet.angle += planet.orbitalSpeed * timeScale * 0.01; // Adjust speed based on timescale

    drawOrbit(planet);
    drawPlanet(planet);
  }
}


function draw() {
  requestAnimationFrame(draw);
  update();
}


canvas.addEventListener('mouseover', (event) => {
  const x = event.offsetX;
  const y = event.offsetY;

  for (let i = 0; i < planets.length; i++) {
    const planet = planets[i];
    const distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    const angleToPlanet = Math.atan2(y, x);

    if (distance <= planet.radius && Math.abs(angleToPlanet - planet.angle) < 0.1) {
      alert(`Planet: ${planet.name}`);
      return; // Only show one alert at a time. Prevents multiple alerts on hover.
    }
  }
});

document.getElementById('speedSlider').addEventListener('input', (event) => {
  timeScale = parseFloat(event.target.value);
});


document.getElementById('pauseButton').addEventListener('click', () => {
  paused = !paused;
  if (paused) {
    document.getElementById('pauseButton').textContent = 'Resume';
  } else {
    document.getElementById('pauseButton').textContent = 'Pause';
  }
});

draw();
</script>

</body>
</html>