Added staticAcceleration function and Reset Simulation Button Functio…

…nality
Cyklon3000 · Sep 28, 2024 · 78511b3 · 78511b3
1 parent f764df6
commit 78511b3
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
                         <option value="staticVelocity">staticVelocity</option>
                         <option value="distanceVelocity">distanceVelocity</option>
                         <option value="proximityVelocity">proximityVelocity</option>
+                        <option value="staticAcceleration">staticAcceleration</option>
                     </select>
                 </div>
             </div>
@@ -41,12 +42,24 @@
             <div id="referenceDistance-slider" class="settings-item slider-item is-hidden">
                 <div class="settings-item-name">Reference Distance - 300</div>
                 <div class="settings-item-control">
-                    <input title="(px per second)" class="slider" type="range" min="0" max="600" step="1">
+                    <input title="(px)" class="slider" type="range" min="0" max="600" step="1">
+                </div>
+            </div>
+            <div id="baseAcceleration-slider" class="settings-item slider-item is-hidden">
+                <div class="settings-item-name">Base acceleration - 50</div>
+                <div class="settings-item-control">
+                    <input title="(px per second per second)" class="slider" type="range" min="0" max="100" step="0.5">
+                </div>
+            </div>
+            <div id="dragCoefficient-slider" class="settings-item slider-item is-hidden">
+                <div class="settings-item-name">Drag coefficient - 0.5</div>
+                <div class="settings-item-control">
+                    <input title="(velocity multiplier per second)" class="slider" type="range" min="0" max="1" step="0.01">
                 </div>
             </div>
 
             <div class="settings-button-container">
-                <button class="settings-button">Button</button>
+                <button class="settings-button" id="reset">Reset Simulation</button>
             </div>
         </div>
     </div>

diff --git a/lerp.js b/lerp.js
@@ -48,33 +48,47 @@ for (const slider of variableSliders) {
     slider.label = slider.parentElement.parentElement.children[0];
 }
 
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', resetSimulation);
+
 let positionFunction = positionSetter;
 
 let deltaTime = 0;
 let lastTimestamp = Date.now();
 
+let inertia = new Vector2(0, 0);
+
 // Variable to be set by the user
 let baseVelocity = 300;
 let referenceDistance = 300;
+let baseAcceleration = 50;
+let dragCoefficient = 0.5;
 
 function updateFunction() {
     switch (currentFunctionSelection.value) {
         case 'positionSetter':
             positionFunction = positionSetter;
-            setSliderVisibility(['baseVelocity', 'referenceDistance'], false);
+            setSliderVisibility(['baseVelocity', 'referenceDistance', 'baseAcceleration', 'dragCoefficient'], false);
             break;
         case 'staticVelocity':
             positionFunction = staticVelocity;
             setSliderVisibility(['baseVelocity'], true);
-            setSliderVisibility(['referenceDistance'], false);
+            setSliderVisibility(['referenceDistance', 'baseAcceleration', 'dragCoefficient'], false);
             break;
         case 'distanceVelocity':
             positionFunction = distanceVelocity;
             setSliderVisibility(['baseVelocity', 'referenceDistance'], true);
+            setSliderVisibility(['baseAcceleration', 'dragCoefficient'], false);
             break;
         case 'proximityVelocity':
             positionFunction = proximityVelocity;
             setSliderVisibility(['baseVelocity', 'referenceDistance'], true);
+            setSliderVisibility(['baseAcceleration', 'dragCoefficient'], false);
+            break;
+        case 'staticAcceleration':
+            positionFunction = staticAcceleration;
+            setSliderVisibility(['baseAcceleration', 'dragCoefficient'], true);
+            setSliderVisibility(['baseVelocity', 'referenceDistance'], false);
             break;
     }
 }
@@ -88,6 +102,12 @@ function updateVariable() {
         case 'referenceDistance':
             referenceDistance = this.value;
             break;
+        case 'baseAcceleration':
+            baseAcceleration = this.value;
+            break;
+        case 'dragCoefficient':
+            dragCoefficient = this.value;
+            break;
     }
 }
 
@@ -103,6 +123,13 @@ function setSliderVisibility(sliderNames, isVisible) {
     }
 }
 
+function resetSimulation() {
+    current = new Vector2(window.innerWidth / 2, window.innerHeight / 2);
+    target = new Vector2(window.innerWidth / 2, window.innerHeight / 2);
+    inertia = new Vector2(0, 0);
+    positionFunction();
+}
+
 // Update the circle position based on the vector2 values
 function updateCirclePlacement(pos) {
     circle.style.transform = `translate(${pos.x - 25}px, ${pos.y - 25}px)`; // Centering the circle
@@ -164,6 +191,29 @@ function proximityVelocity() {
     updateCirclePlacement(newPosition);
 }
 
+function staticAcceleration() {
+    let directionRaw = target.add(current.multiply(-1));
+    let directionNormalized = directionRaw.normalize();
+    let force = directionNormalized.multiply(baseAcceleration * deltaTime);
+    if (isNaN(inertia.x)) {
+        return;
+    }
+    inertia = inertia.add(force);
+    inertia = inertia.multiply((1 - dragCoefficient) ** deltaTime);
+
+    if (directionRaw.magnitude() < 20) {
+        inertia = inertia.multiply((1 - 0.99) ** deltaTime);
+        if (inertia.magnitude() < 0.1) {
+            updateCirclePlacement(target);
+            return;
+        }
+    }
+
+    let newPosition = current.add(inertia);
+
+    updateCirclePlacement(newPosition);
+}
+
 function updateCirclePosition() {
     deltaTime = (Date.now() - lastTimestamp) / 1000;
     lastTimestamp = Date.now();

diff --git a/settings-menu.css b/settings-menu.css
@@ -70,7 +70,7 @@ body {
 }
 
 .settings-item-control {
-    margin-top: -0.625rem;
+    margin-top: -0.250rem;
 }
 
 .settings-item-name {