Increase ship radius?

README.md

@@ -127,3 +127,4 @@ Delete your `.sitegen_cache` file.
 * increase ship radius
 * add a Draw system?
 * wall entities
+* node entities?

html/images/space.svg

@@ -108,7 +108,7 @@
 
   <g id="player" class="ship">
     <line id="cannon" x1="0" y1="0" x2="3" y2="0" stroke="black"/>
-    <circle id="body" cx="0" cy="0" r="1"/>
+    <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">
@@ -451,8 +451,11 @@ const Move = (() => {
     const run = xb - xa;
     const riol = rise / length * dist;
     const ruol = run / length * dist;
+    const subR = (a, b) => Math.round(a * 100 - b * 100) / 100;
+    const addR = (a, b) => Math.round(a * 100 + b * 100) / 100;
 
-    return { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
+    // return { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
+    return { xa: addR(xa, riol), ya: subR(ya, ruol), xb: addR(xb, riol), yb: subR(yb, ruol) };
   }
 
   function detectEdgeCollision([xc, yc], [x, y], radius, gearDown) {
@@ -460,14 +463,17 @@ const Move = (() => {
     return (collision) => {
       if (xc === x && yc === y) return;
       const { edge, wall } = collision;
-      const dist = edge.xa < edge.xb && edge.ya === edge.yb && gearDown ? radius + 1.5 : radius;
+      // const dist = edge.xa < edge.xb && edge.ya === edge.yb && gearDown ? radius + 1.5 : radius;
+      const dist = radius;
       const edgeSeg = getEdgeCollisionBoundary(edge, dist);
       const positionSeg = { xa: x, ya: y, xb: xc, yb: yc };
 
-      const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
-      // const { xa: x3, ya: y3, xb: x4, yb: y4 } = edgeSeg;
-      const { xa: x3, ya: y3, xb: x4, yb: y4 } = edge;
+      console.log("edge", edge);
+      console.log("edgeSeg", edgeSeg);
 
+      const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
+      const { xa: x3, ya: y3, xb: x4, yb: y4 } = edgeSeg;
+      // const { xa: x3, ya: y3, xb: x4, yb: y4 } = edge;
 
       // console.log("x1", x1, "y1", y1, "x2", x2, "y2", y2);
       // console.log("x3", x3, "y3", y3, "x4", x4, "y4", y4);
@@ -476,7 +482,6 @@ const Move = (() => {
       // https://en.wikipedia.org/wiki/Cramer%27s_rule#Explicit_formulas_for_small_systems
       // const denom = (x2-x1)*(y4-y3)-(x4-x3)*(y2-y1);
 
-
       // const x21 = +(x2-x1).toPrecision(13);
       // const y43 = +(y4-y3).toPrecision(13);
       // const x43 = +(x4-x3).toPrecision(13);
@@ -554,11 +559,13 @@ const Move = (() => {
 
           // offset position slightly (by adding 1 to sr), so contact point is
           // not inside the wall
-          const xsrOff = Math.round(x1r + (sr + 1) * (x2r - x1r)) / 100;
-          const ysrOff = Math.round(y1r + (sr + 1) * (y2r - y1r)) / 100;
+          // const xsrOff = Math.round(x1r + (sr - dist) * (x2r - x1r)) / 100;
+          // const ysrOff = Math.round(y1r + (sr - dist) * (y2r - y1r)) / 100;
+          const xsrOff = Math.round(x1r + (sr - 1) * (x2r - x1r)) / 100;
+          const ysrOff = Math.round(y1r + (sr - 1) * (y2r - y1r)) / 100;
 
           collision.position = { x: xsrOff, y: ysrOff };
-
+          drawLine(x3, y3, x4, y4, "red");
           return true;
         }
       }