diff --git a/geometry.js b/geometry.js index 296e166..63a224e 100644 --- a/geometry.js +++ b/geometry.js @@ -28,7 +28,10 @@ function rasterize_and_pack(text, cycles) { return rasterized[key]; } - const tiles_needed = cycles - 1 + 1; // stage name + count from one + let cycles_total_padding = (cycles - 1) * config.padding; + let bonus_cells = Math.ceil(cycles_total_padding / config.w); + + const tiles_needed = cycles - 1 + 1 + bonus_cells; // stage name + count cycles from one if (tiles_needed > config.raster_texture_size / config.w - raster_tile.x) { raster_tile.x = 0; raster_tile.y += 1; @@ -42,20 +45,12 @@ function rasterize_and_pack(text, cycles) { gl.texSubImage2D(gl.TEXTURE_2D, 0, raster_tile.x * config.w, raster_tile.y * config.h, config.w, config.h, - gl.RGBA, gl.UNSIGNED_BYTE, c2d.canvas + gl.RGBA, gl.UNSIGNED_BYTE, + c2d.canvas ); - raster_tile.x += 1; - for (let i = 1; i <= cycles; ++i) { - rasterize(i); - gl.bindTexture(gl.TEXTURE_2D, textures['raster']); - gl.texSubImage2D(gl.TEXTURE_2D, 0, - raster_tile.x * config.w, raster_tile.y * config.h, - config.w, config.h, - gl.RGBA, gl.UNSIGNED_BYTE, c2d.canvas - ); - raster_tile.x += 1; - } + raster_tile.x += 1; + raster_tile.x += cycles + bonus_cells; if (raster_tile.x === config.raster_texture_size / config.w) { raster_tile.x = 0; @@ -101,18 +96,20 @@ function generate(trace_id) { } let [r, g, b] = get_color(stage.name); + let a = 255; if (!instruction.retired) { r = Math.max(50, r - 50); g = Math.max(50, g - 50); b = Math.max(50, b - 50); + a = 100; } const [u, v] = rasterize_and_pack(stage.name, stage_cycles); - sizes.push(stage_cycles * config.w, 1 * config.h); - positions.push(config.w * stage.c, config.h * y); - colors.push(r, g, b, 255); + sizes.push(stage_cycles * config.w + (stage_cycles - 1) * config.padding, 1 * config.h); + positions.push(config.w * stage.c + config.padding * (stage.c - 1), config.h * y + config.padding * (y - 1)); + colors.push(r, g, b, a); uvs.push(u, v); result.count++; diff --git a/ibm_vga8.woff2 b/ibm_vga8.woff2 new file mode 100644 index 0000000..489d4d2 Binary files /dev/null and b/ibm_vga8.woff2 differ diff --git a/index.html b/index.html index 9f42726..b031251 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@
- +
diff --git a/index.js b/index.js index b33fbd1..3ede6a4 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,12 @@ document.addEventListener('DOMContentLoaded', main); let traces = {}; function main() { - init_webgl(); - init_rasterizer(); - init_listeners(); + const font = new FontFace('ibm8x16', 'url(ibm_vga8.woff2)'); + document.fonts.add(font); + font.load(); + document.fonts.ready.then(() => { + init_webgl(); + init_rasterizer(); + init_listeners(); + }); } diff --git a/input.js b/input.js index 8becf9a..6446386 100644 --- a/input.js +++ b/input.js @@ -73,8 +73,8 @@ function jump_to_first_instruction() { const trace = traces[Object.keys(traces)[0]].raw; if (Object.keys(trace).length > 0) { const first_instruction = trace[Object.keys(trace)[0]]; - offset.x = -first_instruction.cycle * config.w; - offset.y = 0 * config.h; + offset.x = -first_instruction.cycle * config.w + config.padding * 2; + offset.y = config.padding * 2; zoom_target = 1; zoom = 1; schedule_draw(); diff --git a/rasterizer.js b/rasterizer.js index 79168c7..c3247a3 100644 --- a/rasterizer.js +++ b/rasterizer.js @@ -4,12 +4,15 @@ let c2d = null; function init_rasterizer() { c2d = document.querySelector('#offscreen').getContext('2d'); - c2d.font = '14px monospace'; - c2d.fillStyle = 'white'; + c2d.font = '16px ibm8x16'; + //c2d.font = '14px monospace'; + c2d.textAlign = 'center'; + c2d.textBaseline = 'middle'; + c2d.fillStyle = '#eeeeee'; } function rasterize(text) { c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height); - c2d.fillText(text, 0, 14); + c2d.fillText(text, config.w / 2, config.h / 2); //c2d.fillRect(0, 0, 32, 32); } diff --git a/render.js b/render.js index e9d7e5e..d2c41d2 100644 --- a/render.js +++ b/render.js @@ -6,6 +6,7 @@ let config = { bytes_per_quad: 28, w: 32, h: 32, + padding: 2, predefined_colors: { 'Np': [75, 62, 143], @@ -69,29 +70,30 @@ const tquad_vs_src = `#version 300 es } vec2 cycles = a_size / u_tile; + vec2 tt = u_textile / u_tile; if (vertex_index == 0) { // "top left" aka "p1" - corner = a_pos + inset; + corner = a_pos; uv = a_uv; } else if (vertex_index == 1 || vertex_index == 5) { // "top right" aka "p2" - corner = a_pos + vec2(a_size.x, 0) + vec2(-inset.x, inset.y); + corner = a_pos + vec2(a_size.x, 0); uv = a_uv + vec2(u_textile.x * cycles.x, 0); } else if (vertex_index == 2 || vertex_index == 4) { // "bottom left" aka "p3" - corner = a_pos + vec2(0, a_size.y) + vec2(inset.x, -inset.y); + corner = a_pos + vec2(0, a_size.y); uv = a_uv + vec2(0, u_textile.y * cycles.y); } else { // "bottom right" aka "p4" - corner = a_pos + a_size - inset; + corner = a_pos + a_size; uv = a_uv + u_textile * cycles; } 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 - u_textile * vec2(0.2); + v_uv = uv; gl_Position = vec4(screen02 - 1.0, 1.0, 1.0); } @@ -104,12 +106,14 @@ const tquad_fs_src = `#version 300 es in vec2 v_uv; uniform sampler2D u_texture; + uniform float u_fade; layout(location = 0) out vec4 FragColor; void main() { vec4 text = texture(u_texture, v_uv); - FragColor = vec4(text.rgb * text.a + v_color.rgb * (1.0 - text.a), 1.0); + text.a = min(min(text.a, v_color.a), u_fade); + FragColor = vec4(text.rgb * text.a + v_color.rgb, 1.0); } `; @@ -147,6 +151,7 @@ function draw(ts, animation) { if (quads.count > 0) { const program = programs['quad']; + const fade = Math.max(0, Math.min(1.25 * zoom - 0.25, 1)); gl.useProgram(program.program); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed']); @@ -162,6 +167,7 @@ function draw(ts, animation) { gl.uniform2f(program.locations['u_textile'], config.w / config.raster_texture_size, config.h / config.raster_texture_size); gl.uniform1i(program.locations['u_texture'], textures['raster']); gl.uniform2f(program.locations['u_tile'], config.w, config.h); + gl.uniform1f(program.locations['u_fade'], fade); gl.enableVertexAttribArray(program.locations['a_pos']); gl.enableVertexAttribArray(program.locations['a_size']);