From b9884ba07716e5b5c830da5f736a8b21d23bc72d Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Wed, 7 Jan 2026 15:27:51 -0800 Subject: [PATCH] WIP --- html/images/space.svg | 91 +++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 43 deletions(-) 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";