diff --git a/html/images/space.svg b/html/images/space.svg index 3369e27..597c624 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -63,10 +63,6 @@ display: none; } - line:not(#cannon) { - stroke: green; - } - .wall { opacity: 0.5; } @@ -74,6 +70,21 @@ .wall.inverse { fill: gray; } + + line:not(#cannon) { + stroke: green; + stroke-width: 0.5px; + } + + line#velocity-indicator { + stroke: blue; + /* stroke-width: 1px; */ + } + + line#acceleration-indicator { + stroke: maroon; + /* stroke-width: 0.5px; */ + } @@ -83,6 +94,8 @@ + + @@ -113,6 +126,7 @@ + @@ -161,9 +175,11 @@ let acceleration; // meters per second per second let rotate = 0; + let mult = 10; + const s = { position: { x: 0, y: 0 }, - velocity: { x: 0, y: 0 }, + velocity: { x: 0.25 * mult, y: 1 * mult }, acceleration: { x: 0, y: 0 }, rotate: 0, collision: null, @@ -190,7 +206,10 @@ const walls = document.querySelectorAll('.wall'); const bulletsContainer = document.querySelector("#bullets"); const triangleContainer = document.querySelector('#triangles'); + const linesContainer = document.querySelector("#lines"); const edgeContainer = document.querySelector('#edges'); + const velIndic = document.querySelector('#velocity-indicator'); + const acclIndic = document.querySelector('#acceleration-indicator'); const bulletPt = svg.createSVGPoint(); const cornerPt = svg.createSVGPoint(); @@ -517,7 +536,7 @@ return edge || actualCorner; } - function updateShip(s, elapsed) { + function updateShip(s, elapsed, collE) { const degrees = getRotate(gun); if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`; else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`; @@ -542,6 +561,10 @@ // // if (velocity[1] > maxSpeed) velocity[1] = maxSpeed; // else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed + velIndic.setAttribute('x2', s.velocity.x); + velIndic.setAttribute('y2', s.velocity.y); + acclIndic.setAttribute('x2', s.acceleration.x); + acclIndic.setAttribute('y2', s.acceleration.y); const changeX = 0.001 * elapsed * velocityX; const changeY = 0.001 * elapsed * velocityY; @@ -550,7 +573,9 @@ let { x, y } = s.position; let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y); let [xc, yc] = position; - s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position)); + // const collE = getCollisionEdges(edgeszz, position); + // console.log("collision edges", collE); + s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), collE); // if (s.collision) { // find final position of ship @@ -615,7 +640,7 @@ // s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; // console.log("ship landed", s, "edge", s.collision.edge.ya); if (s.collision) { - console.log("a"); + // console.log("a"); s.velocity = { x: 0, y: 0 }; const baseSlope = slope(s.collision.edge); const normalSlope = 1 / -baseSlope; @@ -627,21 +652,20 @@ el.setAttribute('y1', foot.y); el.setAttribute('x2', s.position.x); el.setAttribute('y2', s.position.y); - - console.log("foot", foot, "line", el); - const [posX, posY] = [5 * Math.sin(radAngle), 5 * Math.cos(radAngle)]; + // console.log("foot", foot, "line", el, "length", el.getTotalLength()); + svg.appendChild(el); 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); + // 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 }; - console.log("line length", el.getTotalLength(), el, s.position); - console.log("line length", l.getTotalLength(), l, foot.x - posY, foot.y - posX); + // console.log("ship position", s.position); + // console.log("line length", l.getTotalLength(), l, foot.x - posY, foot.y - posX); s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; } else { - console.log("c"); + // console.log("c"); s.position = { x: positionX, y: positionY } s.node.style.transform = `translate(${positionX}px, ${positionY}px)`; @@ -667,6 +691,45 @@ }); } + function updateLines(elapsed, edges) { + // console.log("velocity", s.velocity); + // console.log("collision", s.collision); + // console.log("edges", edges); + + // const edgeIds = [...linesContainer.children].map(c => c.id); + const edgeIds = edges.map(({edge: { xa, ya, xb, yb }}) => `normal${xa}-${ya}-${xb}-${yb}`); + const nodes = [...linesContainer.children]; + + // console.log("EDGE IDS", edgeIds, "NODES", nodes); + + nodes.forEach(n => { + if (!edgeIds.includes(n.id)) n.remove(); + }); + + edges.forEach(({ edge: { xa, ya, xb, yb }}) => { + const id = `normal${xa}-${ya}-${xb}-${yb}`; + // console.log("ID", id); + const n = linesContainer.querySelector(`#${id}`); + // console.log("NNNNNNNNNNNNNNNN", n); + const el = n ? n : document.createElementNS(namespaceURIsvg, 'line'); + const baseSlope = slope({ xa, ya, xb, yb }); + console.log("base slope", baseSlope); + const intx = perpIntxn(baseSlope, xa, ya, s.position.x, s.position.y); + console.log(intx); + el.setAttribute('x2', intx.x); + el.setAttribute('y2', intx.y); + el.setAttribute('x1', s.position.x); + el.setAttribute('y1', s.position.y); + + if (!n) { + el.setAttribute('id', `normal${xa}-${ya}-${xb}-${yb}`); + linesContainer.appendChild(el); + } + + return el; + }); + } + function init(edgePts) { started = false; position = [0, 0]; // meters @@ -712,9 +775,13 @@ } // position = updateShip(s, elapsed); - updateShip(s, elapsed); + const collE = getCollisionEdges(edgeszz, position); + + updateShip(s, elapsed, collE); + console.log("S POSITION", s.position); updateBullets(elapsed); // updateEdges(position); + updateLines(elapsed, collE); if (drawCollisionLines) updateTriangles(position); // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));