WIP: edge segments

html/images/space.svg

@@ -122,8 +122,14 @@
   <!-- <polygon class="wall" points="20,50 10,50 10,60 20,60" /> -->
 
   <!-- <polygon class="wall" points="-100,-50 -10,-50 -10,-60 -100,-60" /> -->
-  <polygon class="wall" points="-100,-60 -10,-60 -10,-50 -100,-50" />
+
-  <polygon class="wall" points="10,50 100,50 100,60 10,60" />
+  <!-- <polygon class="wall" points="-100,-60 -10,-60 -10,-50 -100,-50" /> -->
+  <!-- <polygon class="wall" points="10,50 100,50 100,60 10,60" /> -->
+
+  <polygon class="wall" points="-50,50 -40,60 -50,70 -60,60" />
+  <polygon class="wall" points="50,-30 40,-60 50,-70 60,-60" />
+  <polygon class="wall" points="50,50 60,60 50,70 40,60" />
+  <polygon class="wall" points="-50,-50 -60,-60 -50,-70 -40,-60" />
 
   <!-- <polygon class="wall" points="-10,20 10,10 10,20" /> -->
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
@@ -200,23 +206,10 @@
 
     const s = {
       position: { x: 0, y: 0 },
-      velocity: { x: -10, y: -10 },
+      // velocity: { x: 0, y: 0 },
 
-      // velocity: { x: 5, y: -10 },
+      velocity: { x: -1, y: -1 },
-      // velocity: { x: -5*mult, y: -10*mult },
+      // velocity: { x: 10*mult, y: 10*mult },
-      // velocity: { x: 5*mult, y: -10*mult },
-      // velocity: { x: -5*mult, y: 10*mult },
-      // velocity: { x: 0, y: -10 },
-      // velocity: { x: 10, y: 10 },
-      // velocity: { x: -10, y: -10 },
-      // velocity: { x: 10, y: -10 },
-      // velocity: { x: -10, y: 10 },
-      // velocity: { x: -10, y: 0 },
-      // velocity: { x: 10, y: 0 },
-      // velocity: { x: 0, y: -5000 },
-
-      // velocity: { x: 0.25 * mult, y: 1 * mult },
-      // velocity: { x: 0, y: 1 * mult },
       acceleration: { x: 0, y: 0 },
       rotate: 0,
       collision: null,
@@ -267,24 +260,49 @@
     // console.log("allWallCorners", allWallCorners);
 
     const ws = [...walls].map(node => {
+      const 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 edges = corners.map(({ x: xa, y: ya }, i, arr) => {
+        // return [+x, +y];
+        // const [xb, yb] = arr[i]++;
+        const { x: xb, y: yb } = arr[(i + 1) % arr.length];
+        // console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") });
+
+        // return `${+x},${+y} ${+xb},${+yb}`;
+        return {
+          xa: xa,
+          ya: ya,
+          xb: xb,
+          yb: yb,
+        };
+      });
+
       return {
         node,
-        corners: node.getAttribute('points').split(' ').map(coords => {
+        corners,
-          const [x, y] = coords.split(',');
+        edges
-          const pt = svg.createSVGPoint();
-          pt.x = +x;
-          pt.y = +y;
-          return pt;
-        })
       };
     });
 
     const mcs = ws.reduce(
-      (acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, node: wall }))],
+      (acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))],
       []
     );
 
+    const mes = ws.reduce(
+      (acc, wall) => [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))],
+      []
+    );
+
+    console.log("walls on map", ws);
     console.log("corners on map", mcs);
