From d45575db7c941092efc1282053312a12b8c02423 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Fri, 2 Jan 2026 09:31:24 -0800
Subject: [PATCH] WIP: forward collision points

---
 html/images/space.svg | 86 ++++++++++++++++++-------------------------
 1 file changed, 36 insertions(+), 50 deletions(-)

diff --git a/html/images/space.svg b/html/images/space.svg
index 766b77b..ecb4e78 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -112,8 +112,11 @@
   <!-- <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="-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,-50 3,-50 3,-60 10,-60" /> -->
+  <!-- <polygon class="wall" points="-10,50 -3,50 -3,60 -10,60" /> -->
+
+  <polygon class="wall" points="20,-50 10,-50 10,-60 20,-60" />
+  <polygon class="wall" points="-20,50 -10,50 -10,60 -20,60" />
 
   <!-- <polygon class="wall" points="-10,20 10,10 10,20" /> -->
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
@@ -190,11 +193,12 @@
 
     const s = {
       position: { x: 0, y: 0 },
-      // velocity: { x: 0, y: 0 },
-      velocity: { x: 1, y: 1 },
+      // 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: 0, y: 10 },
+      velocity: { x: -10, y: 0 },
       // velocity: { x: 10, y: 0 },
       // velocity: { x: 0, y: -5000 },
 
@@ -405,83 +409,65 @@
       // const a = { x: -100, y: 0 };
       // const b = { x: 100, y: 0 };
 
-      console.log("VELOCITY", velocity);
+      // console.log("VELOCITY", velocity);
 
       const { x: vx, y: vy } = velocity;
 
-      console.log("velocity", velocity, "position", position);
+      // console.log("velocity", velocity, "position", position);
       let perppts;
 
-      if (vx === 0 && yx === 0) {
+      if (vx === 0 && vy === 0) {
         // none
       } else if (vx === 0 && vy > 0) {
+        perppts = { a: { x: x1 - 1, y: y1 }, b: { x: x1 + 1, y: y1 }};
       } else if (vx === 0 && vy < 0) {
+        perppts = { a: { x: x1 + 1, y: y1 }, b: { x: x1 - 1, y: y1 }};
       } else if (vy === 0 && vx > 0) {
+        perppts = { a: { x: x1, y: y1 + 1 }, b: { x: x1, y: y1 - 1 }};
       } else if (vy === 0 && vx < 0) {
+        perppts = { a: { x: x1, y: y1 - 1 }, b: { x: x1, y: y1 + 1 }};
       } 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) {
+        const vslope = vy / vx;
+        const pslope = 1 / -vslope;
+        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) {
+        const vslope = vy / vx;
+        const pslope = 1 / -vslope;
         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) {
+        const vslope = vy / vx;
+        const pslope = 1 / -vslope;
+        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 {
         //
       }
 
-
-      // 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 det > 0;
         });
 
         return [...acc, ...filtered];