Update static/script.js

static/script.js

@@ -5,11 +5,16 @@ let fluidParticles = [];
 let simulationRunning = false;
 
 const PARTICLE_COUNT = 5000;
-const SPACE_SIZE = 40; // Increased space size for solar system scale
+const SPACE_SIZE = 40;
 const FLUID_SPEED = 0.1;
-let FLUID_FRICTION = 0.9; // Adjustable friction
-let FLUID_DEFLECTION = 0.1; // Adjustable deflection
-const GRAVITY_CONSTANT = 0.1; // Scaled gravitational constant
+let FLUID_FRICTION = 0.9;
+let FLUID_DEFLECTION = 0.1;
+const GRAVITY_CONSTANT = 0.1;
+
+// Scaling factors
+const MASS_SCALE = 1e-26; // Scale down masses for simulation
+const DISTANCE_SCALE = 1e-7; // Scale down distances (km to simulation units)
+const VELOCITY_SCALE = 1e-3; // Scale down velocities (km/s to simulation units)
 
 init();
 animate();
@@ -33,7 +38,7 @@ function init() {
     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) };
+    sun.userData = { mass: 1.989e30 * MASS_SCALE, velocity: new THREE.Vector3(0, 0, 0) };
     scene.add(sun);
     spheres.push(sun);
 
@@ -41,10 +46,10 @@ function init() {
     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.position.set(149.6e6 * DISTANCE_SCALE, 0, 0);
     earth.userData = { 
-        mass: 5.972e-2, 
-        velocity: new THREE.Vector3(0, 0, 0.0298), // Initial orbital velocity in Z direction
+        mass: 5.972e24 * MASS_SCALE, 
+        velocity: new THREE.Vector3(0, 0, 29.8 * VELOCITY_SCALE),
         centripetalScale: 1 
     };
     scene.add(earth);
@@ -54,10 +59,10 @@ function init() {
     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.position.set(227.9e6 * DISTANCE_SCALE, 0, 0);
     mars.userData = { 
-        mass: 6.417e-3, 
-        velocity: new THREE.Vector3(0, 0, 0.0241), // Initial orbital velocity in Z direction
+        mass: 6.417e23 * MASS_SCALE, 
+        velocity: new THREE.Vector3(0, 0, 24.1 * VELOCITY_SCALE),
         centripetalScale: 1 
     };
     scene.add(mars);
@@ -100,6 +105,9 @@ function init() {
         resetSimulation();
     });
 
+    document.getElementById('save-btn').addEventListener('click', saveSettings);
+    document.getElementById('load-btn').addEventListener('click', loadSettings);
+
     // Update sphere positions, masses, orbital velocities, centripetal force, and fluid interactions
     ['sun', 'earth', 'mars'].forEach(body => {
         document.getElementById(`${body}-mass`).addEventListener('input', updateParams);
@@ -121,37 +129,48 @@ function init() {
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth - 300, window.innerHeight);
     });
+
+    // Initial update to display scaled values
+    updateParams();
 }
 
 function updateParams() {
     // Update Sun
-    spheres[0].userData.mass = parseFloat(document.getElementById('sun-mass').value) * 1e4;
+    const sunMass = parseFloat(document.getElementById('sun-mass').value);
+    spheres[0].userData.mass = sunMass * MASS_SCALE;
+    document.getElementById('sun-mass-scaled').textContent = (sunMass * MASS_SCALE).toExponential(2);
     spheres[0].position.set(
-        parseFloat(document.getElementById('sun-x').value),
-        parseFloat(document.getElementById('sun-y').value),
-        parseFloat(document.getElementById('sun-z').value)
+        parseFloat(document.getElementById('sun-x').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('sun-y').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('sun-z').value) * DISTANCE_SCALE
     );
 
     // Update Earth
-    spheres[1].userData.mass = parseFloat(document.getElementById('earth-mass').value) * 1e4;
+    const earthMass = parseFloat(document.getElementById('earth-mass').value);
+    spheres[1].userData.mass = earthMass * MASS_SCALE;
+    document.getElementById('earth-mass-scaled').textContent = (earthMass * MASS_SCALE).toExponential(2);
     spheres[1].position.set(
-        parseFloat(document.getElementById('earth-x').value),
-        parseFloat(document.getElementById('earth-y').value),
-        parseFloat(document.getElementById('earth-z').value)
+        parseFloat(document.getElementById('earth-x').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('earth-y').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('earth-z').value) * DISTANCE_SCALE
     );
     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.velocity.set(0, 0, earthVelocity * VELOCITY_SCALE);
+    document.getElementById('earth-velocity-scaled').textContent = (earthVelocity * VELOCITY_SCALE).toFixed(4);
     spheres[1].userData.centripetalScale = parseFloat(document.getElementById('earth-centripetal').value);
 
     // Update Mars
-    spheres[2].userData.mass = parseFloat(document.getElementById('mars-mass').value) * 1e4;
+    const marsMass = parseFloat(document.getElementById('mars-mass').value);
+    spheres[2].userData.mass = marsMass * MASS_SCALE;
+    document.getElementById('mars-mass-scaled').textContent = (marsMass * MASS_SCALE).toExponential(2);
     spheres[2].position.set(
-        parseFloat(document.getElementById('mars-x').value),
-        parseFloat(document.getElementById('mars-y').value),
-        parseFloat(document.getElementById('mars-z').value)
+        parseFloat(document.getElementById('mars-x').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('mars-y').value) * DISTANCE_SCALE,
+        parseFloat(document.getElementById('mars-z').value) * DISTANCE_SCALE
     );
     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.velocity.set(0, 0, marsVelocity * VELOCITY_SCALE);
+    document.getElementById('mars-velocity-scaled').textContent = (marsVelocity * VELOCITY_SCALE).toFixed(4);
     spheres[2].userData.centripetalScale = parseFloat(document.getElementById('mars-centripetal').value);
 
     // Update fluid interaction parameters
@@ -174,10 +193,119 @@ function resetSimulation() {
     });
 
     // 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);
