Make gun rotation a system

html/images/space.svg

@@ -225,6 +225,9 @@ const Ships = [{ entity_id: "ship1" }];
 const Velocity = {};
 const Position = {};
 const Acceleration = {};
+const AngularAcceleration = {};
+const AngularVelocity = {};
+const Degrees = {};
 
 // Points = {
 //   "wall_1": "0,0 2,0 1,1",
@@ -232,6 +235,37 @@ const Acceleration = {};
 // };
 
 // systems
+const Rotate = (() => {
+  const metersPerMillisecond = 0.001;
+
+  return {
+    update: ({ entity_id }, elapsed) => {
+      const angularVel = AngularVelocity[entity_id];
+      const angularAcc = AngularAcceleration[entity_id];
+      const degrees = Degrees[entity_id];
+
+      let angularVelocity = angularVel + angularAcc;
+      const friction = 0.05;
+      const limit = 3;
+
+      if (angularVelocity > 0) {
+        if (angularVelocity > limit) angularVelocity = limit;
+        angularVelocity -= angularVelocity > friction ? friction : angularVelocity;
+      } else if (angularVelocity < 0) {
+        if (angularVelocity < -limit) angularVelocity = -limit;
+        angularVelocity += -angularVelocity > friction ? friction : -angularVelocity;
+      }
+
+      const turnRadians = elapsed * angularVelocity * metersPerMillisecond;
+      const radians = degrees * Math.PI / 180; // toFixed(15)?
+      const dDelta = turnRadians * 180 / Math.PI;
+
+      AngularVelocity[entity_id] = angularVelocity;
+      Degrees[entity_id] = degrees + dDelta;
+    }
+  };
+})();
+
 const Move = (() => {
   const metersPerMillisecond = 0.001;
 
@@ -934,34 +968,26 @@ function init() {
 
   s.position = { x: 3, y: -6 };
   s.velocity = { x: 0, y: 0 };
-  // s.velocity = { x: 10, y: 20 };
-  // s.velocity = { x: -20, y: 40 };
-  // s.velocity = { x: -1, y: 2 };
-  s.angularVelocity = 0;
-
-  // s. velocity = { x: -5*mult, y: 7*mult };
-  // drawCircle(0, 0);
-
-  // s.acceleration = { x: -1, y: 2 };
-  // s.acceleration = { x: -2, y: 2 };
   s.acceleration = { x: 0, y: 0 };
 
-  Ships.forEach(({ entity_id }) => {
-    // Acceleration[entity_id] = s.acceleration;
-    // Velocity[entity_id] = s.velocity;
-    // Position[entity_id] = s.position;
-    Acceleration[entity_id] = { x: s.acceleration.x, y: s.acceleration.y };
-    Velocity[entity_id] = { x: s.velocity.x, y: s.velocity.y };
-    Position[entity_id] = { x: s.position.x, y: s.position.y };
-  });
-
   s.angularAcceleration = 0;
-  s.rotate = 0;
+  s.angularVelocity = 0;
   s.degrees = 0;
+
   s.collision = null;
   s.isLanded = false;
   s.gearDown = false;
 
+  Ships.forEach(({ entity_id }) => {
+    Acceleration[entity_id] = { x: s.acceleration.x, y: s.acceleration.y };
+    Velocity[entity_id] = { x: s.velocity.x, y: s.velocity.y };
+    Position[entity_id] = { x: s.position.x, y: s.position.y };
+
+    AngularAcceleration[entity_id] = s.angularAcceleration;
+    AngularVelocity[entity_id] = s.angularVelocity;
+    Degrees[entity_id] = s.degrees;
+  });
+
   [...edgeContainer.children].forEach(c => c.remove());;
   s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
 
@@ -1192,22 +1218,9 @@ function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
 function updateShip(s, elapsed) {
   // const gravity = 0.25;
   const gravity = 0;
-
-  // if (rotate > 0) {
-  //   s.degrees = (s.degrees + rotationSpeed * elapsed) % 360;
-  // } else if (rotate < 0) {
-  //   s.degrees = (s.degrees - rotationSpeed * elapsed) % 360;
-  // }
-
-  gun.style.transform = `rotate(${s.degrees}deg)`;
-
   const { x: px, y: py } = s.position;
   const { x: vx, y: vy } = s.velocity;
-  // const { x: ax, y: ay } = s.acceleration;
   let { x: ax, y: ay } = s.acceleration;
-  const angularVel = s.angularVelocity;
-  const angularAcc = s.angularAcceleration;
-  const degrees = s.degrees;
   ay += gravity;
 
   s.velocity = {
@@ -1215,19 +1228,6 @@ function updateShip(s, elapsed) {
     y: vy > 0 && vy + ay <= 0 ? 0 : vy + ay
   };
 
-  s.angularVelocity = angularVel + angularAcc;
-
-  const friction = 0.05;
-  const limit = 3;
-
-  if (s.angularVelocity > 0) {
-    if (s.angularVelocity > limit) s.angularVelocity = limit;
-    s.angularVelocity -= s.angularVelocity > friction ? friction : s.angularVelocity;
-  } else if (s.angularVelocity < 0) {
-    if (s.angularVelocity < -limit) s.angularVelocity = -limit;
-    s.angularVelocity += -s.angularVelocity > friction ? friction : -s.angularVelocity;
-  }
-
   velIndic.setAttribute('x2', s.velocity.x);
   velIndic.setAttribute('y2', s.velocity.y);
   acclIndic.setAttribute('x2', s.acceleration.x);
@@ -1242,11 +1242,6 @@ function updateShip(s, elapsed) {
 
   const p = { x: pDelta.x + px, y: pDelta.y + py };
 
-  const turnRadians = elapsed * s.angularVelocity * metersPerMillisecond;
-  const radians = degrees * Math.PI / 180; // toFixed(15)?
-  const dDelta = turnRadians * 180 / Math.PI;
-
-  s.degrees = degrees + dDelta;
   current = s.collision;
 
   // s.collision = detectCollision([px, py], p, s.velocity, s.radius, map, s.gearDown);
@@ -1384,6 +1379,7 @@ function animate(timestamp) {
   // Move.update(Ships[0], elapsed);
   Ships.forEach(({ entity_id }) => {
     Move.update({ entity_id }, elapsed);
+    Rotate.update({ entity_id }, elapsed);
   });
 
   let newPos = updateShip(s, elapsed);
@@ -1394,6 +1390,8 @@ function animate(timestamp) {
   positionEl.innerText = `${newPos.x},${newPos.y}`;
   velocityEl.innerText = `${newVel.x},${newVel.y}`;
 
+  gun.style.transform = `rotate(${Degrees[Ships[0].entity_id]}deg)`;
+
   // updateEdges(position);
   if (drawCollisionLines) updateTriangles(position);
 
@@ -1486,6 +1484,7 @@ document.addEventListener("keydown", function(e) {
       if (!rotateCCWPressed) {
         rotateCCWPressed = true;
         s.angularAcceleration -= torque;
+        AngularAcceleration[entity_id] -= torque;
       }
       break;
     case "KeyE":
@@ -1493,6 +1492,7 @@ document.addEventListener("keydown", function(e) {
       if (!rotateCWPressed) {
         rotateCWPressed = true;
         s.angularAcceleration += torque;
+        AngularAcceleration[entity_id] += torque;
       }
       break;
     case "KeyP": // Pause
@@ -1550,6 +1550,7 @@ document.addEventListener("keyup", function(e) {
       if (rotateCCWPressed) {
         rotateCCWPressed = false;
         s.angularAcceleration += torque;
+        AngularAcceleration[entity_id] += torque;
       }
       break;
     case "KeyE":
@@ -1557,6 +1558,7 @@ document.addEventListener("keyup", function(e) {
       if (rotateCWPressed) {
         rotateCWPressed = false;
         s.angularAcceleration -= torque;
+        AngularAcceleration[entity_id] -= torque;
       }
       break;
   }