From 9fbdddf336fe6111dcc695f3688dfc4a9ca2b7a5 Mon Sep 17 00:00:00 2001 From: katsaii Date: Thu, 22 Feb 2024 01:28:31 +0000 Subject: [PATCH] bitfont stuff --- bit-font.html | 7 +++- bit-font.js | 91 ++++++++++++++++++++++++++++++++++++++++++--------- index.html | 3 +- 3 files changed, 84 insertions(+), 17 deletions(-) diff --git a/bit-font.html b/bit-font.html index 077578e..6b0acdd 100644 --- a/bit-font.html +++ b/bit-font.html @@ -5,6 +5,11 @@

upload a json file exported from Bit Font Maker 2 (using the "Data Import/Export" button)

+ + +
-
\ No newline at end of file + +
+ \ No newline at end of file diff --git a/bit-font.js b/bit-font.js index 352b3f4..fb9406e 100644 --- a/bit-font.js +++ b/bit-font.js @@ -1,25 +1,86 @@ -//a.files[0].arrayBuffer().then(x => { -// let tc = new TextDecoder("utf-8"); -// console.log(tc.decode(x)); -//}) const getFileBuffer = () => document.getElementById("json-file").files[0]; +const setTextAlphabet = (value) => document.getElementById("dest-alphabet").value = value; const isNumeric = (n) => !isNaN(n); -const dec2bin = (dec) => (dec >>> 0).toString(2); -const bitFontIntoImage = () => getFileBuffer().text().then((text) => { - const json = JSON.parse(text); +const FONT_CELL_SIZE = 16; + +const extractFontPages = (json) => { + let font = []; for (const charCode in json) { if (!isNumeric(charCode)) { continue; } const char = String.fromCharCode(charCode); - console.log(`"${charCode}" ${char}`); - const frameData = json[charCode]; - let debugView = ""; - for (const line of frameData) { - const bits = dec2bin(line); - debugView += bits.padStart(16, "0").split("").reverse().join("") + "\n"; - } - console.log(debugView.replaceAll("0", " ").replaceAll("1", "■")); + font.push({ + charCode, + char : String.fromCharCode(charCode), + lines : json[charCode], + }); + } + return font; +}; + +const FONT_COL = { r : 0, g : 0, b : 0, a : 255 }; +const FONT_COL_BG = { r : 0, g : 0, b : 0, a : 0 }; + +const refreshFontColour = () => { + const cssColour = document.getElementById("font-col").value; + FONT_COL.r = parseInt(cssColour.slice(1, 1 + 2), 16); + FONT_COL.g = parseInt(cssColour.slice(3, 3 + 2), 16); + FONT_COL.b = parseInt(cssColour.slice(5, 5 + 2), 16); +} + +const setPixel = (iDest, imageData, { r, g, b, a }) => { + imageData.data[iDest + 0] = r; + imageData.data[iDest + 1] = g; + imageData.data[iDest + 2] = b; + imageData.data[iDest + 3] = a; +}; + +const setLine = (iDest, imageData, line) => { + const getPixelColour = (mask) => (line & mask) == 0 ? FONT_COL_BG : FONT_COL; + setPixel(iDest + 0 * 4, imageData, getPixelColour(0b0000_0000_0000_0001)); + setPixel(iDest + 1 * 4, imageData, getPixelColour(0b0000_0000_0000_0010)); + setPixel(iDest + 2 * 4, imageData, getPixelColour(0b0000_0000_0000_0100)); + setPixel(iDest + 3 * 4, imageData, getPixelColour(0b0000_0000_0000_1000)); + setPixel(iDest + 4 * 4, imageData, getPixelColour(0b0000_0000_0001_0000)); + setPixel(iDest + 5 * 4, imageData, getPixelColour(0b0000_0000_0010_0000)); + setPixel(iDest + 6 * 4, imageData, getPixelColour(0b0000_0000_0100_0000)); + setPixel(iDest + 7 * 4, imageData, getPixelColour(0b0000_0000_1000_0000)); + setPixel(iDest + 8 * 4, imageData, getPixelColour(0b0000_0001_0000_0000)); + setPixel(iDest + 9 * 4, imageData, getPixelColour(0b0000_0010_0000_0000)); + setPixel(iDest + 10 * 4, imageData, getPixelColour(0b0000_0100_0000_0000)); + setPixel(iDest + 11 * 4, imageData, getPixelColour(0b0000_1000_0000_0000)); + setPixel(iDest + 12 * 4, imageData, getPixelColour(0b0001_0000_0000_0000)); + setPixel(iDest + 13 * 4, imageData, getPixelColour(0b0010_0000_0000_0000)); + setPixel(iDest + 14 * 4, imageData, getPixelColour(0b0100_0000_0000_0000)); + setPixel(iDest + 15 * 4, imageData, getPixelColour(0b1000_0000_0000_0000)); +}; + +const copyFontPageToCanvas = (iDest, { lines }, imageData) => { + for (let iLine in lines) { + setLine(iDest + iLine * imageData.width * 4, imageData, lines[iLine]); + } +}; + +const bitFontIntoImage = () => getFileBuffer().text().then((text) => { + refreshFontColour(); + const font = extractFontPages(JSON.parse(text)); + const fontCellsPerRow = Math.ceil(Math.sqrt(font.length)); + // get the canvas and resize it + const canvasSize = fontCellsPerRow * FONT_CELL_SIZE; + const canvas = document.getElementById("dest-canvas"); + canvas.width = canvasSize; // need to resize the canvas otherwise the image won't fit + canvas.height = canvasSize; + // actually draw the image data + const canvasCtx = canvas.getContext("2d"); + const imageData = canvasCtx.createImageData(canvasSize, canvasSize); + for (const iPage in font) { + const pageX = (iPage % fontCellsPerRow); + const pageY = Math.floor(iPage / fontCellsPerRow); + const iDest = pageY * imageData.width * 4 * 16 + pageX * 4 * 16; + copyFontPageToCanvas(iDest, font[iPage], imageData); } + canvasCtx.putImageData(imageData, 0, 0); + setTextAlphabet(font.reduce((acc, { char }) => acc + char, "")); }); \ No newline at end of file diff --git a/index.html b/index.html index 4975059..bb4bcfc 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,8 @@

Sick of brands?

this site is an alternative to that, offering these bare bones tools with no ads or surveillance

view the JavaScript code here

\ No newline at end of file