split huge image into tiles, load tiles as grayscale images

frontend/js/sketch.js

@@ -1,5 +1,6 @@
 import p5 from "p5";
 import io from "socket.io-client";
+import UPNG from "upng-js";
 const socket = io("http://localhost:3000");
 
 const params = {
@@ -35,32 +36,65 @@ const realText = poem.split(" ").filter((t) => t.length > 0);
 
 const sketch = (p) => {
   let sobel;
+  const imageW = 37418,
+    imageH = 27178;
+  const tileW = 8192;
+  const tileH = 4096;
+  const tileCols = Math.ceil(imageW / tileW);
+  const tileRows = Math.ceil(imageH / tileH);
+  const tileCount = tileCols * tileRows;
+  const tiles = [];
   p.setup = async () => {
     // bg = await p.loadImage("assets/scans/1200dpi 16bit grayscale.png");
-    bg = await p.loadImage("assets/scans/portable.png");
+    const promises = [];
+    let n_downloaded = 0;
+    for (let row = 0; row < tileRows; row++) {
+      for (let column = 0; column < tileCols; column++) {
+        const x = column * tileW;
+        const y = row * tileH;
+        const w = Math.min(tileW, imageW - x);
+        const h = Math.min(tileH, imageH - y);
+        promises.push(
+          fetch(
+            `assets/img/tiles/37418x27178_3200dpi_16bit_grayscale/tile_x${x}_y${y}_w${w}_h${h}.png`,
+          )
+            .then((res) => res.arrayBuffer())
+            .then((buffer) => {
+              // divide width by 2 because we are colorpacking
+              const p5img = p.createImage(w / 2, h);
+              p5img.loadPixels();
+
+              console.log(
+                `p5img.pixels.length: ${p5img.pixels.length}, p5img.width: ${p5img.width}, p5img.height: ${p5img.height}`,
+              );
+
+              const img = UPNG.decode(buffer);
+              console.log(
+                `img.data.length: ${img.data.length}, img.width: ${img.width}, img.height: ${img.height}`,
+              );
+
+              // BEWARE: weird things happening with dimension of the loaded image (4096 values too many)
+              for (let i = 0; i < w * h * 4; i++) {
+                p5img.pixels[i] = img.data[i];
+              }
+              tiles[row * tileCols + column] = img;
+              n_downloaded++;
+              console.log(
+                `Downloaded ${n_downloaded} / ${tileCount} (${Math.round((n_downloaded / tileCount) * 100)}%) tiles`,
+              );
+            }),
+        );
+      }
+    }
+    await Promise.all(promises);
     p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
-    sobel = p.createFilterShader(`
-      precision highp float;
-
-  // x,y coordinates, given from the vertex shader
-  varying vec2 vTexCoord;
-
-  // the canvas contents, given from filter()
-  uniform sampler2D tex0;
-  // other useful information from the canvas
-  uniform vec2 texelSize;
-  uniform vec2 canvasSize;
-  // a custom variable from this sketch
-  uniform float pulse;
-
-  void main() {
-    // get the color at current pixel
-    vec4 color = texture2D(tex0, vTexCoord);
-    // set the output color
-    color.b = 1.0;
-    color *= pulse;
-    gl_FragColor = vec4(color.rgb, 1.0);
-  }`);
+    const shaderFile = await fetch("shader/sobel.frag");
+    const shaderText = await shaderFile.text();
+    sobel = p.createFilterShader(shaderText);
+    console.log(
+      "Max texture size:",
+      p._renderer.GL.getParameter(p._renderer.GL.MAX_TEXTURE_SIZE),
+    );
     // const stream = c.elt.captureStream(60);
   };
 
@@ -125,6 +159,8 @@ const sketch = (p) => {
     p.fill(0, 0, 0, params.textAlpha);
     p.text(word, bounds.x, bounds.y + p.textAscent());
   }
+
+  function drawTiles(x, y, width, height) {}
 };
 
 new p5(sketch);