let points;

let word = "G";

// See https://p5js.org/reference/#/p5.Font/textToPoints

​

function preload() {

  myFont = loadFont("Chivo-Bold.otf");

}

​

function setup() {

  createCanvas(800, 600);

}

​

function draw() {

  background(220);

​

  var sf = constrain(map(mouseX, 0, width, 0.2, 0.01), 0.01, 0.2);

  points = myFont.textToPoints(word, 250, 425, 400, {

    sampleFactor: sf, // increase for more points

    simplifyThreshold: 0.0, // increase to remove collinear points

  });

​

  for (var i = 0; i < points.length; i++) {

    let pt = points[i];

    let nx = (noise(i * 10.1 + frameCount * 0.05) - 0.5) * 15;

    let ny = (noise(i * 11.2 + frameCount * 0.05) - 0.5) * 15;

    points[i].x += nx;

    points[i].y += ny;

  }

​

  noStroke();

  fill(0, 0, 0, 30);

  beginShape();

  for (var i = 0; i < points.length; i++) {

    let pt = points[i];

    vertex(pt.x, pt.y);

  }

  endShape();

​

  stroke(0);

  strokeWeight(4);

  noFill();

  for (var i = 0; i < points.length; i++) {

    let pt = points[i];

    point(pt.x, pt.y);

  }

}

​