// now centers correctly & draws slowly

​

let font;

let fontsize;

let letter = "A";

​

let outline;

let bounds;

​

let spec = {

  sampleFactor: 0.06, 

  simplifyThreshold: 0

}

​

let res = 20;

​

let speed = 10;

let resetMillis = 0;

​

function preload() {

  font = loadFont('SpaceGrotesk-Bold.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // set font size based on height of canvas

  fontsize = height*0.9;

​

  frameRate(speed);

}

​

function draw() {

​

  background(255);

  fill(0);

  strokeWeight(0.02);

​

  outline = font.textToPoints(letter, 0, 0, fontsize, spec);

  bounds = font.textBounds(letter, 0, 0, fontsize);

​

  // center font outline on canvas based on bounds

  //translate(width/2-bounds.x-bounds.w/2, height/2-bounds.y-bounds.h/2);

​

  for (let pt of outline) {

    pt.x = pt.x - bounds.x + (width-bounds.w)/2;

    pt.y = pt.y - bounds.y + (height-bounds.h)/2;

  }

  let max = Math.round(map(millis(), resetMillis, resetMillis+outline.length*60, 0, outline.length));

  for (let i = 0; i < outline.length && i < max; i++) {

​

    let p1 = outline[i];

    for (let j = 0; j < height; j+=res) {

      line(0, j, p1.x, p1.y);

      line(width, j, p1.x, p1.y);

    }

    for (let k = 0; k < width; k+=res) {

      line(k, 0, p1.x, p1.y);

      line(k, height, p1.x, p1.y);

    }

  }

  text(letter, 0, 0);

}

​

function keyTyped() {

  let code = key.charCodeAt();

  if (code < 127 && code != 32 && code != 13) {

    letter = key;

  }

  resetMillis = millis();

}