AdaFruitGFXFont Scientifica

by Admiral Potato

HTML

<script src="https://cdn.statically.io/gh/DC801/BM-Badge/49c0b33baefbe62cf5a868a30f9bbefe32b66b2b/SD_Card/MAGE/editor/dependencies/get-pixels.js"></script>
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAkCAIAAACBjKa0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAvhJREFUeNrsW+1u6zAIzaK+/yvnVosUedgcDhhn2S38qJrGxubbgLttBQUYjuOYmXtOv74U3C2zSwABAfdi6zFn6QpPlLkrMbLVwp66fjzzdqlO25h5AQsaTGm11Kb7A0bA/QaEDIbb0ATMkDZc1+RDih6/P/dJNr3h6xtMCucXmowF5yZ7VO3v7Xdm7lC5h0gCwY5no0aOO6weP2FowT39Qy4wFpyiKJq9kgu1gzVnprECawNwfiZbMNttXpnKwngn7IWwgA8IQO14pQFKyeyKcf5aRPBqrVcJ4paALdgVZuYtmCeDF3BMcUF012aZeoZV0LTguMq4QqN2/mRO0S5H6lJn4CrNoy/jdcGGXafoWAzOP7j9Sh4cM98PqS4UFBQUFPwJ+CoWPDwGa7UXX1nDLMYyb7UMiiwKathAjsGnKzGKNr283NMy+TjEGU4pWe7EHpmckqRkWELCRX+hFokEuvLgAGaeLXgDLeyxQ3m43BqeKwrCd0eyW5bWaHz/iJPgc9Zw2IvMmkkKxeB+bvuLS6vO3WvbEAhNjgCK2rcXnnkBC1T9DsMajJslL4ZZ/PJiTD+lJcwrZizjLHMU9LrIxzFSw8zgD9O+X/Ndk1fXWebxpzjVgI8hxXBboerVm5TLZQ0fse1i33gyCPtYV56A1015azoDZq5JEWnE7t7wRyWdj9oS6HO4eskFD5VxQUFBQcFfCRwL729MYghc5+jPFAzO/yxUp9xY2pnj/swW+Qx7mFmty3E/BPY+LXPdx3fdMzL/B2CaKXOZPtYvwnNF9yK9jWFeDM13C4mbZjAzLpq8ZbiuP7Z5LkpO9qnIEGb+sWiP6QGoRomKTJY7xUUcb6mVJPCqPqYgxIXM9hVZy7uGXYOpbhITwEFja5Fryeo0xCTNLK3VcQXHhqhmSGt10e4mCY3YYC1aaBkuazOVW1ysbmngG3m4fs40Ftu5Lbaba9Fht/rcTGPFieP+fzXO0JiTB99JDJ9Yr8vcHiLg6hYUJMA/AQYAhBuko+mddMsAAAAASUVORK5CYII="
  id="font_image"
/>

CSS

body {
  background-color: #222;
  color: #ccc;
}

JavaScript

// Because the jsfiddle console is bad
// Reference: https://stackoverflow.com/a/7089553
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;

var fontName = 'Scientifica';
var FONT_W = 5;
var FONT_H = 12;
var FONT_SHEET_WIDTH = 32;
var FONT_CHARS = 96;
var image = document.getElementById('font_image');
var fontRects = [];
var rect;
var pixelRedOffset;

window.getPixels(
  image.src,
  'png',
  function (error, result) {
    console.log({
      error,
      result,
    });
    var image = {
      width: result.shape[0],
      height: result.shape[1],
      pixelStride: result.shape[2]
    }
    var byteSizeOfOneChar = Math.ceil((FONT_W * FONT_H) / 8);
    var numBytes = byteSizeOfOneChar * FONT_CHARS;
    console.log({
      byteSizeOfOneChar,
      numBytes,
    });
    var bitmapArray = [];
    for (var charIndex = 0; charIndex < FONT_CHARS; charIndex++) {
      rect = {};
      rect.x = (charIndex % FONT_SHEET_WIDTH) * FONT_W;
      rect.y = Math.floor(charIndex / FONT_SHEET_WIDTH) * FONT_H;
      rect.w = FONT_W;
      rect.h = FONT_H;
      fontRects[charIndex] = rect;
      var currentByteValue = 0;
      var currentByteIndex = 0;
      var currentPixelIndex = 0;
      var currentByteAddress = 0;
      for (var y = rect.y; y < (rect.y + rect.h); y++) {
        for (var x = rect.x; x < (rect.x + rect.w); x++) {
          currentByteAddress = currentByteIndex + (charIndex * byteSizeOfOneChar);
          currentByteValue = bitmapArray[currentByteAddress] || 0;
          pixelRedOffset = ((y * image.width) + x) * image.pixelStride;
          if (result.data[pixelRedOffset]) {
            currentByteValue += 1 << (7 - (currentPixelIndex % 8));
          }
          bitmapArray[currentByteAddress] = currentByteValue;
          currentPixelIndex++;
          currentByteIndex = Math.floor(currentPixelIndex / 8);
        }
      }
    }
    console.log('bitmapArray',...