​

let points;

let bounds;

let font;

​

function preload() {

  font = loadFont("KronaOne-Regular.ttf");

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(font);

  const n = '7';

  const s = 700;

  points = font.textToPoints(n, 0, 0, s, {

    sampleFactor: 1,

    simplifyThreshold: 0.0

  });

  bounds = font.textBounds(n, 0, 0, s);

  console.log(bounds)

}

​

function draw() {

  background(255);

  translate(width/2, height/2);

  drawLetterShape();

    // drawLetterVertex();

}

​

function drawLetterVertex() {

​

  stroke(50,100,200);

​

  push();

  translate(-bounds.w/2, bounds.h/2);

  beginShape();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = TWO_PI / (n);

  for (let i = 0; i < n; i += 1) {

    x = points[i].x + cos((frameCount + i) * 0.07) * 2;

    y = points[i].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

function drawLetterShape() {

  r = random(200, 255); // r is a random number between 0 - 255

  g = random(200); // g is a random number betwen 100 - 200

  b = random(200); // b is a random number between 0 - 100

  a = random(200, 255); // a is a random number between 200 - 255

  stroke(r,g,b,a);

  push();

  translate(-bounds.w/2, bounds.h/2);

  let x = 0;

  let y = 0;

  let n = points.length;

  let res = 10;

  for (let i = 0; i < n; i += res) {

    x = points[i].x + sin((frameCount + i) * 0.01) * 10;

    y = points[i].y;

    push();

    translate(x, y);

    rotate((frameCount + i) * 0.005);

    rect(-10, 0, 140, 1);

    pop();

  }

  pop();

}