diff --git a/frontend/js/sketch.js b/frontend/js/sketch.js index b1ffb8f..282e480 100644 --- a/frontend/js/sketch.js +++ b/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); } }