Inverse?

html/images/space.svg

@@ -60,6 +60,12 @@
     #legs {
       display: none;
     }
+
+    .wall.inverse {
+      stroke: blue;
+      fill: white;
+      fill-opacity: 0.5;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -73,7 +79,10 @@
     </g>
   </g>
 
-  <polygon class="wall" points="20,20 40,20 40,40 20,40" />
+  <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
+  <polygon class="wall" points="10,10 20,10 20,20 10,20" />
+  <polygon class="wall inverse" points="-40,-40 40,-40 40,40 -40,40" />
+  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
   <!-- <polygon class="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> -->
   <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
@@ -133,7 +142,7 @@
     const halfPi = Math.PI / 2;
     const maxSpeed = 100;
 
-    const drawCollisionLines = false;
+    const drawCollisionLines = true;
 
     let previous, zero, frameCount = 0;
     // let position = [0, 0]; // meters
@@ -656,6 +665,7 @@
     svg.addEventListener("pointermove", function({ clientX, clientY }) {
       pointerPt.x = clientX;
       pointerPt.y = clientY;
+      // https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
       const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
 
       if (bg.isPointInFill(svgP)) {