WIP

html/images/space.svg

@@ -72,7 +72,6 @@
     }
 
     line:not(#cannon) {
-      stroke: green;
       stroke-width: 0.5px;
     }
 
@@ -224,21 +223,8 @@
 
     let mult = 10000;
 
-    const s = {
+    const ship = document.querySelector(".ship");
-      position: { x: 0, y: 0 },
+    const s = { node: ship };
-      velocity: { x: 0, y: 0 },
-      // velocity: { x: -100, y: -100 },
-
-      // velocity: { x: 2, y: 7 },
-      // velocity: { x: 2*mult, y: 7*mult },
-      // acceleration: { x: 5, y: 7 },
-      acceleration: { x: 0, y: 0 },
-      rotate: 0,
-      collision: null,
-      isLanded: false,
-      gearDown: false,
-      node: null
-    };
 
     let friction = 0;
     let rotationSpeed = 0.25;
@@ -251,8 +237,6 @@
     const fps = document.querySelector("#fps");
     const time = document.querySelector("#time");
     const debug = document.querySelector("#debug");
-    const ship = document.querySelector(".ship");
-    s.node = ship;
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("#body");
     const shipRadius = +shipBody.getAttribute('r');
@@ -575,12 +559,13 @@
       return { x: isx, y: isy };
     }
 
-    function drawLine(xa, ya, xb, yb) {
+    function drawLine(xa, ya, xb, yb, color = "black") {
       const el = document.createElementNS(namespaceURIsvg, 'line');
       el.setAttribute('x1', xa);
       el.setAttribute('y1', ya);
       el.setAttribute('x2', xb);
       el.setAttribute('y2', yb);
+      el.setAttribute('stroke', color);
       svg.appendChild(el);
       return el;
     }
@@ -652,8 +637,7 @@
         if (d <= radius) return true;
 
         const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
-        const slopeps = slope(positionSeg);
+        const posNormIntxn = perpIntxn(slope(positionSeg), x, y, c.corner.x, c.corner.y);
-        const posNormIntxn = perpIntxn(slopeps, x, y, c.corner.x, c.corner.y);
         const cornerSeg = { xa: c.corner.x, ya: c.corner.y, xb: posNormIntxn.x, yb: posNormIntxn.y };
 
         const { x: x0, y: y0 } = c.corner;
@@ -675,8 +659,8 @@
           // (...or about equal, notwithstanding rounding errors)
           const sCollisionPt = [xs, ys];
           const tCollisionPt = [xt, yt];
-          drawCircle(...sCollisionPt, "red");
+          // drawCircle(posNormIntxn.x, posNormIntxn.y, "red");
-          drawCircle(...tCollisionPt, "blue");
+          // drawCircle(...tCollisionPt, "blue");
         }
 
         return s >= 0 && roundedT <= 1;
@@ -714,23 +698,35 @@
       };
     }
 
-    function cornerContactPosition(xc, yc, x, y, corner, radius) {
+    function cornerContactPosition(xc, yc, x, y, corner, cLength) {
       const diffx = xc - x;
       const diffy = yc - y;
-      const detv = xc * y - yc * x;
+      // console.log("xc", xc, "yc", yc, "x", x, "y", y);
-      const dv = Math.sqrt(diffy ** 2 + diffx ** 2);
+      const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
-      const slopep = slope({ xa: x, ya: y, xb: xc, yb: yc });
+      const posNormIntxn = perpIntxn(slope(positionSeg), x, y, corner.x, corner.y);
-      const posNormIntxn = perpIntxn(slopep, x, y, corner.x, corner.y);
-      const d = Math.abs(diffy * corner.x - diffx * corner.y + detv) / dv;
-      const b = Math.sqrt(Math.max(radius, d) ** 2 - Math.min(radius, d) ** 2);
 
-      const cl = document.createElementNS(namespaceURIsvg, 'line');
+      const posSegLength = Math.sqrt(diffy ** 2 + diffx ** 2);
-      cl.setAttribute('x1', posNormIntxn.x);
+      const detp = xc * y - yc * x;
-      cl.setAttribute('y1', posNormIntxn.y);
+      // console.log("detp", detp, "posSegLength", posSegLength);
-      cl.setAttribute('x2', x);
-      cl.setAttribute('y2', y);
 
-      return cl.getPointAtLength(b);
+      // the length of the "corner segment"
+      const aLength = distance(corner.x, corner.y, posNormIntxn.x, posNormIntxn.y);
+      // where did I get this calculation? it also works but how??
+      // const aLengthAlso = Math.abs(diffy * corner.x - diffx * corner.y + detp) / posSegLength;
+
+      // console.log("aLength", aLength, "aLengthAlso", aLengthAlso);
+
+      // drawLine(posNormIntxn.x, posNormIntxn.y, corner.x, corner.y, "red");
+      const bLength = Math.sqrt(Math.abs(cLength ** 2 - aLength ** 2));
+      // console.log("bLength", bLength);
+
+      const intxnSeg = document.createElementNS(namespaceURIsvg, 'line');
+      intxnSeg.setAttribute('x1', posNormIntxn.x);
+      intxnSeg.setAttribute('y1', posNormIntxn.y);
+      intxnSeg.setAttribute('x2', x);
+      intxnSeg.setAttribute('y2', y);
+
+      return intxnSeg.getPointAtLength(bLength);
     }
 
     function edgeContactPosition(xc, yc, x, y, edge, radius) {
@@ -899,15 +895,24 @@
 
     function init(edgePts) {
       started = false;
-      position = [0, 0]; // meters
+      const mult = 10000;
-      velocity = [0, 0]; // meters per second
-      acceleration = [0, 0]; // meters per second per second
-      rotate = 0;
 
-      [...edgeContainer.children].forEach(c => c.remove());;
+      s.position = { x: 2, y: 7 };
+      // s.velocity = { x: 4.5, y: 5 };
+
+      s. velocity = { x: 2*mult, y: 7*mult };
+
+      s.acceleration = { x: 0, y: 0 };
+      s.rotate = 0;
+      s.collision = null;
+      s.isLanded = false;
+      s.gearDown = false;
+
+      // [...edgeContainer.children].forEach(c => c.remove());;
       // drawAllEdges(edgePts);
-      allStartingEdges = findAllEdges(edgePts, position);
+      // allStartingEdges = findAllEdges(edgePts, position);
-      ship.style.transform = "";
+      s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+
       walls.forEach(w => w.setAttribute('fill', 'black'));
       // bg.style.fill = 'black';
       time.innerText = "0";