WIP: add a circle to the end of the line

html/images/space.svg

@@ -85,6 +85,10 @@
       stroke: maroon;
       /* stroke-width: 0.5px; */
     }
+
+    #lines circle {
+      fill: white;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -175,11 +179,12 @@
     let acceleration; // meters per second per second
     let rotate = 0;
 
-    let mult = 10;
+    let mult = 20;
 
     const s = {
       position: { x: 0, y: 0 },
-      velocity: { x: 0.25 * mult, y: 1 * mult },
+      // velocity: { x: 0.25 * mult, y: 1 * mult },
+      velocity: { x: 0, y: 1 * mult },
       acceleration: { x: 0, y: 0 },
       rotate: 0,
       collision: null,
@@ -536,6 +541,10 @@
       return edge || actualCorner;
     }
 
+    function lineIntxnPt(l1, l2) {
+      return { x: 0, y: 0 };
+    }
+
     function updateShip(s, elapsed, collE) {
       const degrees = getRotate(gun);
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
@@ -708,25 +717,30 @@
 
       edges.forEach(({ edge: { xa, ya, xb, yb }}) => {
         const id = `normal${xa}-${ya}-${xb}-${yb}`;
-        // console.log("ID", id);
-        const n = linesContainer.querySelector(`#${id}`);
-        // console.log("NNNNNNNNNNNNNNNN", n);
-        const el = n ? n : document.createElementNS(namespaceURIsvg, 'line');
+        const g = linesContainer.querySelector(`#${id}`) || document.createElementNS(namespaceURIsvg, 'g');
+        const el = g.querySelector('line') || document.createElementNS(namespaceURIsvg, 'line');
+        const star = g.querySelector('circle') || document.createElementNS(namespaceURIsvg, 'circle');
+        star.setAttribute('r', 1);
         const baseSlope = slope({ xa, ya, xb, yb });
-        console.log("base slope", baseSlope);
         const intx = perpIntxn(baseSlope, xa, ya, s.position.x, s.position.y);
-        console.log(intx);
+        const edge = { xa: -10, ya: 20, xb: 10, }
+        const baseVelIntxn = lineIntxnPt({xa: 0, ya: 0, xb: 0, yb: 0}, {xa: 0, ya: 0, xb: 0, yb: 0});
         el.setAttribute('x2', intx.x);
         el.setAttribute('y2', intx.y);
         el.setAttribute('x1', s.position.x);
         el.setAttribute('y1', s.position.y);
 
-        if (!n) {
-          el.setAttribute('id', `normal${xa}-${ya}-${xb}-${yb}`);
-          linesContainer.appendChild(el);
-        }
+        // circle should be at the point the velocity line crosses the edge,
+        // not the normal line
+        // green line should alwasy cross blue line at length = 5, not at ship position
+        star.setAttribute('cx', intx.x);
+        star.setAttribute('cy', intx.y);
 
-        return el;
+        el.setAttribute('id', `normal${xa}-${ya}-${xb}-${yb}`);
+        g.appendChild(el);
+        g.appendChild(star);
+        linesContainer.appendChild(g);
+        return g;
       });
     }
 
@@ -883,6 +897,9 @@
             rotate += 1;
           }
           break;
+        case "KeyP": // Pause
+          started = !started;
+          break;
       }
     });
 
@@ -952,6 +969,8 @@
       const svgP = pointerPt.matrixTransform(svg.getScreenCTM().inverse());
 
       if (bg.isPointInFill(svgP)) {
+        console.log(Math.trunc(svgP.x), Math.trunc(svgP.y));
+
         xp.innerText = Math.trunc(svgP.x);
         yp.innerText = Math.trunc(svgP.y);
       }