Spaces:

eaglelandsonce
/

AIstronauts_Launch_System

Running

App Files Files Community

eaglelandsonce commited on Feb 9

Commit

e4cc7ca

verified ·

1 Parent(s): 36db671

Update index.html

Browse files

Files changed (1) hide show

index.html +70 -63

index.html CHANGED Viewed

@@ -3,88 +3,95 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rocket Orbiting Earth</title>
     <style>
-        body { margin: 0; overflow: hidden; background-color: black; }
         canvas { display: block; }
     </style>
 </head>
 <body>
-    <!-- Load Three.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
-    <!-- Load OrbitControls -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/examples/js/controls/OrbitControls.js"></script>
     <script>
-        console.log("🚀 Initializing Three.js Rocket Orbit Simulation");
-        // ✅ 1. Scene, Camera, and Renderer
-        const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
-        const renderer = new THREE.WebGLRenderer();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        document.body.appendChild(renderer.domElement);
-        // ✅ 2. Add OrbitControls (for camera movement)
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.05;
-        controls.minDistance = 20;
-        controls.maxDistance = 200;
-        // ✅ 3. Create Earth (Blue Sphere)
-        const earthGeometry = new THREE.SphereGeometry(10, 32, 32);
-        const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2233ff });
-        const earth = new THREE.Mesh(earthGeometry, earthMaterial);
-        scene.add(earth);
-        // ✅ 4. Create Rocket (Red Sphere)
-        const rocketGeometry = new THREE.SphereGeometry(1, 16, 16);
-        const rocketMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
-        const rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);
-        scene.add(rocket);
-        // ✅ 5. Lighting (Improved for Better Visibility)
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-        scene.add(ambientLight);
-        const pointLight = new THREE.PointLight(0xffffff, 1.5, 100);
-        pointLight.position.set(30, 30, 30);
-        scene.add(pointLight);
-        // ✅ 6. Camera Position
-        camera.position.set(0, 30, 50);
-        camera.lookAt(earth.position);
-        // ✅ 7. Orbit Parameters
-        const orbitRadius = 25; // Distance from Earth
-        const orbitSpeed = 0.01; // Speed of orbit
-        let angle = 0; // Angle of orbit
-        // ✅ 8. Animation Loop
-        function animate() {
-            requestAnimationFrame(animate);
-            // Update Rocket Position (Circular Orbit)
-            angle += orbitSpeed;
-            rocket.position.x = orbitRadius * Math.cos(angle);
-            rocket.position.z = orbitRadius * Math.sin(angle);
-            rocket.position.y = 5 * Math.sin(angle * 0.5); // Small vertical oscillation
-            controls.update();
-            renderer.render(scene, camera);
         }
         animate(); // Start animation
-        // ✅ 9. Window Resize Handling
-        window.addEventListener("resize", () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-        console.log("✅ Simulation Running Successfully");
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2D Rocket Launch and Orbit Simulation</title>
     <style>
+        body { margin: 0; background-color: black; overflow: hidden; }
         canvas { display: block; }
     </style>
 </head>
 <body>
+    <canvas id="canvas"></canvas>
     <script>
+        // Get canvas and context
+        const canvas = document.getElementById("canvas");
+        const ctx = canvas.getContext("2d");
+        // Set canvas size
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        // Define Earth
+        const earth = {
+            x: canvas.width / 2,
+            y: canvas.height - 100,
+            radius: 50
+        };
+        // Define Rocket
+        let rocket = {
+            x: earth.x,
+            y: earth.y - earth.radius - 10, // Start above Earth
+            radius: 5,
+            velocityY: 0,
+            velocityX: 0,
+            isLaunching: false,
+            inOrbit: false,
+            orbitAngle: 0
+        };
+        // Launch Parameters
+        const launchSpeed = -2.5;  // Initial launch speed
+        const gravity = 0.05;      // Simulated gravity pulling rocket down
+        const orbitSpeed = 0.02;   // Speed in orbit
+        // Listen for spacebar press to launch
+        document.addEventListener("keydown", (event) => {
+            if (event.code === "Space" && !rocket.isLaunching && !rocket.inOrbit) {
+                rocket.isLaunching = true;
+                rocket.velocityY = launchSpeed;
+            }
+        });
+        // Animation loop
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw Earth
+            ctx.fillStyle = "blue";
+            ctx.beginPath();
+            ctx.arc(earth.x, earth.y, earth.radius, 0, Math.PI * 2);
+            ctx.fill();
+            // Rocket Launching Phase
+            if (rocket.isLaunching && !rocket.inOrbit) {
+                rocket.y += rocket.velocityY;
+                rocket.velocityY += gravity; // Simulate gravity
+                // Check if rocket reaches orbit height
+                if (rocket.y < earth.y - 150) {
+                    rocket.isLaunching = false;
+                    rocket.inOrbit = true;
+                    rocket.orbitAngle = 0; // Reset angle for orbit
+                }
+            }
+            // Orbit Phase
+            else if (rocket.inOrbit) {
+                rocket.orbitAngle += orbitSpeed;
+                rocket.x = earth.x + 150 * Math.cos(rocket.orbitAngle);
+                rocket.y = earth.y - 150 * Math.sin(rocket.orbitAngle);
+            }
+            // Draw Rocket
+            ctx.fillStyle = "red";
+            ctx.beginPath();
+            ctx.arc(rocket.x, rocket.y, rocket.radius, 0, Math.PI * 2);
+            ctx.fill();
+            requestAnimationFrame(animate);
         }
         animate(); // Start animation
     </script>
 </body>
 </html>