WIP: perpendicular line

html/images/space.svg

@@ -113,6 +113,7 @@
   <!-- <polygon class="wall" points="-10,-10 -20,-10 -20,-20 -10,-20" /> -->
   <!-- <polygon class="wall" points="-50,-50 -60,-50 -60,-60 -50,-60" /> -->
   <polygon class="wall" points="10,-50 3,-50 3,-60 10,-60" />
+  <polygon class="wall" points="-10,50 -3,50 -3,60 -10,60" />
 
   <!-- <polygon class="wall" points="-10,20 10,10 10,20" /> -->
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
@@ -190,7 +191,12 @@
     const s = {
       position: { x: 0, y: 0 },
       // velocity: { x: 0, y: 0 },
-      velocity: { x: 0, y: -5000 },
+      velocity: { x: 1, y: 1 },
+      // velocity: { x: 10, y: -10 },
+      // velocity: { x: -10, y: 10 },
+      // velocity: { x: 0, y: 10 },
+      // velocity: { x: 10, y: 0 },
+      // velocity: { x: 0, y: -5000 },
 
       // velocity: { x: 0.25 * mult, y: 1 * mult },
       // velocity: { x: 0, y: 1 * mult },
@@ -393,6 +399,95 @@
       }, []);
     }
 
+    function getForwardCollisionCorners(walls, position, velocity) {
+      const { x: x1, y: y1 } = position;
+      const { x: x2, y: y2 } = velocity;
+      // const a = { x: -100, y: 0 };
+      // const b = { x: 100, y: 0 };
+
+      console.log("VELOCITY", velocity);
+
+      const { x: vx, y: vy } = velocity;
+
+      console.log("velocity", velocity, "position", position);
+      let perppts;
+
+      if (vx === 0 && yx === 0) {
+        // none
+      } else if (vx === 0 && vy > 0) {
+      } else if (vx === 0 && vy < 0) {
+      } else if (vy === 0 && vx > 0) {
+      } else if (vy === 0 && vx < 0) {
+      } else if (vy > 0 && vx > 0) {
+        const vslope = vy / vx;
+        const pslope = 1 / -vslope;
+        // Point-slope line equation
+        // y − y1 = m(x − x1)
+        // y − y1 = mx - mx1
+        // y = mx - mx1 + y1
+        const pya = pslope * (x1 + 1) - pslope * x1 + y1;
+        const pyb = pslope * (x1 - 1) - pslope * x1 + y1;
+
+        perppts = { a: { x: x1 + 1, y: pya }, b: { x: x1 - 1, y: pyb }};
+      } else if (vy > 0 && vx < 0) {
+      } else if (vy < 0 && vx > 0) {
+      } else if (vy < 0 && vx < 0) {
+
+      } else {
+        //
+      }
+
+
+      // const slopev = slope({ xa: x1, ya: y1, xb: x1 + x2, yb: y1 + y2 });
+      // console.log("SLOPE", slopev);
+      // let slopeperp;
+      //
+      // if (slopev === -Infinity) {
+      //   slopeperp = 0;
+      // } else if (slopev === Infinity) {
+      //   slopeperp = -0;
+      // } else if (Object.is(slopev, -0)) {
+      //   slopeperp = Infinity;
+      // } else if (slopev === 0) {
+      //   slopeperp = -Infinity;
+      // } else {
+      //   slopeperp = 1 / -slopev;
+      // }
+      //
+      //
+      // if (Object.is(slopeperp, 0)) {
+      //   perppts = { a: { x: x1 - 1, y: y1 }, b: { x: x1 + 1, y: y1 }};
+      // } else if (Object.is(slopeperp, -0)) {
+      //   perppts = { a: { x: x1 + 1, y: y1 }, b: { x: x1 - 1, y: y1 }};
+      // } else if (slopeperp === Infinity) {
+      //   perppts = { a: { x: x1, y: y1 + 1 }, b: { x: x1, y: y1 - 1 }};
+      // } else if (slopeperp === -Infinity) {
+      //   perppts = { a: { x: x1, y: y1 - 1 }, b: { x: x1, y: y1 + 1 }};
+      // } else {
+      //   if (y2 < 0)
+      //     perppts = { a: { x: x1 - 1, y: y1 }, b: { x: x1 + 1, y: y1 }};
+      //   else
+      //     perppts = { a: { x: x1 + 1, y: y1 }, b: { x: x1 - 1, y: y1 }};
+      // }
+
+
+      const { a, b } = perppts;
+      drawLine(a.x, a.y, b.x, b.y);
+
+      return walls.reduce((acc, w) => {
+        // console.log(w.corners);
+        const filtered = w.corners.filter(c => {
+          // https://stackoverflow.com/a/1560510
+          // position = sign((Bx - Ax) * (Y - Ay) - (By - Ay) * (X - Ax))
+
+          const det = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+          return det < 0;
+        });
+
+        return [...acc, ...filtered];
+      }, []);
+    }
+
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
@@ -581,6 +676,9 @@
     }
 
     function cornerCollisionPosition({ x: x1, y: y1 }, { x: x2, y: y2 }) {
+      // todo1: i only want the collisions ahead, not behind
+      // todo2: how do we tell if we've passed the collision point already?
+
       const diffx = x2;
       const diffy = y2;
       const detv = x2 * y1 - y2 * x1;
@@ -672,20 +770,23 @@
       const changeY = 0.001 * elapsed * velocityY;
 
       let { x, y } = s.position;
-      console.log("current position", x, y);
+      // console.log("current position", x, y);
       // console.log("elapsed", elapsed, "changeX", changeX, "changeY", changeY);
       // let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
       let position = [positionX, positionY] = [changeX + x, changeY + y];
       let [xc, yc] = position;
-      console.log("future position", xc, yc);
+      // console.log("future position", xc, yc);
 
       const collE = getCollisionEdges(edgeszz, position);
       // console.log("position", { x, y }, "velocity", s.velocity);
       const collC = getCollisionCorners(ws, { x, y }, s.velocity);
+      const fCollC = getForwardCollisionCorners(ws, { x, y }, s.velocity);
 
-      console.log("collision corners", collC);
+
+      // console.log("collision corners", collC);
+      console.log("forward collision corners", fCollC);
       ccps = collC.map(cornerCollisionPosition({ x, y }, s.velocity));
-      console.log("corner collision position", ccps);
+      // console.log("corner collision position", ccps);
 
       current = s.collision;
       s.collision = detectCollisions(position, allWallCorners, collE);