Use a class instead of changing direct styles

html/images/space.svg

@@ -38,10 +38,15 @@
     }
 
     #lines polygon {
-      fill: white;
-      stroke: teal;
       fill-opacity: 0.2;
       stroke-width: 0.5px;
+      fill: none;
+      stroke: none;
+    }
+
+    #lines polygon.clockwise-orientation {
+      fill: white;
+      stroke: red;
     }
   </style>
 
@@ -146,17 +151,27 @@
 
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
+      const className = 'clockwise-orientation';
 
       triangles.forEach(triangle => {
-        const attr = triangle.getAttribute('points').split(delim)
+        const attr = triangle.getAttribute('points').split(delim);
         const [[xa, ya], [xb, yb], [xc, yc]] = attr.map(t => t.split(',').map(n => +n));
         const det = (xb - xa) * (yc - ya) - (xc - xa) * (yb - ya);
-        attr.pop();
+        const pos = `${positionX},${positionY}`;
-        attr.push(`${positionX},${positionY}`);
+        const list = triangle.classList;
+        const clockwiseOrientation = det < 0;
+
+        if (pos !== attr.pop()) {
+          attr.push(pos);
           triangle.setAttribute('points', attr.join(delim));
-        triangle.style.fill = det < 0 ? "white" : "none";
+        }
-        triangle.style.stroke = det < 0 ? "red" : "none";
+
+        clockwiseOrientation ? list.add(className) : list.remove(className);
+
         // i think i can also discard obtuse triangles?
+
+        // if all the triangles are obtuse, i only need to check the nearest corner for a collision
+        // otherwise, i need to check only the acute triangles
       });
     }