AdaFruitGFXFont Monaco 9

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="https://raw.githubusercontent.com/AdmiralPotato/sdl_toy_0/master/src/data/font-monaco_9-6x12.png"
  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 = 'Monaco9';
var FONT_W = 6;
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', bitmapArray);
   ...