WIP

html/images/space.svg

@@ -87,7 +87,7 @@
     }
 
     #lines circle {
-      fill: white;
+      fill: purple;
     }
   </style>
 
@@ -541,8 +541,12 @@
       return edge || actualCorner;
     }
 
-    function lineIntxnPt(l1, l2) {
-      return { x: 0, y: 0 };
+    function lineIntxnPt({ x1, y1, x2, y2 }, {x1: x3, y1: y3, x2: x4, y2: y4 }) {
+      // https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
+      const x = ((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
+      const y = ((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
+      // const y = (() * () - () * ()) / (() * () - () * ());
+      return { x: x, y: y };
     }
 
     function updateShip(s, elapsed, collE) {
@@ -580,12 +584,15 @@
       // console.log("ship position", s.position);
 
       let { x, y } = s.position;
+      console.log("current position", x, y);
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
       let [xc, yc] = position;
       // const collE = getCollisionEdges(edgeszz, position);
       // console.log("collision edges", collE);
       s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE);
 
+      console.log("future position", xc, yc);
+
       // if (s.collision) {
         // find final position of ship
 
@@ -661,17 +668,28 @@
         el.setAttribute('y1', foot.y);
         el.setAttribute('x2', s.position.x);
         el.setAttribute('y2', s.position.y);
+
+        // console.log("future position", el, el.getTotalLength());
+
+
+        el.setAttribute('x2', xc);
+        el.setAttribute('y2', yc);
+
+        // console.log("current position", el, el.getTotalLength());
+
+
         // console.log("foot", foot, "line", el, "length", el.getTotalLength());
         svg.appendChild(el);
+        // console.log(el, el.getTotalLength());
         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);
         // s.position = { x: foot.x - posY, y: foot.y - posX };
-        s.position = { x: collPt.x, y: collPt.y };
+        // s.position = { x: collPt.x, y: collPt.y };
         // console.log("ship position", s.position);
         // console.log("line length", l.getTotalLength(), l, foot.x - posY, foot.y - posX);
 
-
+        s.position = { x: xc, y: yc }
         s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
       } else {
         // console.log("c");
@@ -700,7 +718,7 @@
       });
     }
 
-    function updateLines(elapsed, edges) {
+    function updateLines(elapsed, edges, currentPos, futurePos) {
       // console.log("velocity", s.velocity);
       // console.log("collision", s.collision);
       // console.log("edges", edges);
@@ -715,6 +733,8 @@
         if (!edgeIds.includes(n.id)) n.remove();
       });
 
+      console.log("update lines", currentPos, futurePos);
+
       edges.forEach(({ edge: { xa, ya, xb, yb }}) => {
         const id = `normal${xa}-${ya}-${xb}-${yb}`;
         const g = linesContainer.querySelector(`#${id}`) || document.createElementNS(namespaceURIsvg, 'g');
@@ -723,18 +743,44 @@
         star.setAttribute('r', 1);
         const baseSlope = slope({ xa, ya, xb, yb });
         const intx = perpIntxn(baseSlope, xa, ya, s.position.x, s.position.y);
-        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});
+        const baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, s.position.x, s.position.y);
+
+        // make sure this is using the calculated future velocity, not the current
+        const baseLine = { x1: xa, y1: ya, x2: xb, y2: yb };
+
+        const velocityLine = {
+          x1: s.position.x,
+          y1: s.position.y,
+          x2: s.position.x + s.velocity.x,
+          y2: s.position.y + s.velocity.y
+        };
+
+        const baseVelIntxn = lineIntxnPt(baseLine, velocityLine);
+        const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y , baseVelIntxn.x, baseVelIntxn.y);
+        const normalSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, s.position.x, s.position.y);
+        console.log("distance", distance(baseNrmlIntxn.x, baseNrmlIntxn.y , baseVelIntxn.x, baseVelIntxn.y));
+        const theta = Math.atan(normalSegLength / baseSegLength);
+        console.log("theta", theta);
+        // const contactPos = { x: Math.acos() }
+        const h = 5 / Math.sin(theta);
+        console.log("h", 5 / Math.sin(theta));
+        console.log("cos(theta)", Math.cos(theta));
         el.setAttribute('x2', intx.x);
         el.setAttribute('y2', intx.y);
+        el.setAttribute('x1', currentPos.x);
+        el.setAttribute('y1', currentPos.y);
+
+        console.log("normal line length at current position", el.getTotalLength());
+        el.setAttribute('x1', futurePos.x);
+        el.setAttribute('y1', futurePos.y);
+
+        console.log("normal line length at future position", el.getTotalLength());
+
         el.setAttribute('x1', s.position.x);
         el.setAttribute('y1', s.position.y);
 
-        // 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);
+        star.setAttribute('cx', s.position.x);
+        star.setAttribute('cy', baseVelIntxn.y - h);
 
         el.setAttribute('id', `normal${xa}-${ya}-${xb}-${yb}`);
         g.appendChild(el);
@@ -768,6 +814,8 @@
     }
 
     function animate(timestamp) {
+      console.log("current timestamp", timestamp, "previous", previous);
+
       const elapsed = timestamp - previous;
       const delta = timestamp - zero;
       let degrees = getRotate(gun);
@@ -788,14 +836,16 @@
         frameCount++;
       }
 
+
       // position = updateShip(s, elapsed);
       const collE = getCollisionEdges(edgeszz, position);
 
+      const { x, y } = s.position;
       updateShip(s, elapsed, collE);
-      console.log("S POSITION", s.position);
+      // console.log("S POSITION", s.position);
       updateBullets(elapsed);
       // updateEdges(position);
-      updateLines(elapsed, collE);
+      updateLines(elapsed, collE, {x, y}, {x: s.position.x, y: s.position.y});
       if (drawCollisionLines) updateTriangles(position);
 
       // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));