let img, imgmask;

let pg;

​

function preload() {

  img = loadImage('assets/moonwalk.jpg');

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

  //font = loadFont('assets/Sudegnakno2-wZ3x.otf');

}

​

let s1 = 'p',

  s2 = '5';

let points1, points2, points3;

let bounds;

​

function setup() {

  createCanvas(720, 400);

  stroke(0);

​

  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);

  makeS3();

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

}

​

function draw() {

  background(255);

  image(img, 0, 0);

  push();

  //  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);

  pop();

  showS3();

}

​

​

function makeS3() {

  points3 = font.textToPoints('S', 0, 0, 6, {

    sampleFactor: 3,

    simplifyThreshold: 0

  });

  pg = createGraphics(100, 140);

  //pg.background(100);

  pg.beginShape();

  pg.fill(255, 0,255, 255);

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

    let x = points3[i].x * 30;

    let y = points3[i].y * 30+133;

    pg.vertex(x, y);

  }

  pg.endShape(CLOSE);

}

​

​

function showS3() {

  image(pg,width - 100, height - 140);

}