// (lines and bezier paths). this example won't work with ttf fonts right now

// (because they use quadratic curves, not bezier curves)

​

let font;

let fontData;

​

function drawGlyphPath(path, drawWidth) {

  let cx = 0;

  let cy = 0;

  let vOffset = 0;

  for (let cmd of path.commands) {

    if (cmd.type == 'L') {

      line(0, vOffset, dist(cx, cy, cmd.x, cmd.y), vOffset);

      vOffset += 4;

    }

    else if (cmd.type == 'C') {

      push();

      translate(-cx, vOffset - cy);

      bezier(cx, cy,

             cmd.x1, cmd.y1,

             cmd.x2, cmd.y2,

             cmd.x, cmd.y);

        pop();

      vOffset += 4;

    }

        cx = cmd.x;

    cy = cmd.y;

  }

}

​

​

function preload() {

  fontData = loadBytes('LeagueGothic-Regular.otf');

}

​

function setup() {

    createCanvas(400, 400);

  let s = "comptypo";

  font = opentype.parse(fontData.bytes.buffer);

  glyphs = font.stringToGlyphs(s);

  push();

  noFill();

  translate(24, 72);

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

    let path = glyphs[i].getPath(0, 0, 72);

    path.draw(drawingContext);

    push();

    translate(0, 36);

    drawGlyphPath(path, 72);

    pop();

    translate(48, 0);

  }

  pop();

  noLoop();

}

​

function draw() {

}