​

function preload() {

  font = loadFont('assets/AvenirNextLTPro-Demi.otf');

}

​

let s1='p', s2='5';  // show string 'p5' as single chars with its own char as outline

​

let points1, points;

let bounds;

​

function setup() {

  createCanvas(800, 800);

  stroke(0);

  fill(255, 104, 204);

​

  points1 = font.textToPoints(s1, 0, 0, 10, {

    sampleFactor: 3,

    simplifyThreshold: 0

  });

  points2 = font.textToPoints(s2, 10, 0, 10, {

    sampleFactor: 3,

    simplifyThreshold: 0

  });

  bounds = font.textBounds('_'+s1+s2+'_', 0, 0, 10);

  print(bounds);

  print(" https://p5js.org/reference/#/p5.Font/textToPoints ");

}

​

function draw() {

  background(255);

  //  beginShape();

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

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

    text(s1, points1[i].x * width / bounds.w, points1[i].y * height / bounds.h);

  //    circle(  points1[i].x * width / bounds.w, points1[i].y * height / bounds.h ,5);

  //    vertex(  points1[i].x * width / bounds.w, points1[i].y * height / bounds.h );   // + sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,

  //  endShape(CLOSE);

  //  beginShape();

  translate(bounds.x * width / bounds.w, 0);

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

    text(s2, points2[i].x * width / bounds.w, points2[i].y * height / bounds.h);

  //    circle(  points2[i].x * width / bounds.w, points2[i].y * height / bounds.h ,5);

  //    vertex(  points2[i].x * width / bounds.w, points2[i].y * height / bounds.h );   // + sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,

  //  endShape(CLOSE);

}