WIP: almost got vector calc

html/images/space.svg

@@ -128,7 +128,7 @@
   <!-- <polygon class="wall" points="-10,10 10,10 10,40 -10,40" /> -->
   <!-- <polygon class="wall" points="-10,-40 10,-40 10,-20 -10,-20" /> -->
 
-  <polygon class="wall" points="-10,-40 10,-40 10,-15 -10,-15" />
+  <!-- <polygon class="wall" points="-10,-40 10,-40 10,-15 -10,-15" /> -->
   <polygon class="wall" points="-20,-10 20,10 -20,20 -30,0" />
 
   <!-- <polygon class="wall" points="-10,10 10,30 -10,40 -20,20" /> -->
@@ -185,6 +185,8 @@
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">-</span> fps
       <br/>
       <span id="position" xmlns="http://www.w3.org/1999/xhtml">-,-</span> x,y position
+      <br/>
+      <span id="velocity" xmlns="http://www.w3.org/1999/xhtml">-,-</span> x,y velocity
     </div>
     <ul xmlns="http://www.w3.org/1999/xhtml">
       <li xmlns="http://www.w3.org/1999/xhtml">bounce from collisions</li>
@@ -350,8 +352,8 @@ const Move = (() => {
         const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/denom;
         // const roundedT = +t.toFixed(2);
         // const roundedS = +s.toFixed(2);
-        const roundedT = t;
+        const roundedT = +t.toFixed(15);
-        const roundedS = s;
+        const roundedS = +s.toFixed(15);
 
         // console.log("checking edge for collision", edge);
         // console.log("position edge segs", positionSeg, edgeSeg);
@@ -360,11 +362,15 @@ const Move = (() => {
 
         // if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) {
         if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-          const xs = (x1 + s * (x2 - x1));
+          const xs = (x1 + +s.toFixed(15) * (x2 - x1));
-          const ys = (y1 + s * (y2 - y1));
+          const ys = (y1 + +s.toFixed(15) * (y2 - y1));
           // console.log("xs, yx", xs, ys);
           // console.log("xc, yc", xc, yc);
-          collision.position = { x: xs, y: ys };
+          // collision.position = { x: xs, y: ys };
+          collision.position = { x: +xs.toFixed(15), y: +ys.toFixed(15) };
+
+          console.log("BLSAEKJSDFGLSKDJF");
+
           // collision.position = { x: xc, y: yc };
           // console.log("position calculate by detectEdgeCollision", xs, ys);
 
@@ -598,18 +604,64 @@ const Move = (() => {
           // bounced velocity vector
           // drawLine(p.x, p.y, p.x + contact.velocity.x, p.y + contact.velocity.y, "blue");
 
-          if (det < 0) {
+          // const edgeNrmlVect = { x: rise, y: -run };
-            // moving towards edge
+          const edgeNrmlVect = vector(rise, -run);
-            Velocity[entity_id] = contact.velocity;
+          const velocityVect = vector(-vx, vy);
-            // Velocity[entity_id] = { x: 0, y: 0 };
+          console.log("velocity vector", velocityVect);
-            Position[entity_id] = contact.position;
+          console.log("normal vector", edgeNrmlVect);
-          } else {
+          drawLine(px, py, px + velocityVect.x, py + velocityVect.y, "blue");
-            // moving away from edge
+          drawLine(px, py, px + edgeNrmlVect.x, py + edgeNrmlVect.y);
-            Velocity[entity_id] = { x: v.x, y: v.y };
+          // vDotn = edgeNrmlVect.x * velocityVect.dx + edgeNrmlVect.y * velocityVect.dy;
-            Position[entity_id] = { x: p.x, y: p.y };
+          const vn = edgeNrmlVect.x * velocityVect.dx + edgeNrmlVect.y * velocityVect.dy;
-          }
+          const vDotn = edgeNrmlVect.x * velocityVect.x + edgeNrmlVect.y * velocityVect.y;
+          const f = vDotn / (edgeNrmlVect.x ** 2 + edgeNrmlVect.y ** 2);
+
+          const vOnNx = vn * velocityVect.dx + velocityVect.x;
+          const vOnNy = vn * velocityVect.dy + velocityVect.y;
+          const prVonNx = edgeNrmlVect.y * f;
+          const prVonNy = -edgeNrmlVect.x * f;
+
+          console.log("vOnNx, vOnNy", vOnNx, vOnNy)
+          console.log("prVonNx, prVonNy", prVonNx, prVonNy)
+          // drawLine(contact.position.x, contact.position.y, contact.position.x + prVonNy, contact.position.y - prVonNx, "teal");
+          drawLine(contact.position.x, contact.position.y, contact.position.x + prVonNx, contact.position.y + prVonNy, "teal");
+
+          // contact.velocity = { x: -prVonNx, y: prVonNy }
+          // contact.velocity = { x: 16, y: 32 };
+          contact.velocity = { x: prVonNx, y: prVonNy };
+
+          // Velocity[entity_id] = { x: -prVonNx, y: prVonNy };
+          Velocity[entity_id] = { x: prVonNx, y: prVonNy };
+
+          // -15.999999999999998 31.999999999999996
+
+          // if (det < 0) {
+          //   console.log("moving towards edge");
+          //   console.log("current velocity", vx, vy);
+          //   console.log("current position", px, py);
+          //   console.log("future velocity", v);
+          //   console.log("future position", p);
+          //   console.log("contact position", contact.position);
+          //   drawLine(px, py, p.x, p.y, "green");
+          //   drawCircle(contact.position.x, contact.position.y, "red");
+          //
+          //
+          //   // moving towards edge
+          //   // Velocity[entity_id] = contact.velocity;
+          //   Velocity[entity_id] = { x: 0, y: 0 };
+          //   Position[entity_id] = contact.position;
+          //   console.log("position", Position[entity_id], "velocity", Velocity[entity_id]);
+          // } else {
+          //   console.log("moving away from edge");
+          //
+          //   // moving away from edge
+          //   Velocity[entity_id] = { x: v.x, y: v.y };
+          //   Position[entity_id] = { x: p.x, y: p.y };
+          // }
         }
       } else {
+        console.log("movi");
+
         Velocity[entity_id] = { x: v.x, y: v.y };
         Position[entity_id] = { x: p.x, y: p.y };
       }
@@ -638,6 +690,7 @@ const bg = svg.querySelector('#bg');
 const fps = document.querySelector("#fps");
 const time = document.querySelector("#time");
 const positionEl = document.querySelector("#position");
+const velocityEl = document.querySelector("#velocity");
 const debug = document.querySelector("#debug");
 const wallElements = document.querySelectorAll('.wall');
 const bulletsContainer = document.querySelector("#bullets");
@@ -697,14 +750,17 @@ function init() {
   started = false;
   const mult = 10;
 
-  s.position = { x: 0, y: -8 };
+  s.position = { x: 2.23, y: -10 };
   // s.velocity = { x: 0, y: -10 };
   // s.velocity = { x: 10, y: 20 };
-  s.velocity = { x: 10, y: 20 };
+  s.velocity = { x: 0, y: 40 };
+  // s.velocity = { x: 0, y: 20000 };
   s.angularVelocity = 0;
 
   // s. velocity = { x: -5*mult, y: 7*mult };
+  // drawCircle(0, 0);
 
+  // s.acceleration = { x: 0, y: 10 };
   s.acceleration = { x: 0, y: 0 };
 
   Ships.forEach(({ entity_id }) => {
@@ -1412,9 +1468,11 @@ function animate(timestamp) {
 
   let newPos = updateShip(s, elapsed);
   newPos = Position[Ships[0].entity_id];
+  newVel = Velocity[Ships[0].entity_id];
 
   s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
   positionEl.innerText = `${newPos.x.toFixed(1)},${newPos.y.toFixed(1)}`;
+  velocityEl.innerText = `${newVel.x.toFixed(1)},${newVel.y.toFixed(1)}`;
 
   // updateEdges(position);
   if (drawCollisionLines) updateTriangles(position);