stop bouncing, start clamping

bounce doesn't work well because it tries to adjust the heading
itself, but that's controlled by forth, which leads to jiggling about
when they disagree, which can happen if we bounce between the ‘head’
and ‘sethead’ calls in ‘head 10 + sethead’

1 files changed, 11 insertions, 31 deletions

diff --git a/site/main.mjs b/site/main.mjs
index 703062d..877c0bc 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -91,6 +91,12 @@ function renderVars(vmvars) {
     });
 }
 
+function clamp(radius, x, y, width, height) {
+    const xx = Math.min(Math.max(radius, x), width-radius);
+    const yy = Math.min(Math.max(radius, y), height-radius);
+    return [xx, yy];
+}
+
 function renderRobo(ctx, x, y) {
     ctx.fillStyle = 'rgb(200 0 0)';
     ctx.beginPath();
@@ -111,9 +117,7 @@ function renderArena(robos, delta=0.0) {
         const [velx, vely] = [
             robo.speedx, robo.speedy
         ].map(x => timeScale * x);
-
-        const [_, x, y] = bounce(25, robo.heading, robo.x + velx, robo.y + vely, canvas.width, canvas.height);
-        //console.debug('bjc render robo', robo, velx, vely, x, y)
+        const [x, y] = clamp(25, robo.x + velx, robo.y + vely, canvas.width, canvas.height);
         renderRobo(ctx, x, y);
     });
 }
@@ -153,26 +157,6 @@ function loadForth(taintedPath) {
         });
 }
 
-function bounce(radius, heading, x, y, width, height) {
-    // todo: don't just clamp the x/y, instead calculate based on
-    // where the intersection with the wall is.
-    if (y < radius) {
-        // top wall
-        return [-1 * heading, x, radius];
-    } else if (y >= height-radius) {
-        // bottom wall
-        return [-1 * heading, x, height-radius];
-    } else if (x < radius) {
-        // left wall
-        return [heading - 180, radius, y];
-    } else if (x >= width-radius) {
-        // right wall
-        return [180 - heading, width-radius, y];
-    } else {
-        return [heading, x, y];
-    }
-}
-
 async function loaded() {
     const roboWorker = new Worker('robo.mjs', { type: 'module' });
     const robo = {
@@ -203,6 +187,7 @@ async function loaded() {
             }
             break;
         case 'tick':
+            console.debug('bjc tick', robo.heading, trans.vars.heading);
             const { word, offset } = trans.ip;
             document.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip'));
             const sel = selectorForIP(word, offset);
@@ -223,15 +208,10 @@ async function loaded() {
             ].map(x => robo.speed * x);
             robo.speedx = speedx;
             robo.speedy = speedy;
-            robo.x += speedx;
-            robo.y += speedy;
             const canvas = document.querySelector(CANVAS_SELECTOR);
-            const [newHeading, newx, newy] = bounce(25, trans.vars.heading, robo.x, robo.y, canvas.width, canvas.height);
-            if (newHeading != trans.vars.heading) {
-                roboWorker.postMessage({ kind: 'setHeading', heading: newHeading });
-                robo.x = newx;
-                robo.y = newy;
-            }
+            const [x, y] = clamp(25, robo.x + speedx, robo.y + speedy, canvas.width, canvas.height);
+            robo.x = x;
+            robo.y = y;
             renderArena([robo]);
             break;
         default: