----- Coding Tutorial by Patt Vira ----- 

Name: Oscillating Kinetic Typography

Video Tutorial: https://youtu.be/KCp0RgEvV3c?si=AiGYA1PgZ0u2qK4U

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let font;

let msg = "PATT"; let fontSize = 200; 

let fontPath; let path; let points = [];

​

let num = 20; let r = 30; let angle = 0;

​

function setup() {

  createCanvas(600, 400);

  angleMode(DEGREES);

  opentype.load("fonts/LEMONMILK-Regular.otf",  function(err, f){

    if (err) {

      console.log(err);

    } else {

      font = f;

    }

    fontPath = font.getPath(msg, 0, 0, fontSize);

    path = new g.Path(fontPath.commands);

    path = g.resampleByLength(path, 1);

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

      if (path.commands[i].type == "M") {

        points.push([]);

      }

      if (path.commands[i].type != "Z") {

        points[points.length - 1].push(createVector(path.commands[i].x, path.commands[i].y));

      }

    }

  });

}

​

function draw() {

  background(0, 0, 139);

  strokeWeight(3);

  stroke(255);

  translate(40, 170);

  for (let k=num; k>0; k--) {

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

      if(i == 1) {

        noFill();

      } else if (i == 3) {

        noFill();

      } else {

        fill(0, 0, 255, 100);

      }

    beginShape();

      for (let j=0; j<points[i].length; j++)      {

        vertex(points[i][j].x + r*sin(angle + k*20), points[i][j].y + k*10);

      }

      endShape(CLOSE);

    } 

  }

  angle +=3;

}