+    console.log("edges on map", mes);
 
     const edgeszz = [...walls].map(wall => {
       const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => {
@@ -475,7 +493,7 @@
       }
 
       const { a, b } = perppts;
-      // if (a && b) drawLine(a.x, a.y, b.x, b.y);
+      if (a && b) drawLine(a.x, a.y, b.x, b.y);
 
       return walls.reduce((acc, w) => {
         const filtered = a && b ? w.corners.filter(c => {
@@ -874,6 +892,52 @@
 
       const collE = getCollisionEdges(edgeszz, position);
 
+      const efs = mes.filter(({ edge, wall }) => {
+        const { xa, ya, xb, yb } = edge;
+        console.log("xa", xa, "ya", ya, "xb", xb, "yb", yb);
+        const det = (xb - xa) * (yc - ya) - (xc - xa) * (yb - ya);
+        return det < 0;
+      });
+      console.log("edges facing ship", efs);
+
+      efs.forEach(({ edge, wall }) => {
+        const { xa, ya, xb, yb } = edge;
+        const sl = slope(edge);
+        if (sl === Infinity) {
+          drawLine(xa + shipRadius, ya, xb + shipRadius, yb);
+        } else if (sl === -Infinity) {
+          drawLine(xa - shipRadius, ya, xb - shipRadius, yb);
+        } else if (Object.is(sl, -0)) {
+          drawLine(xa, ya + shipRadius, xb, yb + shipRadius);
+        } else if (sl === 0) {
+          drawLine(xa, ya - shipRadius, xb, yb - shipRadius);
+        } else {
+          const rise = yb - ya;
+          const run = xb - xa;
+          // drawLine(xa + 2, ya - 2, xb, yb);
+          // if (sl > 0)
+            // drawLine(xa + run, ya - rise, xb + run, yb - rise);
+          const length = distance(xa, ya, xb, yb)
+
+          // drawLine(xa + rise, ya - run, xb + rise, yb - run);
+          drawLine(xa + rise / length * shipRadius, ya - run / length *
+          shipRadius, xb + rise / length * shipRadius, yb - run / length *
+            shipRadius);
+
+            //determine length of edge and divide values by length?
+
+          // else
+            // drawLine(xa - run, ya + rise, xb - run, yb + rise);
+            // drawLine(xa - rise, ya + run, xb - rise, yb + run);
+
+
+          // drawLine(xa - run, ya - rise, xb, yb);
+          // drawLine(xa - rise, ya - run, xb, yb);
+          // drawLine(xa + rise, ya + run, xb + rise, yb + run);
+        }
+        console.log(edge, "slope", sl);
+      });
+
       // corners ahead of ship
       const fCollC = getForwardCollisionCorners(ws, { x, y }, s.velocity);
       // console.log("corners ahead of ship", fCollC);
@@ -882,26 +946,10 @@
       cwcd = fCollC.filter(withinCollisionDistance({ x, y }, s.velocity));
       // console.log("corners on collision path", cwcd);
 
-      // cwcd.forEach(c => {
-        // const positionSeg = { xa: x, ya: y, xb: xc, yb: yc };
-      //   const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
-      //   const slopeps = slope(positionSeg);
-      //   const posNormIntxn = perpIntxn(slopeps, x, y, c.corner.x, c.corner.y);
-      //   const cornerSeg = { xa: c.corner.x, ya: c.corner.y, xb: posNormIntxn.x, yb: posNormIntxn.y };
-      //
-      //   lineSegIntxn(c.corner, positionSeg, cornerSeg);
-      // });
-
-      ccps = fCollC.filter(cornerCollisionPosition({ x, y }, s.velocity));
-      // console.log("corner collision position", ccps);
-
-      // console.log("collision edges", collE);
-
       current = s.collision;
-      // s.collision = detectCollisions(position, allWallCorners, collE);
 
       const cornerColl = cwcd.find(detectCornerCollision([xc, yc], [x, y], shipRadius));
-      console.log("edge we are tracking", collE);
+
       const edgeColl = collE.find(({ edge, wall }) => {
         const { xa, ya, xb, yb } = edge;
         const da = distance(xa, ya, xc, yc);
@@ -927,7 +975,6 @@
       if (!current && s.collision) {
         // const baseSlope = slope(s.collision.edge);
         // if (Object.is(baseSlope, 0) && s.gearDown) s.isLanded = true;
-        // const clPos = collisionPosition(s.collision.edge, s.position, s.velocity, s.gearDown && Object.is(baseSlope, 0) ? shipRadius + 1 : shipRadius);
 
         let posP;
         if (s.collision.corner) {