From 62ba4e9455c5a489ab1e5901784b964778ec216e Mon Sep 17 00:00:00 2001
From: Brion Vibber <brion@pobox.com>
Date: Mon, 3 Jul 2023 18:18:46 -0700
Subject: [PATCH] draws stub fonts

---
 index.html | 82 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 58ab065..4bffa8c 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,8 @@
         <title>Block video encoding test</title>
         <style type="text/css">
             .stretchy {
-                width:267px;
-                height: 160px;
+                width: 320px;
+                height: 192px;
                 object-fit: fill;
                 image-rendering: pixelated;
             }
@@ -35,9 +35,10 @@
         <h2>Work canvas</h2>
         <div>
             <canvas id="work" width="80" height="160" class="stretchy"></canvas>
+            <canvas id="font" width="80" height="160" class="stretchy"></canvas>
         </div>
         <div>
-            <span id="block-count">n/a</span> blocks per frame
+            <span id="block-count">n/a</span> unique blocks per frame
         </div>
 
         <script type="text/javascript">
@@ -68,6 +69,14 @@
                 return r * 0.299 + g * 0.586 + b * 0.114;
             }
 
+            function hexify(block) {
+                return Array.from(block).map((n) => n.toString(16)).join('');
+            }
+
+            function inverse(block) {
+                return block.map((n) => ~n & 0xf);
+            }
+
             function update() {
                 let ctx = work.getContext('2d');
                 let pixels = new Uint8Array(width * height);
@@ -93,11 +102,11 @@
 
                 let blocks = [];
                 let chars = new Uint16Array(widthBlocks * heightBlocks);
-                for (let n = 0, y = 0; y < heightBlocks; y++) {
-                    for (let x = 0; x < widthBlocks; x++, n++) {
+                for (y = 0; y < heightBlocks; y++) {
+                    for (let x = 0; x < widthBlocks; x++) {
                         let i = y * widthBlocks + x;
                         blocks[i] = new Uint8Array(blockWidth * blockHeight);
-                        chars[n] = i;
+                        chars[i] = i;
                         for (let yy = 0; yy < blockHeight; yy++) {
                             for (let xx = 0; xx < blockWidth; xx++) {
                                 let ii = yy * blockWidth + xx;
@@ -110,23 +119,64 @@
                 // Now we have 800 blocks for 80x160 image
                 // But we can only use 128 + their mirror images
                 //
-                // First pass: sort.
-                let zero = "0".charCodeAt(0);
+                // First pass: uniques extraction
                 // Convert the 4bpp pixel indices into hex strings
                 let blockMap = {};
-                let keys = [];
-                for (let i = 0; i < blocks.length; i++) {
-                    let key = blocks[i].map((n) => n.toString(16)).join('');
-                    console.log(key);
-                    if (!blockMap[key]) {
-                        blockMap[key] = blocks[i];
-                        keys.push(blockMap[key]);
+                let uniques = [];
+                for (let i = 0; i < chars.length; i++) {
+                    let char = chars[i];
+                    let block = blocks[char];
+                    let key = hexify(blocks[i]);
+                    let keyInverse = hexify(inverse(block));
+                    if (blockMap[key]) {
+                        char = blockMap[key];
+                    } else if (blockMap[keyInverse]) {
+                        char = blockMap[keyInverse];
+                    } else {
+                        char = uniques.push(block) - 1;
+                        blockMap[key] = char;
+                        blockMap[keyInverse] = char;
                     }
+                    chars[i] = char;
                 }
                 let span = document.querySelector('#block-count');
-                span.textContent = `${keys.length}`;
+                span.textContent = `${uniques.length}`;
 
+                // Font (currently wrong! :D)
+                let fontCtx = document.querySelector('#font').getContext('2d');
+                let font = fontCtx.createImageData(16 * blockWidth, 16 * blockHeight);
+                for (let hi = 0; hi < 16; hi++) {
+                    for (let lo = 0; lo < 16; lo++) {
+                        let char = (hi << 4) | lo;
+                        let invert = Boolean(char & 0x80);
+                        char &= 0x7f;
+                        if (char >= uniques.length) {
+                            continue;
+                        }
+                        let block = uniques[char];
+                        for (let y = 0; y < blockHeight; y++) {
+                            for (let x = 0; x < blockWidth; x++) {
+                                let i = y * blockWidth + x;
+                                let ii = (y + hi * blockHeight) * 16 * blockWidth + (x + lo * blockWidth);
+                                if (block.length < i) {
+                                    debugger;
+                                }
+                                let gray16 = block[i];
+                                if (invert) {
+                                    gray16 = ~gray16 & 0x0f;
+                                }
+                                let gray256 = Math.round(gray16 * 255 / 15);
+                                font.data[ii * 4] = gray256;
+                                font.data[ii * 4 + 1] = gray256;
+                                font.data[ii * 4 + 2] = gray256;
+                                font.data[ii * 4 + 3] = 255;
+                            }
+                        }
+                    }
+                }
+                fontCtx.putImageData(font, 0, 0);
 
+                // Redraw the blocks
                 for (let y = 0; y < height; y++) {
                     for (let x = 0; x < width; x++) {
                         let i = y * width + x;