diff --git a/html/images/space.svg b/html/images/space.svg
index d598368..d90cba9 100644
--- a/html/images/space.svg
+++ b/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 = {
- position: { x: 0, y: 0 },
- 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
- };
+ const ship = document.querySelector(".ship");
+ const s = { node: ship };
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(slopeps, x, y, c.corner.x, c.corner.y);
+ const posNormIntxn = perpIntxn(slope(positionSeg), 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(...tCollisionPt, "blue");
+ // drawCircle(posNormIntxn.x, posNormIntxn.y, "red");
+ // 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;
- const dv = Math.sqrt(diffy ** 2 + diffx ** 2);
- const slopep = slope({ xa: x, ya: y, xb: xc, yb: yc });
- 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);
+ // console.log("xc", xc, "yc", yc, "x", x, "y", y);
+ const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
+ const posNormIntxn = perpIntxn(slope(positionSeg), x, y, corner.x, corner.y);
- const cl = document.createElementNS(namespaceURIsvg, 'line');
- cl.setAttribute('x1', posNormIntxn.x);
- cl.setAttribute('y1', posNormIntxn.y);
- cl.setAttribute('x2', x);
- cl.setAttribute('y2', y);
+ const posSegLength = Math.sqrt(diffy ** 2 + diffx ** 2);
+ const detp = xc * y - yc * x;
+ // console.log("detp", detp, "posSegLength", posSegLength);
- 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
- velocity = [0, 0]; // meters per second
- acceleration = [0, 0]; // meters per second per second
- rotate = 0;
+ const mult = 10000;
- [...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);
- ship.style.transform = "";
+ // allStartingEdges = findAllEdges(edgePts, position);
+ 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";