fix that shit...

frontend/js/sketch.js

@@ -1,6 +1,5 @@
 import p5 from "p5";
 import io from "socket.io-client";
-import UPNG from "upng-js";
 const socket = io("http://localhost:3000");
 
 const params = {
@@ -38,6 +37,7 @@ const sketch = (p) => {
   const tileCols = Math.ceil(imageW / tileW);
   const tileRows = Math.ceil(imageH / tileH);
   const tileCount = tileCols * tileRows;
+  const aleph = 0; // to fix tile gaps
   let gl;
   let texArray;
   let shaderProgram;
@@ -69,14 +69,14 @@ const sketch = (p) => {
         const w = Math.min(tileW, imageW - x);
         const h = Math.min(tileH, imageH - y);
         promises.push(
-          fetch(`assets/img/tiles/tile_x${x}_y${y}_w${w}_h${h}.png`)
-            .then((res) => res.arrayBuffer())
-            .then((buffer) => {
-              const img = UPNG.decode(buffer);
-              console.log(
-                `img.data.length: ${img.data.length}, img.width: ${img.width}, img.height: ${img.height}`,
-              );
-
+          p
+            .loadImage(`assets/img/tiles/tile_x${x}_y${y}_w${w}_h${h}.png`)
+            .then((img) => {
+              img.loadPixels();
+              let pixels = new Uint8Array(img.width * img.height);
+              for (let i = 0; i < img.pixels.length; i++) {
+                pixels[i] = img.pixels[i * 4];
+              }
               const i = row * tileCols + column;
               gl.texSubImage3D(
                 gl.TEXTURE_2D_ARRAY,
@@ -89,7 +89,7 @@ const sketch = (p) => {
                 1,
                 gl.RED,
                 gl.UNSIGNED_BYTE,
-                img.data,
+                pixels,
               );
               n_downloaded++;
               console.log(
@@ -185,7 +185,7 @@ const sketch = (p) => {
 
   function drawTiles(x, y, width, height) {
     // clear screen
-    p.background(0);
+    p.background(p.color(1, 0, 0, 0));
 
     p.shader(shaderProgram);
     // p.ortho(0, p.width, -p.height, 0);
@@ -208,8 +208,13 @@ const sketch = (p) => {
         const currentLayer = row * tileCols + col;
         // Tell shader which layer to sample
         shaderProgram.setUniform("uLayer", currentLayer);
-
-        p.rect(col * tileW, row * tileH, tileW, tileH);
+        p.noStroke();
+        p.rect(
+          col * tileW - aleph,
+          row * tileH - aleph,
+          tileW + 2 * aleph,
+          tileH + 2 * aleph,
+        );
         // p.rect(0, 0, tileW, tileH);
       }
     }