Spaces:

awacke1
/

OurSolarSystem

Sleeping

App Files Files Community

awacke1 commited on Jan 7

Commit

6e526ed

verified ·

1 Parent(s): 4ba913e

Create app.py

Browse files

Files changed (1) hide show

app.py +307 -0

app.py ADDED Viewed

	@@ -0,0 +1,307 @@

+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)
+""")