// file. (see sketch files).

// 

// Note that this will work for the default renderer,

// however this does not work as expected with WEBGL and 

// Tthe following notification will be posted in the console:

// 

// You must load and set a font before drawing text. 

// See `loadFont` and `textFont` for more details. 

//

// see the following WEBGL type example.

// https://editor.p5js.org/sojamo/sketches/mvEZEFfB6

​

let points;

let font;

​

function preload() {

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

}

​

​

function setup() {

  createCanvas(1080, 1080);

  textFont(font);

  textSize(50);

  points = font.textToPoints('Wonky', 0, 0, 100, {

    sampleFactor: 1,

    simplifyThreshold: 0

  });

  console.log(points.length);

}

​

function draw() {

  background(255,0,24);

  push();

  translate(50, 600);

  drawLetterShape();

  // drawLetterVertex();

  pop();

}

​

function drawLetterVertex() {

  push();

  stroke(0,100);

  noFill();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = TWO_PI / (n);

  let scl = 2; 

  let steps = 10;

  beginShape();

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

    let animateX =  sin((frameCount+i) * 0.021) * 10;

    let animateY =  cos((frameCount+i) * 0.023) * 10;

    x = points[i].x * scl + animateX;

    y = points[i].y * scl + animateY;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

function drawLetterShape() {

  push();

  stroke(223,225,224,300);

  noFill();

  let x = 0;

  let y = 0;

  let n = points.length;

  let scl = 2; 

  let steps = 2;

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

    let animateX =  sin((frameCount+i) * 0.011) * 10;

    let animateY =  cos((frameCount+i) * 0.012) * 10;

    x = points[i].x * scl + animateX;

    y = points[i].y * scl + animateY;

    push();

    translate(x, y);

    // rotate((frameCount + i) * 0.1);

    push();

    rotate(45);

    rect(10, 0, tan((frameCount+i)*0.01)*5);

    // ellipse(-10, 0, sin((frameCount+i)*0.05)*40);

    pop();

    pop();

  }

  pop();

}