Refactor to find starting edges dynamically

html/images/space.svg

@@ -91,13 +91,11 @@
       </g>
     </g>
 
-    <polygon id="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
+    <polygon id="wall" points="20,20 40,20 40,40 20,40" />
-    <!-- <rect id="rect1" x="30" y="30" width="20" height="20"/> -->
+    <!-- <polygon id="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
-    <g id="triangles">
-    </g>
-    <g id="lines">
-    </g>
 
+    <g id="triangles"></g>
+    <g id="lines"></g>
     <g id="bullets"></g>
   </g>
 
@@ -107,13 +105,6 @@
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
     </div>
 
-    <!-- <button id="turn-left" xmlns="http://www.w3.org/1999/xhtml">🡐</button> -->
-    <!-- <button id="move-backward" xmlns="http://www.w3.org/1999/xhtml">🡑</button> -->
-    <!-- <button id="move-forward" xmlns="http://www.w3.org/1999/xhtml">🡓</button> -->
-    <!-- <button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">🡒</button> -->
-    <!-- <button id="rotate-ccw" xmlns="http://www.w3.org/1999/xhtml">⟲</button> -->
-    <!-- <button id="rotate-cw" xmlns="http://www.w3.org/1999/xhtml">⟳</button> -->
-    <!-- <button id="fire" xmlns="http://www.w3.org/1999/xhtml">Fire</button> -->
     <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
   </foreignObject>
 
@@ -135,30 +126,19 @@
     const maxSpeed = 100;
     let started = false;
 
+    const svg = document.querySelector('svg');
     const fps = document.querySelector("#fps");
     const time = document.querySelector("#time");
     const info = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("circle");
-
     const hitbox = document.querySelector(".hitbox");
     const bulletsContainer = document.querySelector("#bullets");
-
-    const leftTurnButton = document.querySelector("#turn-left");
-    const rightTurnButton = document.querySelector("#turn-right");
-    const reverseMoveButton = document.querySelector("#move-backward");
-    const forwardMoveButton = document.querySelector("#move-forward");
-
-    const rotateCWButton = document.querySelector("#rotate-cw");
-    const rotateCCWButton = document.querySelector("#rotate-ccw");
-
-    const fireButton = document.querySelector("#fire");
-    const pt = document.querySelector('svg').createSVGPoint();
-    const cornerPt = document.querySelector('svg').createSVGPoint();
     const wall = document.querySelector('#wall');
 
-    const startingTrianglePts = ["-20,20 20,20", "20,20 20,-20", "20,-20 -10,-30"];
+    const pt = svg.createSVGPoint();
+    const cornerPt = svg.createSVGPoint();
 
     const points = wall.getAttribute('points').split(' ').map(coords => {
       const [x, y] = coords.split(',');
@@ -198,9 +178,39 @@
       });
     }
 
-    drawTriangles(triangleContainer, trianglePts, [0, 0]);
+    drawTriangles(triangleContainer, trianglePts, position);
     const triangles = triangleContainer.querySelectorAll('polygon');
 
+    // Triangle has a clockwise orientation
+    function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
+      // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
+      // Determinant for a convex polygon
+      const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
+      return det < 0;
+    }
+
+    function isAcute([xa, ya], [xb, yb], [xc, yc]) {
+      const da = distance(xa, ya, xc, yc);
+      const db = distance(xb, yb, xc, yc);
+      const dc = distance(xa, ya, xb, yb);
+
+      // https://en.wikipedia.org/wiki/Law_of_cosines
+      // Solve for angles alpha and beta with inverse cosine (arccosine)
+      const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
+      const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
+      return alpha < halfPi && beta < halfPi;
+    }
+
+    function findEdges(verts, [xc, yc]) {
+      return verts.reduce((acc, [a, b]) => {
+        const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
+        // return isFound ? [...acc, `${xa},${ya} ${xb},${yb}`] : acc;
+        return isFound ? [...acc, `${a[0]},${a[1]} ${b[0]},${b[1]}`] : acc;
+      }, []);
+    }
+
+    const collisionEdges = findEdges(trianglePts, position);
+
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
@@ -455,7 +465,7 @@
         const x2 = l.getAttribute('x2');
         const y2 = l.getAttribute('y2');
         const str = `${x1},${y1} ${x2},${y2}`;
-        if (mappedEdges.includes(str) && (lineContainer.childElementCount < 4 || !startingTrianglePts.includes(str))) {
+        if (mappedEdges.includes(str) && (lineContainer.childElementCount < 4 || !collisionEdges.includes(str))) {
           l.remove();
         }
       });