Slightly fix glitching into wall bug

Changes

2 changed files (+30/-23)

• script.js
  • @@ -49,9 +49,9 @@ a.cm.y += p.y;
    a.p.push(p); // Show circles for debugging /* let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle") - circle.setAttribute("cx", p.x) - circle.setAttribute("cy", p.y) - circle.setAttribute("r", 10) + circle.setAttribute("cx", String(p.x)) + circle.setAttribute("cy", String(p.y)) + circle.setAttribute("r", "10") circle.setAttribute("fill", "red") svg.appendChild(circle) */ }
  • @@ -190,17 +190,22 @@ for (let a of A) {
    a.x += a.vx; a.y += a.vy; a.th += a.w; - // Don't allow glitching into walls - /* const px = a.p.map(x => rot(a, x).x) - let k = Math.min(...px) - rad - if (k < 0) a.x -= k - k = window.innerWidth - Math.max(...px) - rad - if (k < 0) a.x += k - const py = a.p.map(x => rot(a, x).y) - k = Math.min(...py) - rad - if (k < 0) a.y -= k - k = window.innerHeight - Math.max(...py) - rad - if (k < 0) a.y += k */ + // Don't allow glitching too far into walls + // This ensures the objects don't get stuck inside the walls + const px = a.p.map(x => rot(a, x).x); + let k = Math.min(...px) - rad; + if (k < -3) + a.x++; + k = window.innerWidth - Math.max(...px) - rad; + if (k < -3) + a.x--; + const py = a.p.map(x => rot(a, x).y); + k = Math.min(...py) - rad; + if (k < -3) + a.y++; + k = window.innerHeight - Math.max(...py) - rad; + if (k < -3) + a.y--; // Friction if (Math.abs(a.vx) > 0.001) a.vx -= 0.001 * Math.sign(a.vx);
• script.ts
  • @@ -67,9 +67,9 @@ a.cm.y += p.y
    a.p.push(p) // Show circles for debugging /* let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle") - circle.setAttribute("cx", p.x) - circle.setAttribute("cy", p.y) - circle.setAttribute("r", 10) + circle.setAttribute("cx", String(p.x)) + circle.setAttribute("cy", String(p.y)) + circle.setAttribute("r", "10") circle.setAttribute("fill", "red") svg.appendChild(circle) */ }
  • @@ -211,17 +211,19 @@ for (let a of A) {
    a.x += a.vx a.y += a.vy a.th += a.w - // Don't allow glitching into walls - /* const px = a.p.map(x => rot(a, x).x) + // Don't allow glitching too far into walls + // This ensures the objects don't get stuck inside the walls + // TODO: Fix this in a more robust way and prevent objects from gluing together + const px = a.p.map(x => rot(a, x).x) let k = Math.min(...px) - rad - if (k < 0) a.x -= k + if (k < -3) a.x++ k = window.innerWidth - Math.max(...px) - rad - if (k < 0) a.x += k + if (k < -3) a.x-- const py = a.p.map(x => rot(a, x).y) k = Math.min(...py) - rad - if (k < 0) a.y -= k + if (k < -3) a.y++ k = window.innerHeight - Math.max(...py) - rad - if (k < 0) a.y += k */ + if (k < -3) a.y-- // Friction if (Math.abs(a.vx) > 0.001) a.vx -= 0.001 * Math.sign(a.vx) if (Math.abs(a.vy) > 0.001) a.vy -= 0.001 * Math.sign(a.vy)