Spaces:

broadfield-dev
/

solar_sys

Running

App Files Files Community

broadfield-dev commited on Feb 18

Commit

5a59d0c

verified ·

1 Parent(s): 32d34db

Update index.html

Browse files

Files changed (1) hide show

index.html +125 -98

index.html CHANGED Viewed

@@ -3,122 +3,149 @@
 <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 with more realistic orbital speeds
-        const planets = [
-            { name: 'Mercury', distance: 10, scale: 0.2, speed: 0.00582 }, // Fastest orbit
-            { name: 'Venus', distance: 15, scale: 0.4, speed: 0.00224 },
-            { name: 'Earth', distance: 20, scale: 0.5, speed: 0.00199 },
-            { name: 'Mars', distance: 25, scale: 0.3, speed: 0.00106 },
-            { name: 'Jupiter', distance: 35, scale: 2, speed: 0.00028 },
-            { name: 'Saturn', distance: 45, scale: 1.5, speed: 0.00013 },
-            { name: 'Uranus', distance: 55, scale: 1, speed: 0.00006 },
-            { name: 'Neptune', distance: 65, scale: 1, speed: 0.00004 } // Slowest orbit
-        ];
-        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 with real-time movement
-        let time = 0;
-        function animate() {
-            requestAnimationFrame(animate);
-            time += 0.05; // Adjust this value for speed of animation
-            planets.forEach((planet, index) => {
-                const planetMesh = scene.children[3 + index];
-                const angle = time * planet.speed; // Use speed to set individual movement speeds
-                planetMesh.position.x = Math.cos(angle) * planet.distance;
-                planetMesh.position.z = Math.sin(angle) * planet.distance;
-            });
-            neos.forEach(neo => {
-                neo.position.x += Math.sin(time * 0.001) * 0.1;
-                neo.position.z += Math.cos(time * 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 => {
-                const neoData = data.near_earth_objects['2025-02-18'];
-                if (neoData) {
-                    neos.forEach((neo, index) => {
-                        if (index < neoData.length) {
-                            const obj = neoData[index];
-                            // Simplified NEO positioning based on miss distance
-                            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));
         }
-        fetchNEOData(); // Initial fetch
-        setInterval(fetchNEOData, 3600000); // Update every hour
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balls in Rotating Hexagon</title>
     <style>
+        canvas {
+            border: 1px solid black;
+            display: block;
+            margin: auto;
+        }
     </style>
 </head>
 <body>
+    <canvas id="myCanvas" width="800" height="600"></canvas>
     <script>
+        const canvas = document.getElementById('myCanvas');
+        const ctx = canvas.getContext('2d');
+        // Ball class
+        class Ball {
+            constructor(x, y, radius, color) {
+                this.x = x;
+                this.y = y;
+                this.radius = radius;
+                this.color = color;
+                this.vx = Math.random() * 2 - 1;
+                this.vy = Math.random() * 2 - 1;
+            }
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
+                ctx.fillStyle = this.color;
+                ctx.fill();
+                ctx.closePath();
+            }
+            move() {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vy += 0.05; // gravity
+            }
+            collideWithWall(hexagon) {
+                const vertices = hexagon.vertices;
+                for (let i = 0; i < vertices.length; i++) {
+                    const p1 = vertices[i];
+                    const p2 = vertices[(i + 1) % vertices.length];
+                    if (this.lineCircle(p1.x, p1.y, p2.x, p2.y, this.x, this.y, this.radius)) {
+                        const normal = {x: p2.y - p1.y, y: p1.x - p2.x};
+                        const distance = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
+                        normal.x /= distance;
+                        normal.y /= distance;
+                        const dotProduct = this.vx * normal.x + this.vy * normal.y;
+                        this.vx -= 2 * dotProduct * normal.x;
+                        this.vy -= 2 * dotProduct * normal.y;
+                        // Move the ball outside the wall to avoid sticking
+                        this.x += this.vx;
+                        this.y += this.vy;
+                        return;
+                    }
+                }
+            }
+            lineCircle(x1, y1, x2, y2, cx, cy, r) {
+                const lineLength = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+                const dot = (((cx - x1) * (x2 - x1)) + ((cy - y1) * (y2 - y1))) / Math.pow(lineLength, 2);
+                const closestX = x1 + (dot * (x2 - x1));
+                const closestY = y1 + (dot * (y2 - y1));
+                if (this.distance(closestX, closestY, x1, y1) > lineLength || this.distance(closestX, closestY, x2, y2) > lineLength) {
+                    return false;
+                }
+                const distance = this.distance(closestX, closestY, cx, cy);
+                return distance <= r;
+            }
+            distance(x1, y1, x2, y2) {
+                return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+            }
         }
+        // Hexagon class
+        class Hexagon {
+            constructor(centerX, centerY, radius) {
+                this.centerX = centerX;
+                this.centerY = centerY;
+                this.radius = radius;
+                this.rotation = 0;
+                this.vertices = this.calculateVertices();
+            }
+            calculateVertices() {
+                const vertices = [];
+                for (let i = 0; i < 6; i++) {
+                    const angle = Math.PI / 3 * i + this.rotation;
+                    vertices.push({
+                        x: this.centerX + this.radius * Math.cos(angle),
+                        y: this.centerY + this.radius * Math.sin(angle)
                     });
                 }
+                return vertices;
+            }
+            draw() {
+                ctx.beginPath();
+                for (let vertex of this.vertices) {
+                    ctx.lineTo(vertex.x, vertex.y);
+                }
+                ctx.closePath();
+                ctx.strokeStyle = "black";
+                ctx.stroke();
+            }
+            update() {
+                this.rotation += 0.01;
+                this.vertices = this.calculateVertices();
+            }
+        }
+        const hexagon = new Hexagon(canvas.width / 2, canvas.height / 2, 200);
+        const balls = [];
+        const colors = ["red", "blue", "green", "yellow", "purple", "orange", "pink", "brown", "cyan", "magenta"];
+        for (let i = 0; i < 10; i++) {
+            const x = canvas.width / 2 + Math.random() * 100 - 50;
+            const y = canvas.height / 2 + Math.random() * 100 - 50;
+            balls.push(new Ball(x, y, 10, colors[i]));
         }
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            hexagon.update();
+            hexagon.draw();
+            for (let ball of balls) {
+                ball.move();
+                ball.collideWithWall(hexagon);
+                ball.draw();
+            }
+            requestAnimationFrame(animate);
+        }
+        animate();
     </script>
 </body>
 </html>