diff --git a/html/images/space.svg b/html/images/space.svg index e755115..4170f98 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -97,7 +97,7 @@ - + @@ -109,7 +109,9 @@ - + + + @@ -193,8 +195,8 @@ rotate: 0, collision: null, isLanded: false, - node: null, - gearDown: false + gearDown: false, + node: null }; let friction = 0; @@ -236,6 +238,21 @@ return wall.classList.contains("inverse") ? cs.reverse() : cs; }); + // console.log("allWallCorners", allWallCorners); + + const ws = [...walls].map(node => { + return { + node, + corners: node.getAttribute('points').split(' ').map(coords => { + const [x, y] = coords.split(','); + const pt = svg.createSVGPoint(); + pt.x = +x; + pt.y = +y; + return pt; + }) + }; + }); + const edgeszz = [...walls].map(wall => { const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => { const [x, y] = coords.split(','); @@ -348,6 +365,44 @@ }, []); } + // function getCollisionCorners(ws, { x: px, y: py }, { x: vx, y: vy }) { + function getCollisionCorners(ws, { x: x1, y: y1 }, { x: x2, y: y2 }) { + // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points + + // find shortest distance between corners and velocity line + // if that distance is less than the ship's radius, we need to check + // that corner for collision + // console.log("position", px, py); + // console.log("velocity", vx, vy); + const blah = ws.reduce((acc, w) => { + // console.log("wall corners", w, w.corners); + // console.log("wall", w); + // w.corners.forEach(c => { + // console.log("corner", c); + // const { x: x0, y: y0 } = c; + // const d = Math.abs((y2-y1)*x0 - (x2-x1)*y0 + x2*y1-y2*x1) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2) + // console.log("d", d); + // return c; + // }); + // return [...acc, ...w.corners]; + const corners = w.corners.map(c => ({ corner: c, node: w })); + + const filtered = corners.filter(c => { + const { x: x0, y: y0 } = c.corner; + const d = Math.abs((y2-y1)*x0 - (x2-x1)*y0 + x2*y1-y2*x1) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2); + // console.log("corner", c.corner, "d", d, "shipRadius", shipRadius); + return d <= shipRadius; + }); + + // console.log("filtered", filtered); + + // return [...acc, ...corners]; + return [...acc, ...filtered]; + }, []); + + return blah; + } + function updateTriangles([positionX, positionY]) { const delim = ' '; const className = 'clockwise-orientation'; @@ -514,7 +569,9 @@ return shipBody.isPointInFill(cornerPt); } - function detectCollisions(position, walls, edges, z) { + // 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)); @@ -607,9 +664,12 @@ let [xc, yc] = position; const collE = getCollisionEdges(edgeszz, position); - // console.log("collision edges", collE); + const collC = getCollisionCorners(ws, { x, y }, s.velocity); + + console.log("collision corners", collC); + current = s.collision; - s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE); + s.collision = detectCollisions(position, allWallCorners, collE); // console.log("future position", xc, yc); // legs.style.display = !legs.style.display || legs.style.display === "none" ? "initial" : "none";