Spaces:

broadfield-dev
/

solar_sys

Running

App Files Files Community

broadfield-dev commited on Feb 18

Commit

b79cc65

verified ·

1 Parent(s): f79888b

Update index.html

Browse files

Files changed (1) hide show

index.html +94 -72

index.html CHANGED Viewed

@@ -3,98 +3,120 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Solar System with NEOs</title>
     <style>
-        body { margin: 0; padding: 0; background-color: #000; overflow: hidden; }
-        canvas { display: block; }
     </style>
 </head>
 <body>
-    <canvas id="solarSystemCanvas"></canvas>
     <script>
-        // Setup canvas
-        const canvas = document.getElementById('solarSystemCanvas');
-        const ctx = canvas.getContext('2d');
-        canvas.width = 800;
-        canvas.height = 600;
-        // Sun at the center
-        const sun = {
-            x: canvas.width / 2,
-            y: canvas.height / 2,
-            radius: 20,
-            color: '#ffcc00'
-        };
-        // Planets data (simplified)
-        const planets = [
-            { name: 'Mercury', distance: 50, radius: 3, color: '#999999', speed: 0.01 },
-            { name: 'Venus', distance: 70, radius: 5, color: '#ff9933', speed: 0.008 },
-            { name: 'Earth', distance: 100, radius: 6, color: '#0066ff', speed: 0.006 },
-            { name: 'Mars', distance: 150, radius: 4, color: '#ff3300', speed: 0.004 },
-            { name: 'Jupiter', distance: 220, radius: 12, color: '#ff9933', speed: 0.002 },
-            { name: 'Saturn', distance: 280, radius: 10, color: '#ffcc66', speed: 0.0015 },
-            { name: 'Uranus', distance: 320, radius: 8, color: '#00ccff', speed: 0.001 },
-            { name: 'Neptune', distance: 360, radius: 8, color: '#0066ff', speed: 0.0008 }
-        ];
-        // NEOs data (fictional and simplified)
-        const neos = [
-            { name: 'NEO1', distance: 110, radius: 1, color: '#cccccc', speed: 0.0055 },
-            { name: 'NEO2', distance: 105, radius: 1, color: '#cccccc', speed: 0.0057 },
-            { name: 'NEO3', distance: 120, radius: 1, color: '#cccccc', speed: 0.0059 },
-            { name: 'NEO4', distance: 95, radius: 1, color: '#cccccc', speed: 0.0061 },
-            { name: 'NEO5', distance: 115, radius: 1, color: '#cccccc', speed: 0.0063 },
-            { name: 'NEO6', distance: 100, radius: 1, color: '#cccccc', speed: 0.0065 },
-            { name: 'NEO7', distance: 90, radius: 1, color: '#cccccc', speed: 0.0067 },
-            { name: 'NEO8', distance: 125, radius: 1, color: '#cccccc', speed: 0.0069 },
-            { name: 'NEO9', distance: 130, radius: 1, color: '#cccccc', speed: 0.0071 },
-            { name: 'NEO10', distance: 135, radius: 1, color: '#cccccc', speed: 0.0073 }
         ];
-        let time = 0;
-        function draw() {
-            // Clear canvas
-            ctx.fillStyle = 'black';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            // Draw Sun
-            ctx.beginPath();
-            ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
-            ctx.fillStyle = sun.color;
-            ctx.fill();
-            // Draw Planets
-            planets.forEach(planet => {
-                const angle = time * planet.speed;
-                const x = sun.x + Math.cos(angle) * planet.distance;
-                const y = sun.y + Math.sin(angle) * planet.distance;
-                ctx.beginPath();
-                ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
-                ctx.fillStyle = planet.color;
-                ctx.fill();
             });
-            // Draw NEOs
             neos.forEach(neo => {
-                const angle = time * neo.speed;
-                const x = sun.x + Math.cos(angle) * neo.distance;
-                const y = sun.y + Math.sin(angle) * neo.distance;
-                ctx.beginPath();
-                ctx.arc(x, y, neo.radius, 0, Math.PI * 2);
-                ctx.fillStyle = neo.color;
-                ctx.fill();
             });
-            time += 0.05;
-            requestAnimationFrame(draw);
         }
-        draw();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Solar System with NEOs</title>
     <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { width: 100%; height: 100%; }
     </style>
 </head>
 <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
     <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Orbit controls for camera movement
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        camera.position.set(0, 20, 100);
+        controls.update();
+        // Lights
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const pointLight = new THREE.PointLight(0xffffff);
+        pointLight.position.set(0, 100, 100);
+        scene.add(pointLight);
+        // Sun
+        const sunGeometry = new THREE.SphereGeometry(5, 32, 32);
+        const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
+        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+        scene.add(sun);
+        // Planets
+        const planets = [
+            { name: 'Mercury', distance: 10, scale: 0.2 },
+            { name: 'Venus', distance: 15, scale: 0.4 },
+            { name: 'Earth', distance: 20, scale: 0.5 },
+            { name: 'Mars', distance: 25, scale: 0.3 },
+            { name: 'Jupiter', distance: 35, scale: 2 },
+            { name: 'Saturn', distance: 45, scale: 1.5 },
+            { name: 'Uranus', distance: 55, scale: 1 },
+            { name: 'Neptune', distance: 65, scale: 1 }
         ];
+        planets.forEach(planet => {
+            const geometry = new THREE.SphereGeometry(planet.scale, 32, 32);
+            const material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.x = planet.distance;
+            scene.add(mesh);
+        });
+        // NEOs (fictional for now, will update with real data)
+        let neos = [];
+        for (let i = 0; i < 10; i++) {
+            const geometry = new THREE.SphereGeometry(0.1, 32, 32);
+            const material = new THREE.MeshBasicMaterial({ color: 0xcccccc });
+            const neo = new THREE.Mesh(geometry, material);
+            neo.position.set(Math.random() * 30 - 15, Math.random() * 10 - 5, Math.random() * 30 - 15);
+            scene.add(neo);
+            neos.push(neo);
+        }
+        // Animation
+        function animate() {
+            requestAnimationFrame(animate);
+            planets.forEach((planet, index) => {
+                const planetMesh = scene.children[3 + index];
+                planetMesh.position.x = Math.cos(Date.now() * 0.001 * (index + 1)) * planet.distance;
+                planetMesh.position.z = Math.sin(Date.now() * 0.001 * (index + 1)) * planet.distance;
             });
             neos.forEach(neo => {
+                neo.position.x += Math.sin(Date.now() * 0.001) * 0.1;
+                neo.position.z += Math.cos(Date.now() * 0.001) * 0.1;
             });
+            controls.update();
+            renderer.render(scene, camera);
         }
+        animate();
+        // Fetching NEO data from NASA API
+        function fetchNEOData() {
+            fetch('https://api.nasa.gov/neo/rest/v1/feed?start_date=2025-02-18&end_date=2025-02-19&api_key=DEMO_KEY')
+            .then(response => response.json())
+            .then(data => {
+                // Update NEOs with real data
+                const neoData = data.near_earth_objects['2025-02-18'];
+                if (neoData) {
+                    neos.forEach((neo, index) => {
+                        if (index < neoData.length) {
+                            const obj = neoData[index];
+                            // Note: This is a very simplistic representation. Real trajectory calculation would require more complex physics.
+                            neo.position.set(
+                                obj.close_approach_data[0].miss_distance.astronomical * 100 - 50,
+                                obj.close_approach_data[0].miss_distance.astronomical * 50,
+                                obj.close_approach_data[0].miss_distance.astronomical * 100 - 50
+                            );
+                        }
+                    });
+                }
+            }).catch(error => console.error('Error fetching NEO data:', error));
+        }
+        // Update NEO data periodically
+        fetchNEOData(); // Initial fetch
+        setInterval(fetchNEOData, 3600000); // Update every hour
     </script>
 </body>
 </html>