canvas = createCanvas(windowWidth, windowHeight - 100);

  noLoop();

​

  charCodeFromInput = select("#char-code-from");

  charCodeToInput = select("#char-code-to");

  fontFamilyInput = select("#font-family");

  fontSizeSlider = select("#font-size");

  resultsDiv = select("#results");

}

​

function draw() {

  background(0);

​

  scores = [];

​

  const tileSize = fontSizeSlider.value();

  const fontFamily = fontFamilyInput.value();

  const charMargin = tileSize * 0.1;

  const charCodeFrom = eval(charCodeFromInput.value());

  const charCodeTo = eval(charCodeFromInput.value())

​

  for (let i = 0x21; i < 0x7f; i++) {

    const char = String.fromCharCode(i);

    const totalSize = tileSize + charMargin * 2;

​

    const charsPerLine = Math.floor(width / totalSize);

    const x = (i % charsPerLine) * totalSize;

    const y = Math.floor(i / charsPerLine) * totalSize;

    const charX = x + charMargin;

    const charY = y + charMargin;

​

    textSize(tileSize);

    textFont(fontFamily || "consolas");

    textAlign(LEFT, TOP);

    fill(255);

​

    text(char, charX, charY);

​

    scores.push({

      char,

      score: getFillPercentage(x, y, totalSize, totalSize),

    });

​

    noFill();

    stroke(255);

    strokeWeight(0.1);

    rect(x, y, totalSize, totalSize);

  }

​

  scores.sort((a, b) => a.score - b.score);

  resultsDiv.html(scores.map((el) => el.char).join(""));

  resultsDiv.style("font-family", fontFamily);

}

​

function getFillPercentage(x, y, w, h) {

  let avg = 0;

​

  const pixelRegion = get(x, y, w, h);

  pixelRegion.loadPixels();

​

  for (let i = 0; i < pixelRegion.pixels.length; i += 4) {

    const lightness = pixelRegion.pixels[i];

    avg += lightness / pixelRegion.pixels.length;

  }

​

  const avgPercent = map(avg, 0, 255, 0, 1);

​

  return avgPercent;

}

​