Update static/script.js

static/script.js

@@ -5,10 +5,11 @@ let fluidParticles = [];
 let simulationRunning = false;
 
 const PARTICLE_COUNT = 5000;
-const SPACE_SIZE = 20;
+const SPACE_SIZE = 40; // Increased space size for solar system scale
 const FLUID_SPEED = 0.1;
-const FRICTION_FACTOR = 0.9;
-const GRAVITY_CONSTANT = 0.1;
+let FLUID_FRICTION = 0.9; // Adjustable friction
+let FLUID_DEFLECTION = 0.1; // Adjustable deflection
+const GRAVITY_CONSTANT = 0.1; // Scaled gravitational constant
 
 init();
 animate();
@@ -17,7 +18,7 @@ function init() {
     // Scene setup
     scene = new THREE.Scene();
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    camera.position.set(0, 10, 20);
+    camera.position.set(0, 20, 40);
 
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(window.innerWidth - 300, window.innerHeight);
@@ -27,30 +28,40 @@ function init() {
     controls.enableDamping = true;
     controls.dampingFactor = 0.05;
 
-    // Add spheres
-    const brownGeometry = new THREE.SphereGeometry(0.5, 32, 32);
-    const brownMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
-    const brownSphere = new THREE.Mesh(brownGeometry, brownMaterial);
-    brownSphere.position.set(0, 0, 0);
-    brownSphere.userData = { mass: 92 };
-    scene.add(brownSphere);
-    spheres.push(brownSphere);
-
-    const greenGeometry = new THREE.SphereGeometry(0.4, 32, 32);
-    const greenMaterial = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
-    const greenSphere = new THREE.Mesh(greenGeometry, greenMaterial);
-    greenSphere.position.set(5, 0, 5);
-    greenSphere.userData = { mass: 29 };
-    scene.add(greenSphere);
-    spheres.push(greenSphere);
-
-    const redGeometry = new THREE.SphereGeometry(0.3, 32, 32);
-    const redMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
-    const redSphere = new THREE.Mesh(redGeometry, redMaterial);
-    redSphere.position.set(-5, 0, -5);
-    redSphere.userData = { mass: 10 };
-    scene.add(redSphere);
-    spheres.push(redSphere);
+    // Add Sun
+    const sunGeometry = new THREE.SphereGeometry(1, 32, 32);
+    const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
+    const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+    sun.position.set(0, 0, 0);
+    sun.userData = { mass: 1.989e4, velocity: new THREE.Vector3(0, 0, 0) };
+    scene.add(sun);
+    spheres.push(sun);
+
+    // Add Earth
+    const earthGeometry = new THREE.SphereGeometry(0.3, 32, 32);
+    const earthMaterial = new THREE.MeshBasicMaterial({ color: 0x0000FF });
+    const earth = new THREE.Mesh(earthGeometry, earthMaterial);
+    earth.position.set(10, 0, 0);
+    earth.userData = { 
+        mass: 5.972e-2, 
+        velocity: new THREE.Vector3(0, 0, 0.0298), // Initial orbital velocity in Z direction
+        centripetalScale: 1 
+    };
+    scene.add(earth);
+    spheres.push(earth);
+
+    // Add Mars
+    const marsGeometry = new THREE.SphereGeometry(0.25, 32, 32);
+    const marsMaterial = new THREE.MeshBasicMaterial({ color: 0xFF4500 });
+    const mars = new THREE.Mesh(marsGeometry, marsMaterial);
+    mars.position.set(15, 0, 0);
+    mars.userData = { 
+        mass: 6.417e-3, 
+        velocity: new THREE.Vector3(0, 0, 0.0241), // Initial orbital velocity in Z direction
+        centripetalScale: 1 
+    };
+    scene.add(mars);
+    spheres.push(mars);
 
     // Add fluid particles
     const particleGeometry = new THREE.SphereGeometry(0.05, 8, 8);
@@ -89,14 +100,21 @@ function init() {
         resetSimulation();
     });
 
-    // Update sphere positions and masses from sliders
-    ['brown', 'green', 'red'].forEach(color => {
-        document.getElementById(`${color}-mass`).addEventListener('input', updateParams);
-        document.getElementById(`${color}-x`).addEventListener('input', updateParams);
-        document.getElementById(`${color}-y`).addEventListener('input', updateParams);
-        document.getElementById(`${color}-z`).addEventListener('input', updateParams);
+    // Update sphere positions, masses, orbital velocities, centripetal force, and fluid interactions
+    ['sun', 'earth', 'mars'].forEach(body => {
+        document.getElementById(`${body}-mass`).addEventListener('input', updateParams);
+        document.getElementById(`${body}-x`).addEventListener('input', updateParams);
+        document.getElementById(`${body}-y`).addEventListener('input', updateParams);
+        document.getElementById(`${body}-z`).addEventListener('input', updateParams);
+        if (body !== 'sun') {
+            document.getElementById(`${body}-orbital-velocity`).addEventListener('input', updateParams);
+            document.getElementById(`${body}-centripetal`).addEventListener('input', updateParams);
+        }
     });
 
+    document.getElementById('fluid-friction').addEventListener('input', updateParams);
+    document.getElementById('fluid-deflection').addEventListener('input', updateParams);
+
     // Handle window resize
     window.addEventListener('resize', () => {
         camera.aspect = (window.innerWidth - 300) / window.innerHeight;
@@ -106,26 +124,39 @@ function init() {
 }
 
 function updateParams() {
-    spheres[0].userData.mass = parseFloat(document.getElementById('brown-mass').value);
+    // Update Sun
+    spheres[0].userData.mass = parseFloat(document.getElementById('sun-mass').value) * 1e4;
     spheres[0].position.set(
-        parseFloat(document.getElementById('brown-x').value),
-        parseFloat(document.getElementById('brown-y').value),
-        parseFloat(document.getElementById('brown-z').value)
+        parseFloat(document.getElementById('sun-x').value),
+        parseFloat(document.getElementById('sun-y').value),
+        parseFloat(document.getElementById('sun-z').value)
     );
 
-    spheres[1].userData.mass = parseFloat(document.getElementById('green-mass').value);
+    // Update Earth
+    spheres[1].userData.mass = parseFloat(document.getElementById('earth-mass').value) * 1e4;
     spheres[1].position.set(
-        parseFloat(document.getElementById('green-x').value),
-        parseFloat(document.getElementById('green-y').value),
-        parseFloat(document.getElementById('green-z').value)
+        parseFloat(document.getElementById('earth-x').value),
+        parseFloat(document.getElementById('earth-y').value),
+        parseFloat(document.getElementById('earth-z').value)
     );
+    const earthVelocity = parseFloat(document.getElementById('earth-orbital-velocity').value);
+    spheres[1].userData.velocity.set(0, 0, earthVelocity); // Update velocity in Z direction for orbit
+    spheres[1].userData.centripetalScale = parseFloat(document.getElementById('earth-centripetal').value);
 
-    spheres[2].userData.mass = parseFloat(document.getElementById('red-mass').value);
+    // Update Mars
+    spheres[2].userData.mass = parseFloat(document.getElementById('mars-mass').value) * 1e4;
     spheres[2].position.set(
-        parseFloat(document.getElementById('red-x').value),
-        parseFloat(document.getElementById('red-y').value),
-        parseFloat(document.getElementById('red-z').value)
+        parseFloat(document.getElementById('mars-x').value),
+        parseFloat(document.getElementById('mars-y').value),
+        parseFloat(document.getElementById('mars-z').value)
     );
+    const marsVelocity = parseFloat(document.getElementById('mars-orbital-velocity').value);
+    spheres[2].userData.velocity.set(0, 0, marsVelocity); // Update velocity in Z direction for orbit
+    spheres[2].userData.centripetalScale = parseFloat(document.getElementById('mars-centripetal').value);
+
+    // Update fluid interaction parameters
+    FLUID_FRICTION = parseFloat(document.getElementById('fluid-friction').value);
+    FLUID_DEFLECTION = parseFloat(document.getElementById('fluid-deflection').value);
 }
 
 function resetSimulation() {
@@ -141,6 +172,12 @@ function resetSimulation() {
             (Math.random() - 0.5) * FLUID_SPEED
         );
     });
+
+    // Reset positions and velocities for Earth and Mars
+    spheres[1].position.set(10, 0, 0);
+    spheres[1].userData.velocity.set(0, 0, 0.0298);
+    spheres[2].position.set(15, 0, 0);
+    spheres[2].userData.velocity.set(0, 0, 0.0241);
 }
 
 function animate() {
@@ -159,11 +196,11 @@ function animate() {
 
                 if (distance < sphereRadius) {
                     // Apply friction
-                    velocity.multiplyScalar(FRICTION_FACTOR);
+                    velocity.multiplyScalar(FLUID_FRICTION);
 
                     // Apply gravitational deflection
                     let direction = sphere.position.clone().sub(position).normalize();
-                    let forceMagnitude = (GRAVITY_CONSTANT * sphere.userData.mass) / (distance * distance);
+                    let forceMagnitude = (FLUID_DEFLECTION * sphere.userData.mass) / (distance * distance);
                     let force = direction.multiplyScalar(forceMagnitude);
                     velocity.add(force);
                 }
@@ -178,8 +215,10 @@ function animate() {
             if (Math.abs(position.z) > SPACE_SIZE / 2) position.z = -Math.sign(position.z) * SPACE_SIZE / 2;
         });
 
-        // Update sphere positions (gravitational interaction between spheres)
+        // Update sphere positions (gravitational interaction and orbital dynamics)
         spheres.forEach((sphere, i) => {
+            if (i === 0) return; // Sun is stationary
+
             let acceleration = new THREE.Vector3();
             spheres.forEach((otherSphere, j) => {
                 if (i !== j) {
@@ -187,11 +226,14 @@ function animate() {
                     if (distance > 0.1) { // Avoid division by zero
                         let direction = otherSphere.position.clone().sub(sphere.position).normalize();
                         let force = (GRAVITY_CONSTANT * otherSphere.userData.mass) / (distance * distance);
-                        acceleration.add(direction.multiplyScalar(force));
+                        acceleration.add(direction.multiplyScalar(force * sphere.userData.centripetalScale));
                     }
                 }
             });
-            sphere.position.add(acceleration);
+
+            // Update velocity and position
+            sphere.userData.velocity.add(acceleration);
+            sphere.position.add(sphere.userData.velocity);
         });
     }