+    spheres[1].position.set(149.6e6 * DISTANCE_SCALE, 0, 0);
+    spheres[1].userData.velocity.set(0, 0, 29.8 * VELOCITY_SCALE);
+    spheres[2].position.set(227.9e6 * DISTANCE_SCALE, 0, 0);
+    spheres[2].userData.velocity.set(0, 0, 24.1 * VELOCITY_SCALE);
+
+    // Reset sliders to default values
+    document.getElementById('sun-mass').value = 1.989e30;
+    document.getElementById('sun-x').value = 0;
+    document.getElementById('sun-y').value = 0;
+    document.getElementById('sun-z').value = 0;
+    document.getElementById('earth-mass').value = 5.972e24;
+    document.getElementById('earth-x').value = 149.6e6;
+    document.getElementById('earth-y').value = 0;
+    document.getElementById('earth-z').value = 0;
+    document.getElementById('earth-orbital-velocity').value = 29.8;
+    document.getElementById('earth-centripetal').value = 1;
+    document.getElementById('mars-mass').value = 6.417e23;
+    document.getElementById('mars-x').value = 227.9e6;
+    document.getElementById('mars-y').value = 0;
+    document.getElementById('mars-z').value = 0;
+    document.getElementById('mars-orbital-velocity').value = 24.1;
+    document.getElementById('mars-centripetal').value = 1;
+    document.getElementById('fluid-friction').value = 0.9;
+    document.getElementById('fluid-deflection').value = 0.1;
+
+    updateParams();
+}
+
+function saveSettings() {
+    const settings = {
+        sun: {
+            mass: parseFloat(document.getElementById('sun-mass').value),
+            position: [
+                parseFloat(document.getElementById('sun-x').value),
+                parseFloat(document.getElementById('sun-y').value),
+                parseFloat(document.getElementById('sun-z').value)
+            ],
+            orbital_velocity: 0
+        },
+        earth: {
+            mass: parseFloat(document.getElementById('earth-mass').value),
+            position: [
+                parseFloat(document.getElementById('earth-x').value),
+                parseFloat(document.getElementById('earth-y').value),
+                parseFloat(document.getElementById('earth-z').value)
+            ],
+            orbital_velocity: parseFloat(document.getElementById('earth-orbital-velocity').value)
+        },
+        mars: {
+            mass: parseFloat(document.getElementById('mars-mass').value),
+            position: [
+                parseFloat(document.getElementById('mars-x').value),
+                parseFloat(document.getElementById('mars-y').value),
+                parseFloat(document.getElementById('mars-z').value)
+            ],
+            orbital_velocity: parseFloat(document.getElementById('mars-orbital-velocity').value)
+        },
+        fluid_speed: FLUID_SPEED,
+        fluid_friction: FLUID_FRICTION,
+        fluid_deflection: FLUID_DEFLECTION
+    };
+
+    fetch('/api/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings)
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('status-message').textContent = data.message || data.status;
+        document.getElementById('status-message').style.color = data.status === 'success' ? '#4CAF50' : '#FF0000';
+    })
+    .catch(error => {
+        document.getElementById('status-message').textContent = 'Error saving settings';
+        document.getElementById('status-message').style.color = '#FF0000';
+    });
+}
+
+function loadSettings() {
+    fetch('/api/load')
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            const params = data.params;
+            document.getElementById('sun-mass').value = params.sun.mass;
+            document.getElementById('sun-x').value = params.sun.position[0];
+            document.getElementById('sun-y').value = params.sun.position[1];
+            document.getElementById('sun-z').value = params.sun.position[2];
+            document.getElementById('earth-mass').value = params.earth.mass;
+            document.getElementById('earth-x').value = params.earth.position[0];
+            document.getElementById('earth-y').value = params.earth.position[1];
+            document.getElementById('earth-z').value = params.earth.position[2];
+            document.getElementById('earth-orbital-velocity').value = params.earth.orbital_velocity;
+            document.getElementById('mars-mass').value = params.mars.mass;
+            document.getElementById('mars-x').value = params.mars.position[0];
+            document.getElementById('mars-y').value = params.mars.position[1];
+            document.getElementById('mars-z').value = params.mars.position[2];
+            document.getElementById('mars-orbital-velocity').value = params.mars.orbital_velocity;
+            document.getElementById('fluid-friction').value = params.fluid_friction;
+            document.getElementById('fluid-deflection').value = params.fluid_deflection;
+
+            updateParams();
+            document.getElementById('status-message').textContent = 'Settings loaded successfully';
+            document.getElementById('status-message').style.color = '#4CAF50';
+        } else {
+            document.getElementById('status-message').textContent = data.message;
+            document.getElementById('status-message').style.color = '#FF0000';
+        }
+    })
+    .catch(error => {
+        document.getElementById('status-message').textContent = 'Error loading settings';
+        document.getElementById('status-message').style.color = '#FF0000';
+    });
 }
 
 function animate() {
@@ -192,7 +320,7 @@ function animate() {
             // Check for interactions with spheres
             spheres.forEach(sphere => {
                 let distance = position.distanceTo(sphere.position);
-                let sphereRadius = sphere.geometry.parameters.radius + 0.5; // Interaction radius
+                let sphereRadius = sphere.geometry.parameters.radius + 0.5;
 
                 if (distance < sphereRadius) {
                     // Apply friction
@@ -223,7 +351,7 @@ function animate() {
             spheres.forEach((otherSphere, j) => {
                 if (i !== j) {
                     let distance = sphere.position.distanceTo(otherSphere.position);
-                    if (distance > 0.1) { // Avoid division by zero
+                    if (distance > 0.1) {
                         let direction = otherSphere.position.clone().sub(sphere.position).normalize();
                         let force = (GRAVITY_CONSTANT * otherSphere.userData.mass) / (distance * distance);
                         acceleration.add(direction.multiplyScalar(force * sphere.userData.centripetalScale));