Interactive Solar System

Interactive Solar System

Click a planet button to see information.

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; color: #fff; font-family: sans-serif; margin: 0; overflow: hidden; } .container { text-align: center; } h1 { margin-top: 0; } canvas { border: 1px solid #fff; background-color: #000; } .controls { margin-top: 20px; } .controls button { margin: 5px; padding: 8px 15px; cursor: pointer; background-color: #333; color: #fff; border: 1px solid #555; border-radius: 4px; } .controls button:hover { background-color: #555; } .info-box { margin-top: 20px; padding: 15px; border: 1px solid #555; background-color: #222; min-height: 50px; text-align: left; } const canvas = document.getElementById('solarSystemCanvas'); const ctx = canvas.getContext('2d'); const infoBox = document.getElementById('planetInfo'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const sun = { radius: 20, color: 'yellow' }; const planets = [ { name: 'Mercury', radius: 3, orbitRadius: 50, color: '#A9A9A9', speed: 0.02, angle: 0, info: 'Smallest planet, closest to the Sun.' }, { name: 'Venus', radius: 5, orbitRadius: 70, color: '#FFD700', speed: 0.015, angle: 0, info: 'Hottest planet, similar size to Earth.' }, { name: 'Earth', radius: 6, orbitRadius: 100, color: '#0000FF', speed: 0.01, angle: 0, info: 'Our home planet, known for liquid water.' }, { name: 'Mars', radius: 4, orbitRadius: 130, color: '#FF4500', speed: 0.008, angle: 0, info: 'The Red Planet, potential for past life.' }, { name: 'Jupiter', radius: 12, orbitRadius: 180, color: '#FFA07A', speed: 0.004, angle: 0, info: 'Largest planet, gas giant with a Great Red Spot.' }, { name: 'Saturn', radius: 10, orbitRadius: 230, color: '#DAA520', speed: 0.003, angle: 0, info: 'Known for its prominent rings.' }, { name: 'Uranus', radius: 8, orbitRadius: 270, color: '#ADD8E6', speed: 0.002, angle: 0, info: 'Ice giant, rotates on its side.' }, { name: 'Neptune', radius: 8, orbitRadius: 310, color: '#4169E1', speed: 0.0015, angle: 0, info: 'Ice giant, farthest known planet.' } ]; function drawSun() { ctx.beginPath(); ctx.arc(centerX, centerY, sun.radius, 0, Math.PI * 2); ctx.fillStyle = sun.color; ctx.fill(); ctx.closePath(); } function drawPlanet(planet) { // Draw orbit ctx.beginPath(); ctx.arc(centerX, centerY, planet.orbitRadius, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; ctx.stroke(); ctx.closePath(); // Calculate planet position const x = centerX + planet.orbitRadius * Math.cos(planet.angle); const y = centerY + planet.orbitRadius * Math.sin(planet.angle); // Draw planet ctx.beginPath(); ctx.arc(x, y, planet.radius, 0, Math.PI * 2); ctx.fillStyle = planet.color; ctx.fill(); ctx.closePath(); } function update() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw sun drawSun(); // Draw planets and update angles planets.forEach(planet => { drawPlanet(planet); planet.angle += planet.speed; }); // Loop the animation requestAnimationFrame(update); } // Add event listeners to buttons document.querySelectorAll('.controls button').forEach(button => { button.addEventListener('click', () => { const planetName = button.getAttribute('data-planet'); const selectedPlanet = planets.find(p => p.name === planetName); if (selectedPlanet) { infoBox.innerHTML = `

${selectedPlanet.name}

Radius: ${selectedPlanet.radius} units

Orbit Radius: ${selectedPlanet.orbitRadius} units

Info: ${selectedPlanet.info}

`; } }); }); // Start the animation update();