Very very VERY messy maths to make the cycles line up correctly with padding enabled

import_worker.js

@@ -284,7 +284,7 @@ function rasterize_and_pack(text) {
 
     raster_tile.x += 1;
 
-    if (raster_tile.x === config.raster_texture_size / config.w) {
+    if (raster_tile.x === Math.floor(config.raster_texture_size / config.w)) {
         raster_tile.x = 0;
         raster_tile.y += 1;
     }

input.js

@@ -136,7 +136,7 @@ function upload_file(file) {
                 for (let i = 1; i <= value; ++i) {
                     queue_rasterize(i, {...at});
                     at.x += 1;
-                    if (at.x === config.raster_texture_size / config.w) {
+                    if (at.x === Math.floor(config.raster_texture_size / config.w)) {
                         at.x = 0;
                         at.y += 1;
                     }

render.js

@@ -6,7 +6,7 @@ let config = {
     bytes_per_quad: 28,
     w: 40,
     h: 20,
-    padding: 0,
+    padding: 4,
 
     predefined_colors: {
         'Np': [75, 62, 143],
@@ -37,7 +37,7 @@ let config = {
     raster_texture_size: 4096,
     max_zoom_level: 0,
     show_texture: false,
-    raster_batch_size: 32,
+    raster_batch_size: 128,
 };
 
 let canvas = null;
@@ -68,25 +68,21 @@ const tquad_vs_src = `#version 300 es
     uniform vec2 u_tile;
     uniform int u_single;
     uniform int u_extra;
+    uniform float u_padding;
 
     out vec4 v_color;
     out vec2 v_uv;
     out vec2 v_cycle;
     out vec2 v_textile;
+    out float v_padscale;
     flat out int v_extra;
 
     void main() {
         int vertex_index = gl_VertexID % 6;
         vec2 corner;
         vec2 uv; 
-        vec2 inset = vec2(1.0);
 
-        // "Fix" for zero-width stages
+        vec2 cycles = a_size / u_tile - 1.0;
-        if (a_size.x < 0.1) {
-            inset = vec2(0.0);
-        }
-
-        vec2 cycles = a_size / u_tile;
         vec2 size = a_size;
         vec2 cycle;
 
@@ -98,26 +94,32 @@ const tquad_vs_src = `#version 300 es
             // "top left" aka "p1"
             corner = a_pos;
             if (u_extra != 0) {
-                corner.x += u_tile.x;
+                corner.x += u_tile.x + u_padding;
             }
             uv = a_uv;
-            cycle = vec2(1.0, 0.0);
+            cycle = vec2(0.0, 0.0);
         } else if (vertex_index == 1 || vertex_index == 5) {
             // "top right" aka "p2"
             corner = a_pos + vec2(size.x, 0);
+            if (u_extra != 0) {
+                corner.x += u_padding;
+            }
             uv = a_uv + vec2(u_textile.x, 0);
             cycle = vec2(cycles.x, 0.0);
         } else if (vertex_index == 2 || vertex_index == 4) {
             // "bottom left" aka "p3"
             corner = a_pos + vec2(0, size.y);
             if (u_extra != 0) {
-                corner.x += u_tile.x;
+                corner.x += u_tile.x + u_padding;
             }
             uv = a_uv + vec2(0, u_textile.y);
-            cycle = vec2(1.0, 1.0);
+            cycle = vec2(0.0, 1.0);
         } else {
             // "bottom right" aka "p4"
             corner = a_pos + size;
+            if (u_extra != 0) {
+                corner.x += u_padding;
+            }
             uv = a_uv + u_textile;
             cycle = vec2(cycles.x, 1.0);
         }
@@ -130,8 +132,13 @@ const tquad_vs_src = `#version 300 es
         v_extra = u_extra;
         v_cycle = cycle;
         v_textile = u_textile;
+        v_padscale = u_tile.x / (u_tile.x + u_padding);
 
-        gl_Position = vec4(screen02 - 1.0, 1.0, 1.0);
+        if (cycles.x < 0.5 && u_extra != 0) {
+            gl_Position = vec4(999.9, 999.9, 1.0, 1.0);
+        } else {
+            gl_Position = vec4(screen02 - 1.0, 1.0, 1.0);
+        }
     }
 `;
 
@@ -142,12 +149,13 @@ const tquad_fs_src = `#version 300 es
     in vec2 v_uv;
     in vec2 v_cycle;
     in vec2 v_textile;
+    in float v_padscale;
     flat in int v_extra;
 
     uniform sampler2D u_texture;
     uniform float u_fade;
     uniform int u_solid;
-    uniform vec2 u_number_base;
+    uniform ivec2 u_number_base;
      
     layout(location = 0) out vec4 FragColor;
 
@@ -155,14 +163,20 @@ const tquad_fs_src = `#version 300 es
         if (u_solid != 0) { 
             FragColor = vec4(v_color.rgb * v_color.a, v_color.a);
         } else if (v_extra != 0) {
-            vec2 uv = u_number_base + fract(v_cycle) * v_textile;
+            int cyc = int(floor(v_cycle.x * v_padscale));
-            float cyc = floor(v_cycle.x) - 1.0;
+            int width = int(floor(1.0 / v_textile.x));
-
+            vec2 cell = vec2(float((u_number_base.x + cyc) % width), float(u_number_base.y + (u_number_base.x + cyc) / width));
-            // TODO: wrapping
+    
-            uv.x += cyc * v_textile.x;
+            vec2 scaled_cycle = vec2(v_cycle.x * v_padscale, v_cycle.y);
-
+            vec2 cuv = fract(scaled_cycle); 
-            vec4 text = texture(u_texture, uv);
+            if (cuv.x <= v_padscale) {
-            FragColor = text;
+                cuv.x /= v_padscale;
+                vec2 uv = (cell + cuv) * v_textile;
+                vec4 text = texture(u_texture, uv);
+                FragColor = text;
+                //FragColor = vec4(cuv, 0.0, 1.0);
+                //FragColor = vec4(vec3(cell.x / float(width)), 1.0);
+            }
         } else {
             vec4 text = texture(u_texture, v_uv);
             float a = min(u_fade, min(text.a, v_color.a));
@@ -234,6 +248,7 @@ function draw(ts, animation) {
         gl.uniform1i(program.locations['u_solid'], 1);
         gl.uniform1i(program.locations['u_single'], 0);
         gl.uniform1i(program.locations['u_extra'], 0);
+        gl.uniform1f(program.locations['u_padding'], config.padding);
 
         gl.enableVertexAttribArray(program.locations['a_pos']);
         gl.enableVertexAttribArray(program.locations['a_size']);
@@ -265,7 +280,7 @@ function draw(ts, animation) {
             gl.uniform1i(program.locations['u_solid'], 0);
             gl.uniform1i(program.locations['u_single'], 0);
             gl.uniform1i(program.locations['u_extra'], 1);
-            gl.uniform2f(program.locations['u_number_base'], number_base.x * config.w / config.raster_texture_size, number_base.y * config.h / config.raster_texture_size);
+            gl.uniform2i(program.locations['u_number_base'], number_base.x, number_base.y);
 
             gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); 
         }