From e9a86c532eff63d6c2c590d7a927ec65a7bafb67 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 5 Jan 2026 10:00:15 -0800 Subject: [PATCH] Clean up --- html/images/space.svg | 184 ++++-------------------------------------- 1 file changed, 17 insertions(+), 167 deletions(-) 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":