import streamlit as st
import streamlit.components.v1 as components
# Configure the page
st.set_page_config(
page_title="Solar System Visualization",
layout="wide",
initial_sidebar_state="collapsed"
)
# Title
st.title("Interactive Solar System Visualization 🌌")
# HTML/JavaScript content
SOLAR_SYSTEM_HTML = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Solar System</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; width: 100% !important; height: 1024px !important; }
#crawl-container {
position: absolute;
width: 100%;
height: 1024px;
overflow: hidden;
perspective: 400px;
font-family: Arial, sans-serif;
}
#crawl {
position: absolute;
top: 100%;
left: 50%;
width: 70%;
transform: translateX(-50%) rotateX(25deg);
font-size: 24px;
text-align: justify;
color: #feda4a;
}
.planet-info {
margin-bottom: 2em;
}
</style>
</head>
<body>
<div id="crawl-container">
<div id="crawl">
<h1>Our Amazing Solar System 🌌</h1>
<div class="planet-info">
<h2>The Sun ☀️</h2>
<p>Our star, a G-type main-sequence star (G2V), located at the center of our solar system:
- Age: 4.6 billion years
- Surface Temperature: 5,500°C (10,000°F)
- Diameter: 1.4 million km (865,000 miles)
- Mass: 333,000x Earth's mass</p>
</div>
<div class="planet-info">
<h2>Mercury 🪐</h2>
<p>The smallest and innermost planet:
- Distance from Sun: 57.9 million km
- Length of year: 88 Earth days
- Surface temperature: -180°C to 430°C
- No moons</p>
</div>
<div class="planet-info">
<h2>Venus 🌟</h2>
<p>Earth's "sister planet":
- Distance from Sun: 108.2 million km
- Length of year: 225 Earth days
- Surface temperature: 462°C
- Rotates backwards compared to most planets</p>
</div>
<div class="planet-info">
<h2>Earth 🌍</h2>
<p>Our home planet:
- Distance from Sun: 149.6 million km
- Length of year: 365.25 days
- Only known planet with life
- One moon: Luna 🌕</p>
</div>
<div class="planet-info">
<h2>Mars 🔴</h2>
<p>The Red Planet:
- Distance from Sun: 227.9 million km
- Length of year: 687 Earth days
- Two moons: Phobos and Deimos
- Home to largest volcano in solar system</p>
</div>
<div class="planet-info">
<h2>Jupiter ⭐</h2>
<p>The largest planet:
- Distance from Sun: 778.5 million km
- Length of year: 11.9 Earth years
- 79 known moons
- Great Red Spot is a giant storm</p>
</div>
<div class="planet-info">
<h2>Saturn 💫</h2>
<p>The ringed planet:
- Distance from Sun: 1.4 billion km
- Length of year: 29.5 Earth years
- 82 confirmed moons
- Spectacular ring system</p>
</div>
<div class="planet-info">
<h2>Uranus ❄️</h2>
<p>The tilted planet:
- Distance from Sun: 2.9 billion km
- Length of year: 84 Earth years
- 27 known moons
- Rotates on its side</p>
</div>
<div class="planet-info">
<h2>Neptune 💨</h2>
<p>The windiest planet:
- Distance from Sun: 4.5 billion km
- Length of year: 165 Earth years
- 14 known moons
- Strongest winds in the solar system</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, 1024);
document.body.appendChild(renderer.domElement);
// Function to create a celestial body
function createCelestialBody(radius, color, x, y, z) {
const geometry = new THREE.SphereGeometry(radius, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: color });
const body = new THREE.Mesh(geometry, material);
body.position.set(x, y, z);
return body;
}
// Create the Sun and planets (not to scale to fit visualization)
const sun = createCelestialBody(3, 0xffff00, 0, 0, 0);
const mercury = createCelestialBody(0.4, 0xa0522d, 4, 0, 0);
const venus = createCelestialBody(0.6, 0xdeb887, 6, 0, 0);
const earth = createCelestialBody(0.6, 0x4169e1, 8, 0, 0);
const moon = createCelestialBody(0.2, 0x808080, 8.8, 0, 0);
const mars = createCelestialBody(0.5, 0xff4500, 10, 0, 0);
const jupiter = createCelestialBody(1.2, 0xffa500, 13, 0, 0);
const saturn = createCelestialBody(1.0, 0xf0e68c, 16, 0, 0);
const uranus = createCelestialBody(0.8, 0x87ceeb, 19, 0, 0);
const neptune = createCelestialBody(0.8, 0x4169e1, 22, 0, 0);
// Add planets to the scene
scene.add(sun);
scene.add(mercury);
scene.add(venus);
scene.add(earth);
scene.add(moon);
scene.add(mars);
scene.add(jupiter);
scene.add(saturn);
scene.add(uranus);
scene.add(neptune);
// Create starfield
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
color: 0xFFFFFF,
size: 0.1,
transparent: true
});
const starVertices = [];
for (let i = 0; i < 10000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = (Math.random() - 0.5) * 2000;
starVertices.push(x, y, z);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
// Add lighting
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const sunLight = new THREE.PointLight(0xffffff, 1, 100);
sunLight.position.set(0, 0, 0);
scene.add(sunLight);
camera.position.z = 30;
// Animation function
function animate() {
requestAnimationFrame(animate);
// Rotate celestial bodies
sun.rotation.y += 0.001;
mercury.rotation.y += 0.02;
venus.rotation.y += 0.015;
earth.rotation.y += 0.01;
moon.rotation.y += 0.01;
mars.rotation.y += 0.008;
jupiter.rotation.y += 0.004;
saturn.rotation.y += 0.003;
uranus.rotation.y += 0.002;
neptune.rotation.y += 0.001;
// Orbit planets
const time = Date.now() * 0.001;
mercury.position.x = Math.cos(time * 0.5) * 4;
mercury.position.z = Math.sin(time * 0.5) * 4;
venus.position.x = Math.cos(time * 0.4) * 6;
venus.position.z = Math.sin(time * 0.4) * 6;
earth.position.x = Math.cos(time * 0.3) * 8;
earth.position.z = Math.sin(time * 0.3) * 8;
// Moon orbits Earth
moon.position.x = earth.position.x + Math.cos(time * 2) * 0.8;
moon.position.z = earth.position.z + Math.sin(time * 2) * 0.8;
mars.position.x = Math.cos(time * 0.25) * 10;
mars.position.z = Math.sin(time * 0.25) * 10;
jupiter.position.x = Math.cos(time * 0.2) * 13;
jupiter.position.z = Math.sin(time * 0.2) * 13;
saturn.position.x = Math.cos(time * 0.15) * 16;
saturn.position.z = Math.sin(time * 0.15) * 16;
uranus.position.x = Math.cos(time * 0.1) * 19;
uranus.position.z = Math.sin(time * 0.1) * 19;
neptune.position.x = Math.cos(time * 0.08) * 22;
neptune.position.z = Math.sin(time * 0.08) * 22;
// Rotate the starfield
stars.rotation.y += 0.0002;
renderer.render(scene, camera);
}
animate();
// Handle window resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, 1024);
});
// Animate the text crawl
const crawl = document.getElementById('crawl');
let crawlPosition = 100;
function animateCrawl() {
crawlPosition -= 0.02;
crawl.style.top = crawlPosition + '%';
if (crawlPosition > -400) {
requestAnimationFrame(animateCrawl);
}
}
animateCrawl();
</script>
</body>
</html>
"""
# Add description
st.markdown("""
This visualization shows our solar system with the Sun, all eight planets, and Earth's moon.
The visualization includes:
- Rotating planets and moons
- Orbital movements
- Detailed information about each celestial body
- A starfield background
Note: The sizes and distances are not to scale to make the visualization more accessible.
""")
# Display the visualization using a custom component
components.html(SOLAR_SYSTEM_HTML, height=1024, scrolling=False)
# Add footer with data sources
st.markdown("""
---
Data sources:
- NASA Solar System Exploration
- European Space Agency (ESA)
- International Astronomical Union (IAU)
""")