From d4e1bf5b9e1d8b465d03f30741bca79d8dc4b83f Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Sat, 13 Dec 2025 22:50:42 -0800
Subject: [PATCH] Add friction

---
 html/images/tanks.svg | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/html/images/tanks.svg b/html/images/tanks.svg
index 95378d4..be52543 100644
--- a/html/images/tanks.svg
+++ b/html/images/tanks.svg
@@ -86,6 +86,7 @@
     let velocity = [0, 0]; // meters per second
     let acceleration = [0, 0]; // meters per second per second
     let previous, zero, frameCount = 0;
+    let friction = 7.5;
 
     requestAnimationFrame(firstFrame);
 
@@ -109,10 +110,17 @@
       }
 
       let [velocityX, velocityY] = velocity;
+      let [accelerationX, accelerationY] = acceleration;
 
-      const [accelerationX, accelerationY] = acceleration;
+      if (velocityX > 0) accelerationX += -friction;
+      else if (velocityX < 0) accelerationX += friction;
 
-      velocity = [velocityX + accelerationX, velocityY + accelerationY];
+      if (velocityY > 0) accelerationY += -friction;
+      else if (velocityY < 0) accelerationY += friction;
+
+      velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
+      velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
+      velocity = [velocityX, velocityY];
 
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
@@ -312,8 +320,10 @@
       // console.log("after", pkf.transform, fkf.transform);
     }
 
+    let force = 10;
+
     leftTurnButton.addEventListener("mousedown", function (e) {
-      acceleration[0] = -1;
+      acceleration[0] = -force;
       // tankTurn.playbackRate = 1;
       // tankTurn.play();
     });
@@ -326,7 +336,7 @@
     });
 
     rightTurnButton.addEventListener("mousedown", function (e) {
-      acceleration[0] = 1;
+      acceleration[0] = force;
 
       // tankTurn.playbackRate = -1;
       // tankTurn.play();
@@ -340,7 +350,7 @@
     });
 
     reverseMoveButton.addEventListener("mousedown", function (e) {
-      acceleration[1] = -1; // meters per second per second
+      acceleration[1] = -force; // meters per second per second
 
       // tankMove.playbackRate = -1;
       // tankMove.play();
@@ -356,7 +366,7 @@
     forwardMoveButton.addEventListener("mousedown", function (e) {
       // tankMove.playbackRate = 1;
       // tankMove.play();
-      acceleration[1] = 1; // meters per second per second
+      acceleration[1] = force; // meters per second per second
     });
 
     forwardMoveButton.addEventListener("mouseup", function (e) {