Draw cycles using fract()

import_worker.js

@@ -368,7 +368,7 @@ function generate(trace_id) {
         ++y;
     }
 
-    postMessage({'type': 'rasterize_numbers', 'up_to': max_stage_cycles});
+    postMessage({'type': 'rasterize_numbers', 'at': raster_tile, 'up_to': max_stage_cycles});
 
     starts.push(positions.length);
 

input.js

@@ -128,7 +128,19 @@ function upload_file(file) {
                 queue_rasterize(data.text, data.at);
             } else if (msg.type === 'rasterize_numbers') {
                 const value = msg.up_to;
-                rasterize_row(value);
+                const at = msg.at;
+
+                number_base.x = at.x;
+                number_base.y = at.y;
+
+                for (let i = 1; i <= value; ++i) {
+                    queue_rasterize(i, {...at});
+                    at.x += 1;
+                    if (at.x === config.raster_texture_size / config.w) {
+                        at.x = 0;
+                        at.y += 1;
+                    }
+                }
             } else if (msg.type === 'progress_parse') {
                 console.log(`Parsing: ${msg.data}%`);
             } else if (msg.type === 'progress_generate') {

rasterizer.js

@@ -18,10 +18,6 @@ function rasterize(text) {
     //c2d.fillRect(0, 0, 32, 32);
 }
 
-function rasterize_row(value) {
-    // from 1 to value
-}
-
 function queue_rasterize(text, at) {
     raster_queue.push({'text': text, 'at': at});
 }

render.js

@@ -6,7 +6,7 @@ let config = {
     bytes_per_quad: 28,
     w: 40,
     h: 20,
-    padding: 1,
+    padding: 0,
 
     predefined_colors: {
         'Np': [75, 62, 143],
@@ -53,6 +53,7 @@ let last_frame_dt = 0;
 let last_frame_ts = 0;
 let number_tile = { 'x': 0, 'y': 0 };
 let spacedown = false;
+let number_base = { 'x': 0, 'y': 0 };
 
 const tquad_vs_src = `#version 300 es
     in vec2 a_pos;
@@ -66,9 +67,13 @@ const tquad_vs_src = `#version 300 es
     uniform vec2 u_textile;
     uniform vec2 u_tile;
     uniform int u_single;
+    uniform int u_extra;
 
     out vec4 v_color;
     out vec2 v_uv;
+    out vec2 v_cycle;
+    out vec2 v_textile;
+    flat out int v_extra;
 
     void main() {
         int vertex_index = gl_VertexID % 6;
@@ -83,6 +88,7 @@ const tquad_vs_src = `#version 300 es
 
         vec2 cycles = a_size / u_tile;
         vec2 size = a_size;
+        vec2 cycle;
 
         if (u_single != 0) {
             size = u_tile;
@@ -91,25 +97,39 @@ const tquad_vs_src = `#version 300 es
         if (vertex_index == 0) {
             // "top left" aka "p1"
             corner = a_pos;
+            if (u_extra != 0) {
+                corner.x += u_tile.x;
+            }
             uv = a_uv;
+            cycle = vec2(1.0, 0.0);
         } else if (vertex_index == 1 || vertex_index == 5) {
             // "top right" aka "p2"
             corner = a_pos + vec2(size.x, 0);
             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;
+            }
             uv = a_uv + vec2(0, u_textile.y);
+            cycle = vec2(1.0, 1.0);
         } else {
             // "bottom right" aka "p4"
             corner = a_pos + size;
             uv = a_uv + u_textile;
+            cycle = vec2(cycles.x, 1.0);
         }
       
         vec2 screen02 = (corner.xy * vec2(u_scale) + u_translation) / u_res * 2.0;
         screen02.y = 2.0 - screen02.y;
+
         v_color = a_color;
         v_uv = uv;
+        v_extra = u_extra;
+        v_cycle = cycle;
+        v_textile = u_textile;
 
         gl_Position = vec4(screen02 - 1.0, 1.0, 1.0);
     }
@@ -120,16 +140,29 @@ const tquad_fs_src = `#version 300 es
      
     in vec4 v_color;
     in vec2 v_uv;
+    in vec2 v_cycle;
+    in vec2 v_textile;
+    flat in int v_extra;
 
     uniform sampler2D u_texture;
     uniform float u_fade;
     uniform int u_solid;
+    uniform vec2 u_number_base;
      
     layout(location = 0) out vec4 FragColor;
 
     void main() {
         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;
+            float cyc = floor(v_cycle.x) - 1.0;
+
+            // TODO: wrapping
+            uv.x += cyc * v_textile.x;
+
+            vec4 text = texture(u_texture, uv);
+            FragColor = text;
         } else {
             vec4 text = texture(u_texture, v_uv);
             float a = min(u_fade, min(text.a, v_color.a));
@@ -232,7 +265,8 @@ 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);
-            // TODO: we need a set of alternative uvs here?
+            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.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); 
         }