Only render acute triangles

html/images/space.svg

@@ -31,6 +31,16 @@
       fill: yellow;
     }
 
+    #frames {
+      padding: 1px;
+      font-size: 4pt;
+      font-family: courier;
+    }
+
+    #lines {
+      opacity: 0.5;
+    }
+
     #lines line {
       stroke: limegreen;
       stroke-width: 0.5px;
@@ -54,8 +64,8 @@
   <g>
     <g class="hitbox">
       <g class="ship">
-        <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
-        <circle cx="0" cy="0" r="5"/>
+        <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
+        <circle id="body" cx="0" cy="0" r="5"/>
       </g>
     </g>
 
@@ -101,7 +111,7 @@
     const fps = document.querySelector("#fps");
     const info = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
-    const gun = ship.querySelector('line');
+    const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("circle");
 
     const hitbox = document.querySelector(".hitbox");
@@ -157,6 +167,7 @@
       const delim = ' ';
       const className = 'clockwise-orientation';
       const visible = [];
+      const PI = Math.PI / 2;
 
       triangles.forEach(t => {
         const attr = t.getAttribute('points').split(delim);
@@ -169,14 +180,28 @@
         const pos = `${positionX},${positionY}`;
         const cwOrientation = det < 0;
         const isClockwise = det < 0;
+        let isAcute = false;
+
+        if (isClockwise) {
+          const [[ax, ay], [bx, by], [shipx, shipy]] =
+            t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));
+
+          const da = distance(ax, ay, shipx, shipy);
+          const db = distance(bx, by, shipx, shipy);
+          const dc = distance(ax, ay, bx, by);
+
+          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));
+          isAcute = alpha < PI && beta < PI;
+        }
 
         if (pos !== attr.pop()) {
           attr.push(pos);
           t.setAttribute('points', attr.join(delim));
         }
 
-        t.classList[isClockwise ? "add" : "remove"](className);
-        if (isClockwise) visible.push(t);
+        t.classList[isClockwise && isAcute ? "add" : "remove"](className);
+        if (isClockwise && isAcute) visible.push(t);
 
         // return isClockwise ? [t, ...acc] : acc;
         // i think i can also discard obtuse triangles?
@@ -319,7 +344,6 @@
         frameCount++;
       }
 
-
       let degrees = getRotate(gun);
 
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;