diff --git a/html/images/space.svg b/html/images/space.svg
index a5abd8b..4e7c6c5 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -87,7 +87,7 @@
}
#lines circle {
- fill: white;
+ fill: purple;
}
@@ -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));