let fontAtlas;

let fontData;

let nearestNeighbor;

let target;

let fgc;

let bgc;

​

​

function preload()

{

  fontShader = loadShader("Shaders/Basic.vert", "Shaders/BitmapFont.frag");

  nearestNeighbor = loadShader("Shaders/Basic.vert", "Shaders/NearestNeighbor.frag");

  fontAtlas = loadImage("BitmapFonts/Arazlam.png");

  fontData = Arazlam;

}

​

​

function setup()

{

  createCanvas(200, 100, WEBGL);

  fgc = color(58, 48, 34);

  bgc = color(231, 215, 168);

  // fgc = color(255);

  // bgc = color(100);

  let fgcArray = [red(fgc)/255, green(fgc)/255, blue(fgc)/255, 1];

  let bgcArray = [red(bgc)/255, green(bgc)/255, blue(bgc)/255, 1];

  target = createGraphics(width, height, WEBGL);

  target.noStroke();

  target.shader(fontShader);

  noStroke();

  shader(nearestNeighbor);

  fontShader.setUniform("uAtlas", fontAtlas);

  fontShader.setUniform("uAtlasSize", [fontAtlas.width, fontAtlas.height]);

  fontShader.setUniform("uTileSize", [fontData.TileW, fontData.TileH]);

  fontShader.setUniform("uColor", fgcArray);

  fontShader.setUniform("uShadowColor", [0, 0, 0, 1]);

  fontShader.setUniform("uBgColor", bgcArray);

  nearestNeighbor.setUniform("uSource", target);

  nearestNeighbor.setUniform("uSourceSize", [target.width, target.height]);

  nearestNeighbor.setUniform("uBgColor", bgcArray);

}

​

​

function draw()

{

  background(bgc);

  target.background(bgc);

  let s = 1;

  let x = 2 - width / 2;

  let y = -height / 2;

  Print("Mövé 299% Æ", x, y);

  Print("Pærtÿ Røster³ - ¼½¾1", x, y + 16);

  Print("Çhroniçle 359° 59\' 59.99\"", x, y + 32);

  Print("Tutorial 2: Fun²!", x, y + 48);

  Print("Dátà ©1998 Squåresoft", x, y + 64);

  Print("Øptionß ®", x, y + 80);

  // Print("• Mövé 299‰ ÆŒ", x, y);

  // Print("• Pærtÿ Røšter³ — ¼½¾1", x, y + 16);

  // Print("• Çhroniçle 359° 59’ 59.99”", x, y + 32);

  // Print("• Tutorial 2: Fun²!™", x, y + 48);

  // Print("• Dátà ©1998 Šquåresoft", x, y + 64);

  // Print("• Øptiœnß ®", x, y + 80);

  // Print("5:16pm", x, y);

  // Print("Wednesday,", x, y + 16);

  // Print("28 December 1843", x, y + 32);

  // Print("Seattle, Washington", x, y + 48);

  // Print("Hrænðires Eorþscræf", x, y + 64);

  rect(-width/2, -height/2, target.width * s, target.height * s);

}

​

​

function Print(str, x, y)

{

  for (let i = 0; i < str.length; ++i)

  {

    let code = str.charCodeAt(i);

    if (code === 32)  // space

    {

      x += fontData.SpaceW;

    }

    else

    {

      let w = fontData.Widths[code];

      let s = fontData.Strides[code];

      let f = fontData.Fronts[code];

      x -= f;

      Char(code, x, y, w + 1);

      x += s;

    }

  }

}

​

​

function Char(code, x, y, w)

{

  fontShader.setUniform("uCharCode", code);

  fontShader.setUniform("uCharWidth", w);

  target.rect(x, y, w, fontData.TileH);

}

​

​

function ShowCodes(str, base = 16)

{

  let outputStr = "";

  for (let i = 0; i < str.length; ++i)

  {

    let char = str.charAt(i);

    let code = str.charCodeAt(i);

    let codeStr = code.toString(base).toUpperCase();

    if (codeStr.length === 1) codeStr = `0${codeStr}`;

    outputStr += `[${char} | ${codeStr}] `;

  }

  print(outputStr);

}

​