Calculate reflection using vectors instead of functions?

html/images/space.svg

@@ -128,7 +128,9 @@
   <!-- <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 -10,100 -100,100" />
 
   <!-- <polygon class="wall" points="-10,0 10,0 10,10 -10,10" /> -->
@@ -520,6 +522,9 @@ const Move = (() => {
 
         // 2.03 * 10
         // 20.299999999999997
+
+        // offset position slightly (by adding 1 to sr), so contact point is
+        // not inside the wall
         const xsrOff = Math.round(x1r + (sr + 1) * (x2r - x1r)) / 100;
         const ysrOff = Math.round(y1r + (sr + 1) * (y2r - y1r)) / 100;
 
@@ -907,6 +912,29 @@ const Move = (() => {
 
           console.log("calculated next", newP, "aaa");
 
+          const edgeVect = { x: run, y: rise };
+          // const npVect = { x: newP.x - run, y: newP.y - rise };
+          const npVect = { x: newP.x - contact.edge.xa, y: newP.y - contact.edge.ya };
+
+          drawLine(contact.edge.xa, contact.edge.ya, contact.edge.xa + npVect.x, contact.edge.ya + npVect.y);
+
+
+          const projection = ({ of, onto }) => {
+            const ofDotOnto = onto.x * of.x + onto.y * of.y;
+            const ontoMag = onto.x ** 2 + onto.y ** 2;
+            const scalar = 2 * ofDotOnto / ontoMag;
+            const ontoV = { x: scalar * onto.x, y: scalar * onto.y };
+
+            return {
+              x: ontoV.x - of.x,
+              y: ontoV.y - of.y
+            };
+          }
+
+          const projNpOntoEdge = projection({ of: npVect, onto: edgeVect });
+          projNpOntoEdge.x = projNpOntoEdge.x + contact.edge.xa;
+          projNpOntoEdge.y = projNpOntoEdge.y + contact.edge.ya;
+
           // can I reflect the calculated next position across the edge line?
           const m = rise / run;
           const c = (contact.edge.xb*contact.edge.ya-contact.edge.xa*contact.edge.yb) / (contact.edge.xb-contact.edge.xa);
@@ -923,9 +951,11 @@ const Move = (() => {
           // shouldnt change isClockwise if isAcute isn't also changing
           // if we go from clockwise to not clockwise without changing acuteness,
           //   that means we went through a wall
-          if (!isC && isA) newP = refP;
+          // if (!isC && isA) newP = refP;
+          if (!isC && isA) newP = projNpOntoEdge;
 
-          console.log("reflection", refP, "aaa");
+          // console.log("reflection", refP, projNpOntoEdge, "aaa");
+          console.log("reflection", refP, projNpOntoEdge, "aaa");
           isC = isClockwise([contact.edge.xa, contact.edge.ya], [contact.edge.xb, contact.edge.yb], [refP.x, refP.y]);
           console.log("is reflected position clockwise with current contact", isC, "aaa");
           isA = isAcute([contact.edge.xa, contact.edge.ya], [contact.edge.xb, contact.edge.yb], [refP.x, refP.y]);