brooke/blocky-6502
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

draws stub fonts

Browse source
This commit is contained in:
Brooke Vibber 2023-07-03 18:18:46 -07:00
parent 87d5726551
commit 62ba4e9455
1 changed files with 66 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
index.html
View file

@ -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;