WIP: collision corners

html/images/space.svg

@@ -97,7 +97,7 @@
   <!-- <polygon class="wall inverse" points="-180,-40 -170,-120 40,-130 170,-120 180,40 170,130 -40,130 -170,120" /> -->
   <!-- <polygon class="wall inverse" points="-160,-40 -170,-120 40,-110 170,-120 160,40 170,130 -40,110 -170,120" /> -->
 
-  <g class="ship">
+  <g id="player" class="ship">
     <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
     <circle id="body" cx="0" cy="0" r="5"/>
     <line id="velocity-indicator" x1="0" y1="0" x2="0" y2="0"/>
@@ -109,7 +109,9 @@
   </g>
 
   <!-- <polygon class="wall" points="20,20 30,20 40,40 20,40" /> -->
-  <polygon class="wall" points="20,20 50,20 70,40 70,70 50,90 20,90 0,70 0,40" />
+  <!-- <polygon class="wall" points="20,20 50,20 70,40 70,70 50,90 20,90 0,70 0,40" /> -->
+  <polygon class="wall" points="-10,-10 -20,-10 -20,-20 -10,-20" />
+
   <!-- <polygon class="wall" points="-10,20 10,10 10,20" /> -->
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
   <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
@@ -193,8 +195,8 @@
       rotate: 0,
       collision: null,
       isLanded: false,
-      node: null,
-      gearDown: false
+      gearDown: false,
+      node: null
     };
 
     let friction = 0;
@@ -236,6 +238,21 @@
       return wall.classList.contains("inverse") ? cs.reverse() : cs;
     });
 
+    // console.log("allWallCorners", allWallCorners);
+
+    const ws = [...walls].map(node => {
+      return {
+        node,
+        corners: node.getAttribute('points').split(' ').map(coords => {
+          const [x, y] = coords.split(',');
+          const pt = svg.createSVGPoint();
+          pt.x = +x;
+          pt.y = +y;
+          return pt;
+        })
+      };
+    });
+
     const edgeszz = [...walls].map(wall => {
       const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => {
         const [x, y] = coords.split(',');
@@ -348,6 +365,44 @@
       }, []);
     }
 
+    // function getCollisionCorners(ws, { x: px, y: py }, { x: vx, y: vy }) {
+    function getCollisionCorners(ws, { x: x1, y: y1 }, { x: x2, y: y2 }) {
+      // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points
+
+      // find shortest distance between corners and velocity line
+      // if that distance is less than the ship's radius, we need to check
+      // that corner for collision
+      // console.log("position", px, py);
+      // console.log("velocity", vx, vy);
+      const blah = ws.reduce((acc, w) => {
+        // console.log("wall corners", w, w.corners);
+        // console.log("wall", w);
+        // w.corners.forEach(c => {
+        //   console.log("corner", c);
+        //   const { x: x0, y: y0 } = c;
+        //   const d = Math.abs((y2-y1)*x0 - (x2-x1)*y0 + x2*y1-y2*x1) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2)
+        //   console.log("d", d);
+        //   return c;
+        // });
+        // return [...acc, ...w.corners];
+        const corners = w.corners.map(c => ({ corner: c, node: w }));
+
+        const filtered = corners.filter(c => {
+          const { x: x0, y: y0 } = c.corner;
+          const d = Math.abs((y2-y1)*x0 - (x2-x1)*y0 + x2*y1-y2*x1) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2);
+          // console.log("corner", c.corner, "d", d, "shipRadius", shipRadius);
+          return d <= shipRadius;
+        });
+
+        // console.log("filtered", filtered);
+
+        // return [...acc, ...corners];
+        return [...acc, ...filtered];
+      }, []);
+
+      return blah;
+    }
+
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
@@ -514,7 +569,9 @@
       return shipBody.isPointInFill(cornerPt);
     }
 
-    function detectCollisions(position, walls, edges, z) {
+    // function detectCollisions(position, walls, edges, z) {
+    function detectCollisions(position, walls, z) {
+      // console.log("detectCollision", position, walls, z);
       let actualCorner;
       const corner = walls.find(wall => {
         const c = wall.find(corner => detectCornerCollision(position, corner));
@@ -607,9 +664,12 @@
       let [xc, yc] = position;
 
       const collE = getCollisionEdges(edgeszz, position);
-      // console.log("collision edges", collE);
+      const collC = getCollisionCorners(ws, { x, y }, s.velocity);
+
+      console.log("collision corners", collC);
+
       current = s.collision;
-      s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE);
+      s.collision = detectCollisions(position, allWallCorners, collE);
 
       // console.log("future position", xc, yc);
       // legs.style.display = !legs.style.display || legs.style.display === "none" ? "initial" : "none";