fontsize = 32;

​

function preload() {

  // Ensure the .ttf or .otf font stored in the assets directory

  // is loaded before setup() and draw() are called

 //font = loadFont('assets/SourceSansPro-Regular.otf');

  font = "Arial"

}

​

function setup() {

  createCanvas(500, 500);

​

  // Set text characteristics

  textFont(font);

  textSize(fontsize);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(255);

​

  // Set the gap between letters and the left and top margin

  let gap = 52;

  let margin = 10;

  translate(margin * 4, margin * 4);

​

  // Set the counter to start at the character you want

  // in this case 35, which is the # symbol

  let counter = 35;

​

  // Loop as long as there is space on the canvas

  for (let y = 0; y < height - gap; y += gap) {

    for (let x = 0; x < width - gap; x += gap) {

      // Use the counter to retrieve individual letters by their Unicode number

      let letter = char(counter);

​

      // Add different color to the vowels and other characters

      if (

        letter === 'T' ||

        letter === 'H' ||

        letter === 'E' ||

        letter === 'C' ||

        letter === 'O'

      ) {

        fill('#ed225d');

      } else {

        fill(0);

      }

​

      // Draw the letter to the screen

      text(letter, x, y);

​

      // Increment the counter

      counter++;

    }

  }

}

​