From 6f580b2b770f470c89b1dca9112f1ec0ee86b6e5 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 26 Jan 2026 13:36:23 -0800 Subject: [PATCH] WIP: almost got vector calc --- html/images/space.svg | 94 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 76 insertions(+), 18 deletions(-) diff --git a/html/images/space.svg b/html/images/space.svg index 7e75280..c6fc061 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -128,7 +128,7 @@ - + @@ -185,6 +185,8 @@ - fps
-,- x,y position +
+ -,- x,y velocity
  • bounce from collisions
    • @@ -350,8 +352,8 @@ const Move = (() => { const t = -((x2-x1)*(y3-y1)-(x3-x1)*(y2-y1))/denom; // const roundedT = +t.toFixed(2); // const roundedS = +s.toFixed(2); - const roundedT = t; - const roundedS = s; + const roundedT = +t.toFixed(15); + const roundedS = +s.toFixed(15); // console.log("checking edge for collision", edge); // console.log("position edge segs", positionSeg, edgeSeg); @@ -360,11 +362,15 @@ const Move = (() => { // if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) { if (s >= 0 && s <= 1 && t >= 0 && t <= 1) { - const xs = (x1 + s * (x2 - x1)); - const ys = (y1 + s * (y2 - y1)); + const xs = (x1 + +s.toFixed(15) * (x2 - x1)); + const ys = (y1 + +s.toFixed(15) * (y2 - y1)); // console.log("xs, yx", xs, ys); // console.log("xc, yc", xc, yc); - collision.position = { x: xs, y: ys }; + // collision.position = { x: xs, y: ys }; + collision.position = { x: +xs.toFixed(15), y: +ys.toFixed(15) }; + + console.log("BLSAEKJSDFGLSKDJF"); + // collision.position = { x: xc, y: yc }; // console.log("position calculate by detectEdgeCollision", xs, ys); @@ -598,18 +604,64 @@ const Move = (() => { // bounced velocity vector // drawLine(p.x, p.y, p.x + contact.velocity.x, p.y + contact.velocity.y, "blue"); - if (det < 0) { - // moving towards edge - Velocity[entity_id] = contact.velocity; - // Velocity[entity_id] = { x: 0, y: 0 }; - Position[entity_id] = contact.position; - } else { - // moving away from edge - Velocity[entity_id] = { x: v.x, y: v.y }; - Position[entity_id] = { x: p.x, y: p.y }; - } + // const edgeNrmlVect = { x: rise, y: -run }; + const edgeNrmlVect = vector(rise, -run); + const velocityVect = vector(-vx, vy); + console.log("velocity vector", velocityVect); + console.log("normal vector", edgeNrmlVect); + drawLine(px, py, px + velocityVect.x, py + velocityVect.y, "blue"); + drawLine(px, py, px + edgeNrmlVect.x, py + edgeNrmlVect.y); + // vDotn = edgeNrmlVect.x * velocityVect.dx + edgeNrmlVect.y * velocityVect.dy; + const vn = edgeNrmlVect.x * velocityVect.dx + edgeNrmlVect.y * velocityVect.dy; + const vDotn = edgeNrmlVect.x * velocityVect.x + edgeNrmlVect.y * velocityVect.y; + const f = vDotn / (edgeNrmlVect.x ** 2 + edgeNrmlVect.y ** 2); + + const vOnNx = vn * velocityVect.dx + velocityVect.x; + const vOnNy = vn * velocityVect.dy + velocityVect.y; + const prVonNx = edgeNrmlVect.y * f; + const prVonNy = -edgeNrmlVect.x * f; + + console.log("vOnNx, vOnNy", vOnNx, vOnNy) + console.log("prVonNx, prVonNy", prVonNx, prVonNy) + // drawLine(contact.position.x, contact.position.y, contact.position.x + prVonNy, contact.position.y - prVonNx, "teal"); + drawLine(contact.position.x, contact.position.y, contact.position.x + prVonNx, contact.position.y + prVonNy, "teal"); + + // contact.velocity = { x: -prVonNx, y: prVonNy } + // contact.velocity = { x: 16, y: 32 }; + contact.velocity = { x: prVonNx, y: prVonNy }; + + // Velocity[entity_id] = { x: -prVonNx, y: prVonNy }; + Velocity[entity_id] = { x: prVonNx, y: prVonNy }; + + // -15.999999999999998 31.999999999999996 + + // if (det < 0) { + // console.log("moving towards edge"); + // console.log("current velocity", vx, vy); + // console.log("current position", px, py); + // console.log("future velocity", v); + // console.log("future position", p); + // console.log("contact position", contact.position); + // drawLine(px, py, p.x, p.y, "green"); + // drawCircle(contact.position.x, contact.position.y, "red"); + // + // + // // moving towards edge + // // Velocity[entity_id] = contact.velocity; + // Velocity[entity_id] = { x: 0, y: 0 }; + // Position[entity_id] = contact.position; + // console.log("position", Position[entity_id], "velocity", Velocity[entity_id]); + // } else { + // console.log("moving away from edge"); + // + // // moving away from edge + // Velocity[entity_id] = { x: v.x, y: v.y }; + // Position[entity_id] = { x: p.x, y: p.y }; + // } } } else { + console.log("movi"); + Velocity[entity_id] = { x: v.x, y: v.y }; Position[entity_id] = { x: p.x, y: p.y }; } @@ -638,6 +690,7 @@ const bg = svg.querySelector('#bg'); const fps = document.querySelector("#fps"); const time = document.querySelector("#time"); const positionEl = document.querySelector("#position"); +const velocityEl = document.querySelector("#velocity"); const debug = document.querySelector("#debug"); const wallElements = document.querySelectorAll('.wall'); const bulletsContainer = document.querySelector("#bullets"); @@ -697,14 +750,17 @@ function init() { started = false; const mult = 10; - s.position = { x: 0, y: -8 }; + s.position = { x: 2.23, y: -10 }; // s.velocity = { x: 0, y: -10 }; // s.velocity = { x: 10, y: 20 }; - s.velocity = { x: 10, y: 20 }; + s.velocity = { x: 0, y: 40 }; + // s.velocity = { x: 0, y: 20000 }; s.angularVelocity = 0; // s. velocity = { x: -5*mult, y: 7*mult }; + // drawCircle(0, 0); + // s.acceleration = { x: 0, y: 10 }; s.acceleration = { x: 0, y: 0 }; Ships.forEach(({ entity_id }) => { @@ -1412,9 +1468,11 @@ function animate(timestamp) { let newPos = updateShip(s, elapsed); newPos = Position[Ships[0].entity_id]; + newVel = Velocity[Ships[0].entity_id]; s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`; positionEl.innerText = `${newPos.x.toFixed(1)},${newPos.y.toFixed(1)}`; + velocityEl.innerText = `${newVel.x.toFixed(1)},${newVel.y.toFixed(1)}`; // updateEdges(position); if (drawCollisionLines) updateTriangles(position);