WIP: draw normal lines

html/images/space.svg

@@ -63,10 +63,6 @@
       display: none;
     }
 
-    line:not(#cannon) {
-      stroke: green;
-    }
-
     .wall {
       opacity: 0.5;
     }
@@ -74,6 +70,21 @@
     .wall.inverse {
       fill: gray;
     }
+
+    line:not(#cannon) {
+      stroke: green;
+      stroke-width: 0.5px;
+    }
+
+    line#velocity-indicator {
+      stroke: blue;
+      /* stroke-width: 1px; */
+    }
+
+    line#acceleration-indicator {
+      stroke: maroon;
+      /* stroke-width: 0.5px; */
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -83,6 +94,8 @@
   <g class="ship">
     <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
     <circle id="body" cx="0" cy="0" r="5"/>
+    <line id="velocity-indicator" x1="0" y1="0" x2="0" y2="0"/>
+    <line id="acceleration-indicator" x1="0" y1="0" x2="0" y2="0"/>
     <g id="legs">
       <path d="M 3 2 l 2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
       <path d="M -3 2 l -2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
@@ -113,6 +126,7 @@
 
   <g id="triangles"></g>
   <g id="edges"></g>
+  <g id="lines"></g>
   <g id="bullets"></g>
 
   <foreignObject x="-200" y="-150" width="100%" height="100%">
@@ -161,9 +175,11 @@
     let acceleration; // meters per second per second
     let rotate = 0;
 
+    let mult = 10;
+
     const s = {
       position: { x: 0, y: 0 },
-      velocity: { x: 0, y: 0 },
+      velocity: { x: 0.25 * mult, y: 1 * mult },
       acceleration: { x: 0, y: 0 },
       rotate: 0,
       collision: null,
@@ -190,7 +206,10 @@
     const walls = document.querySelectorAll('.wall');
     const bulletsContainer = document.querySelector("#bullets");
     const triangleContainer = document.querySelector('#triangles');
+    const linesContainer = document.querySelector("#lines");
     const edgeContainer = document.querySelector('#edges');
+    const velIndic = document.querySelector('#velocity-indicator');
+    const acclIndic = document.querySelector('#acceleration-indicator');
 
     const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
@@ -517,7 +536,7 @@
       return edge || actualCorner;
     }
 
-    function updateShip(s, elapsed) {
+    function updateShip(s, elapsed, collE) {
       const degrees = getRotate(gun);
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
       else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
@@ -542,6 +561,10 @@
       //
       // if (velocity[1] > maxSpeed) velocity[1] = maxSpeed;
       // else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed
+      velIndic.setAttribute('x2', s.velocity.x);
+      velIndic.setAttribute('y2', s.velocity.y);
+      acclIndic.setAttribute('x2', s.acceleration.x);
+      acclIndic.setAttribute('y2', s.acceleration.y);
 
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
@@ -550,7 +573,9 @@
       let { x, y } = s.position;
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
       let [xc, yc] = position;
-      s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
+      // const collE = getCollisionEdges(edgeszz, position);
+      // console.log("collision edges", collE);
+      s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE);
 
       // if (s.collision) {
         // find final position of ship
@@ -615,7 +640,7 @@
       //   s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
         // console.log("ship landed", s, "edge", s.collision.edge.ya);
       if (s.collision) {
-        console.log("a");
+        // console.log("a");
         s.velocity = { x: 0, y: 0 };
         const baseSlope = slope(s.collision.edge);
         const normalSlope = 1 / -baseSlope;
@@ -627,21 +652,20 @@
         el.setAttribute('y1', foot.y);
         el.setAttribute('x2', s.position.x);
         el.setAttribute('y2', s.position.y);
-
-        console.log("foot", foot, "line", el);
-        const [posX, posY] = [5 * Math.sin(radAngle), 5 * Math.cos(radAngle)];
+        // console.log("foot", foot, "line", el, "length", el.getTotalLength());
+        svg.appendChild(el);
         const collPt = el.getPointAtLength(5);
         // let l = drawLine(foot.x, foot.y, foot.x - posX, foot.y - posY);
-        let l = drawLine(foot.x, foot.y, foot.x - posY, foot.y - posX);
+        // let l = drawLine(foot.x, foot.y, foot.x - posY, foot.y - posX);
         // s.position = { x: foot.x - posY, y: foot.y - posX };
         s.position = { x: collPt.x, y: collPt.y };
-        console.log("line length", el.getTotalLength(), el, s.position);
-        console.log("line length", l.getTotalLength(), l, foot.x - posY, foot.y - posX);
+        // console.log("ship position", s.position);
+        // console.log("line length", l.getTotalLength(), l, foot.x - posY, foot.y - posX);
 
 
         s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
       } else {
-        console.log("c");
+        // console.log("c");
 
         s.position = { x: positionX, y: positionY }
         s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
@@ -667,6 +691,45 @@
       });
     }
 
+    function updateLines(elapsed, edges) {
+      // console.log("velocity", s.velocity);
+      // console.log("collision", s.collision);
+      // console.log("edges", edges);
+
+      // const edgeIds = [...linesContainer.children].map(c => c.id);
+      const edgeIds = edges.map(({edge: { xa, ya, xb, yb }}) => `normal${xa}-${ya}-${xb}-${yb}`);
+      const nodes = [...linesContainer.children];
+
+      // console.log("EDGE IDS", edgeIds, "NODES", nodes);
+
+      nodes.forEach(n => {
+        if (!edgeIds.includes(n.id)) n.remove();
+      });
+
+      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 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);
+        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);
+        }
+
+        return el;
+      });
+    }
+
     function init(edgePts) {
       started = false;
       position = [0, 0]; // meters
@@ -712,9 +775,13 @@
       }
 
       // position = updateShip(s, elapsed);
-      updateShip(s, elapsed);
+      const collE = getCollisionEdges(edgeszz, position);
+
+      updateShip(s, elapsed, collE);
+      console.log("S POSITION", s.position);
       updateBullets(elapsed);
       // updateEdges(position);
+      updateLines(elapsed, collE);
       if (drawCollisionLines) updateTriangles(position);
 
       // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));