// now centers correctly & draws slowly

​

let font;

let fontsize;

let text = "hi";

​

let outline;

let bounds;

​

let spec = {

  sampleFactor: 0.075, 

  simplifyThreshold: 0

}

​

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(text, 0, 0, fontsize, spec);

  bounds = font.textBounds(text, 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);

  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 = i+1; j < outline.length && j < max; j++) {

        let p2 = outline[j];

        line(p1.x, p1.y, p2.x, p2.y);       

    }    

  }

}

​

function keyTyped() {

  let code = key.charCodeAt();

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

    text = key;

  }

  resetMillis = millis();

}