From bb193630b9ea64e0ffb8b63b2b1e5d4c3203dfb5 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Fri, 26 Dec 2025 21:47:45 -0800 Subject: [PATCH] WIP --- html/images/space.svg | 80 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 65 insertions(+), 15 deletions(-) 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));