diff --git a/gldemo.html b/gldemo.html
index 9b5d7c7e..6e9d1a15 100644
--- 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
index 7e2fc9f3..063f5d52 100644
--- 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
index 2af37ff0..ed9f381a 100644
--- 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');
},
};