tile rendering working in origin (0,0) top left

frontend/css/style.css

@@ -9,5 +9,5 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: #f0f0f0;
+    background: #000;
 }

frontend/js/sketch.js

@@ -18,9 +18,6 @@ socket.on("paramUpdate", ({ key, value }) => {
   console.log(`Updated param ${key} to ${value}`);
 });
 
-let cw = 1;
-let ch = 1;
-
 const poem =
   "everybody is pretty ugly \
 lover \
@@ -34,7 +31,6 @@ interiors in city reach peach intention lover drag sleepless depth fear dirt lon
 const realText = poem.split(" ").filter((t) => t.length > 0);
 
 const sketch = (p) => {
-  let sobel;
   const imageW = 20384,
     imageH = 28064;
   const tileW = 8192;
@@ -42,8 +38,6 @@ const sketch = (p) => {
   const tileCols = Math.ceil(imageW / tileW);
   const tileRows = Math.ceil(imageH / tileH);
   const tileCount = tileCols * tileRows;
-  const tiles = [];
-  const tileTextures = [];
   let gl;
   let texArray;
   let shaderProgram;
@@ -112,7 +106,11 @@ const sketch = (p) => {
     gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-    shaderProgram = p.loadShader("shader/shader.vert", "shader/shader.frag");
+    shaderProgram = await p.loadShader(
+      "shader/shader.vert",
+      "shader/shader.frag",
+    );
+    console.log(shaderProgram);
 
     // const shaderFile = await fetch("shader/sobel.frag");
     // const shaderText = await shaderFile.text();
@@ -124,6 +122,7 @@ const sketch = (p) => {
   let bgTick = 0;
   let textTick = 0;
   let sx, sy;
+  let cw, ch;
   let word, bounds;
 
   p.draw = () => {
@@ -132,23 +131,24 @@ const sketch = (p) => {
     p.setFrameRate(params.fps);
 
     bgTick %= params.backgroundTicks;
-    if (bgTick++ == 0) {
-      cw = Math.floor(bg.width * params.zoom);
-      ch = Math.floor(bg.height * params.zoom);
 
-      sx = Math.random(0) * (bg.width - cw);
-      sy = Math.random(0) * (bg.height - ch);
+    // current width/height
+
+    if (bgTick++ == 0) {
+      cw = Math.floor(imageW * params.zoom);
+      ch = Math.floor(imageH * params.zoom);
+      // random starting position
+      // subtract cw/ch to avoid going out of bounds
+      sx = Math.random(0) * (imageW - cw);
+      sy = Math.random(0) * (imageH - ch);
     }
 
     textTick %= params.textTicks;
     if (textTick++ == 0) {
       (word, (bounds = nextText()));
     }
-
-    p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
+    drawTiles(sx, sy, cw, ch);
     if (word && bounds) drawText(word, bounds);
-    sobel.setUniform("pulse", 0.5);
-    p.filter(sobel);
   };
 
   function nextText() {
@@ -184,7 +184,21 @@ const sketch = (p) => {
   }
 
   function drawTiles(x, y, width, height) {
-    p.ortho(x, x + width, y, y + height);
+    // clear screen
+    p.background(0);
+
+    p.shader(shaderProgram);
+    // p.ortho(x, x + width, y + height, y);
+    // p.ortho(0, -p.windowWidth, -p.windowHeight, 0);
+    console.log(
+      `ortho: ${-p.width / 2}, ${p.width / 2}, ${-p.height / 2}, ${p.height / 2}`,
+    );
+    p.ortho(0, p.width, -p.height, 0);
+
+    // Bind texture array
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, texArray);
+
     for (
       let row = Math.floor(y / tileW);
       row <= Math.floor((y + height) / tileW);
@@ -195,7 +209,16 @@ const sketch = (p) => {
         col <= Math.floor((x + width) / tileW);
         col++
       ) {
-        p.image(tiles[row * tileCols + col], col * tileW, row * tileH);
+        const currentLayer = row * tileCols + col;
+        // Tell shader which layer to sample
+        shaderProgram.setUniform("uLayer", currentLayer);
+
+        // Draw a quad covering the screen
+        console.log(
+          `Drawing tile ${currentLayer} at ${col * tileW}, ${row * tileH}`,
+        );
+        // p.rect(col * tileW, row * tileH, tileW, tileH);
+        p.rect(0, 0, tileW, tileH);
       }
     }
   }

frontend/shader/shader.frag

@@ -1,5 +1,6 @@
 #version 300 es
 precision highp float;
+precision highp sampler2DArray;
 
 in vec2 vTexCoord;
 out vec4 fragColor;

frontend/shader/shader.vert

@@ -6,7 +6,10 @@ in vec2 aTexCoord;
 
 out vec2 vTexCoord;
 
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
 void main() {
     vTexCoord = aTexCoord;
-    gl_Position = vec4(aPosition, 1.0);
+    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
 }