diff --git a/html/images/space.svg b/html/images/space.svg
index 1c82a66..338ec15 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -261,8 +261,6 @@
return wall.classList.contains("inverse") ? cs.reverse() : cs;
});
- // console.log("allWallCorners", allWallCorners);
-
const ws = [...walls].map(node => {
const corners = node.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
@@ -308,27 +306,6 @@
console.log("corners on map", mcs);
console.log("edges on map", mes);
- const edgeszz = [...walls].map(wall => {
- const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => {
- const [x, y] = coords.split(',');
- // return [+x, +y];
- // const [xb, yb] = arr[i]++;
- const [xb, yb] = arr[(i + 1) % arr.length].split(',');
- // console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") });
-
- // return `${+x},${+y} ${+xb},${+yb}`;
- return {
- xa: +x,
- ya: +y,
- xb: +xb,
- yb: +yb,
- };
- });
-
- // return wall.classList.contains("inverse") ? cs.reverse() : cs;
- return { node: wall, edges: es };
- });
-
const allEdgePts = allWallCorners.map(w =>
w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
);
@@ -553,7 +530,7 @@
return [x, y];
}
- function fireBullet(x, y, velocity) {
+ function fireBullet(position, velocity) {
const speed = 200; // meters per second
const degrees = getRotate(gun);
const radians = degrees * Math.PI / 180; // toFixed(15)?
@@ -569,10 +546,10 @@
el.setAttribute('cy', 0);
const bullet = {
- x: x + vx * cannonLength,
- y: y + vy * cannonLength,
- vx: vx * speed + velocity[0],
- vy: vy * speed + velocity[1],
+ x: position.x + vx * cannonLength,
+ y: position.y + vy * cannonLength,
+ vx: vx * speed + velocity.x,
+ vy: vy * speed + velocity.y,
time: bulletTimeout,
node: bulletsContainer.appendChild(el)
}
@@ -580,19 +557,6 @@
bullets.push(bullet);
}
- function getTranslate(el) {
- let x, y;
-
- if (el.style.transform.length === 0) {
- x = 0;
- y = 0;
- } else {
- [[, x], [, y] = ["0px", "0"]] = [...el.style.transform.matchAll(regex)];
- }
-
- return [+x, +y];
- }
-
function getRotate(el) {
let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
return +degrees;
@@ -681,9 +645,6 @@
const roundedT = +t.toFixed(2);
const roundedS = +s.toFixed(2);
- // console.log("edgeSeg", edgeSeg);
- // console.log("s", roundedS, "t", roundedT);
-
return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
};
}
@@ -715,27 +676,6 @@
};
}
- // function detectCollisions(position, walls, edges, z) {
- function detectCollisions(position, walls, z) {
- // console.log("detectCollision", position, walls, z);
- let actualCorner;
- const corner = walls.find(wall => {
- const c = wall.find(corner => detectCornerCollision(position, corner));
- actualCorner = c;
- return c;
- });
-
- const edge = z.find(({ edge: pts, wall: ee }) => {
- const str = `${pts.xa},${pts.ya} ${pts.xb},${pts.yb}`;
- const r = Object.is(slope(pts), 0) && s.gearDown ? shipRadius + 1 : shipRadius;
-
- return detectEdgeCollision(position, pts, r);
- });
-
- // return edge || actualCorner;
- return actualCorner;
- }
-
function withinCollisionDistance({ x: x1, y: y1 }, { x: x2, y: y2 }) {
const diffx = x2;
const diffy = y2;
@@ -755,70 +695,6 @@
};
}
- function lineSegIntxn(point, seg1, seg2) {
- const { x: x0, y: y0 } = point;
- const { xa: x1, ya: y1, xb: x2, yb: y2 } = seg1;
- const { xa: x3, ya: y3, xb: x4, yb: y4 } = seg2;
- // console.log(`s = (${x3-x1} + t${x4-x3}) / ${x2-x1}`);
- // console.log(`s = (${x3-x1} + t${x4-x3}) / ${x2-x1}`);
- // console.log(`${y2-y1} * (${x3-x1} + t${x4-x3}) / ${x2-x1} - t${y4-y3} = ${y3-y1}`);
- // console.log(`${y2-y1} * (${x3-x1} + t${x4-x3}) / ${x2-x1} - t${y4-y3} = ${y3-y1}`);
- //
- // console.log(`${x2-x1}s - t${x4-x3} = ${x3-x1}`);
- // console.log(`${y2-y1}s - t${y4-y3} = ${y3-y1}`);
-
- // https://en.wikipedia.org/wiki/Intersection_(geometry)#Two_line_segments
- const s = ((x3-x1)*(y4-y3)-(x4-x3)*(y3-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
- const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/((x2-x1)*(y4-y3)-(x4-x3)*(y2-y1));
-
- // const x = x1 + s * (x2-x1);
- // const y = y3 + t * (y4-y3);
-
- const xs = x1+s*(x2-x1);
- const ys = y1+s*(y2-y1);
- const xt = x3+t*(x4-x3);
- const yt = y3+t*(y4-y3);
-
- // console.log("point", point, "seg1", seg1, "seg2", seg2);
- // console.log("s", s, "t", t);
- // console.log("xs", xs, "ys", ys, "xt", xt, "yt", yt);
-
- if (s >= 0 && t <= 1) {
- console.log("CORNER COLLISION", "point", point, "position segment", seg1);
- }
-
- // console.log(`x1 ${x1} y1 ${y1} x2 ${x2} y2 ${y2} x3 ${x3} y3 ${y3} x4 ${x4} y4 ${y4} x0 ${x0} y0 ${y0}`);
-
- // console.log("point", point, "seg1", seg1, "seg2", seg2, "s", s, "t", t);
- }
-
- function cornerCollisionPosition({ x: x1, y: y1 }, { x: x2, y: y2 }) {
- // todo1: i only want the collisions ahead, not behind
- // todo2: how do we tell if we've passed the collision point already?
-
- const diffx = x2;
- const diffy = y2;
- const detv = x2 * y1 - y2 * x1;
- const dv = Math.sqrt(diffy ** 2 + diffx ** 2);
- const slopev = slope({ xa: x1, ya: y1, xb: x1 + x2, yb: y1 + y2 });
-
- return ({ corner: { x: x0, y: y0 }, node: n }) => {
- const velNormIntxn = perpIntxn(slopev, x1, y1, x0, y0);
- const d = Math.abs(diffy * x0 - diffx * y0 + detv) / dv;
- // console.log("dddddddddddd", d);
- // const b = Math.sqrt(shipRadius ** 2 - d ** 2);
- const b = Math.sqrt(Math.max(shipRadius, d) ** 2 - Math.min(shipRadius, d) ** 2);
-
- const cl = document.createElementNS(namespaceURIsvg, 'line');
- cl.setAttribute('x1', velNormIntxn.x);
- cl.setAttribute('y1', velNormIntxn.y);
- cl.setAttribute('x2', x1);
- cl.setAttribute('y2', y1);
-
- return cl.getPointAtLength(b);
- };
- }
-
function cornerContactPosition(xc, yc, x, y, corner, radius) {
const diffx = xc - x;
const diffy = yc - y;
@@ -834,57 +710,33 @@
cl.setAttribute('y1', posNormIntxn.y);
cl.setAttribute('x2', x);
cl.setAttribute('y2', y);
+
return cl.getPointAtLength(b);
}
function edgeContactPosition(xc, yc, x, y, edge, radius) {
const baseSlope = slope(edge);
// if (Object.is(baseSlope, 0)) s.isLanded = true;
-
let { xa, ya, xb, yb } = edge;
+ const edgeSeg = { x1: xa, y1: ya, x2: xb, y2: yb };
+ const positionSeg = { x1: x, y1: y, x2: xc, y2: yc };
- const rise = yb - ya;
- const run = xb - xa;
- const length = distance(xa, ya, xb, yb);
-
- const riol = rise / length * radius;
- const ruol = run / length * radius;
-
- const edgeSeg = { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol};
-
- // const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg;
- // const { xa: x3, ya: y3, xb: x4, yb: y4 } = edgeSeg;
-
- // const baseLine = { x1: xa, y1: ya, x2: xb, y2: yb };
- // const baseLine = { x1: edgeSeg.xa, y1: edgeSeg.ya, x2: edgeSeg.xb, y2: edgeSeg.yb };
- const baseLine = { x1: xa, y1: ya, x2: xb, y2: yb };
-
- const velocityLine = {
- x1: x,
- y1: y,
- x2: xc,
- y2: yc
- };
-
- // console.log("baseSlope", baseSlope);
const baseNrmlIntxn = perpIntxn(baseSlope, xa, ya, x, y);
- const baseVelIntxn = lineIntxnPt(baseLine, velocityLine);
- // console.log("baseNrmlIntxn", baseNrmlIntxn, "baseVelIntxn", baseVelIntxn);
- const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y , baseVelIntxn.x, baseVelIntxn.y);
+ const basePosIntxn = lineIntxnPt(edgeSeg, positionSeg);
+
+ const baseSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, basePosIntxn.x, basePosIntxn.y);
const normalSegLength = distance(baseNrmlIntxn.x, baseNrmlIntxn.y, x, y);
- // console.log("baseSegLength", baseSegLength, "normalSegLength", normalSegLength);
+
const theta = Math.atan(normalSegLength / baseSegLength);
- const shipRadius = radius;
- const h = shipRadius / Math.sin(theta);
+ const h = radius / Math.sin(theta);
const cl = document.createElementNS(namespaceURIsvg, 'line');
- cl.setAttribute('x1', baseVelIntxn.x);
- cl.setAttribute('y1', baseVelIntxn.y);
+ cl.setAttribute('x1', basePosIntxn.x);
+ cl.setAttribute('y1', basePosIntxn.y);
cl.setAttribute('x2', x);
cl.setAttribute('y2', y);
- const clPos = cl.getPointAtLength(h);
- return clPos;
+ return cl.getPointAtLength(h);
}
function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
@@ -1091,7 +943,6 @@
updateShip(s, elapsed);
updateBullets(elapsed);
// updateEdges(position);
- // if (!s.collision) updateLines(elapsed, edgeszz, s.position, s.velocity);
if (drawCollisionLines) updateTriangles(position);
if (s.collision && !s.isLanded) {
@@ -1141,8 +992,7 @@
case "Space":
if (!spacePressed) {
spacePressed = true;
- const [x, y] = getTranslate(ship);
- fireBullet(x, y, velocity);
+ fireBullet(s.position, s.velocity);
}
break;
case "KeyW":