[gltiles] allow layers to be moved; with demo ui test

borkshop · Oct 19, 2023 · fa3c6c0 · fa3c6c0
1 parent 1ebe101
commit fa3c6c0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/gldemo.html b/gldemo.html
@@ -154,6 +154,22 @@
           updateWorldSize();
           break;
 
+        // NOTE this is here only to provide a test path for layer movement,
+        //      the more normative thing to do here would be to transalte the perspective,
+        //      not every world layer transform
+        case 'h':
+          demo?.moveWorldBy(-1, 0);
+          break;
+        case 'j':
+          demo?.moveWorldBy(0, 1);
+          break;
+        case 'k':
+          demo?.moveWorldBy(0, -1);
+          break;
+        case 'l':
+          demo?.moveWorldBy(1, 0);
+          break;
+
       }
     });
 

diff --git a/gldemo.js b/gldemo.js
@@ -206,6 +206,18 @@ export default async function runDemo(opts) {
       generateWorld();
     },
 
+    /** @param {number} dx @param {number} dy */
+    moveWorldBy(dx, dy) {
+      this.moveWorldTo(bg.left + dx, bg.top + dy);
+    },
+
+    /** @param {number} x @param {number} y */
+    moveWorldTo(x, y) {
+      bg.moveTo(x, y);
+      fg.moveTo(x, y);
+      bgCurved.moveTo(x - 0.5, y - 0.5);
+    },
+
     stop,
     done,
   };

diff --git a/gltiles.js b/gltiles.js
@@ -243,13 +243,10 @@ export default async function makeTileRenderer(gl) {
           const [x, _] = vec2.transformMat4([0, 0], [0, 0], transform);
           return x / cellSize.float;
         },
-        // TODO set left()
-
         get top() {
           const [_, y] = vec2.transformMat4([0, 0], [0, 0], transform);
           return y / cellSize.float;
         },
-        // TODO set top()
 
         get stride() { return stride.int },
         set stride(w) {
@@ -259,7 +256,14 @@ export default async function makeTileRenderer(gl) {
           }
         },
 
-        // TODO moveTo(left, top)
+        /** @param {number} left @param {number} top */
+        moveTo(left, top) {
+          const size = cellSize.float;
+          const x = left * size;
+          const y = top * size;
+          mat4.fromTranslation(transform, [x, y, 0]);
+          paramsDirty = true;
+        },
 
         get spinBuffer() { return spinBuffer },
         get tileBuffer() { return tileBuffer },
@@ -421,7 +425,7 @@ export default async function makeTileRenderer(gl) {
 
           gl.useProgram(null);
         },
-      }, layer, 'texture', 'cellSize', 'left', 'top');
+      }, layer, 'texture', 'cellSize', 'left', 'top', 'moveTo');
     },
 
   };