let word = "GLITCH"; //change string

let maxDistFromPin = 40 //change size of effect from each "pin"

let fontSize = 128

​

let points;

let bounds;

let pinArray = [];

​

function preload() {

  font = loadFont("Archivo-Bold.ttf")

}

​

function setup() {

  createCanvas(600, 400);

  textAlign(CENTER,CENTER);

  textSize(128);

  textFont(font);

  angleMode(DEGREES);

  points = font.textToPoints(word, width/2, height/2, fontSize, {

    sampleFactor: 0.5

  })

  bounds = font.textBounds(word, width/2, height/2, fontSize)

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

    points[i].x = points[i].x - bounds.w/2;

    points[i].y = points[i].y + bounds.h/2;

  }

​

}

​

function draw() {

  background(0);

  let drawingContour = false;

  noStroke();

  beginShape();

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

      if (i > 0) {

        distance = dist(points[i].x, points[i].y, points[i-1].x, points[i-1].y)

        if (distance > 10) {

          if (drawingContour) {

            endContour();

            beginContour();

          } else {

            beginContour();

          }

          drawingContour = true;

        }

      }

​

      for (var k=0; k<pinArray.length; k++) {

        pointVector = createVector(points[i].x, points[i].y);

        pinVector = createVector(pinArray[k].loc.x, pinArray[k].loc.y);

        distanceFromPin = dist(points[i].x, points[i].y, pinVector.x, pinVector.y);

        distanceVector = pinVector.sub(pointVector);

        distanceVector.mult(0.5);

​

        if (distanceFromPin < maxDistFromPin) {

          vertex(points[i].x + distanceVector.x, points[i].y + distanceVector.y);

        }

      }

      vertex(points[i].x, points[i].y);

    }

  endContour();

  endShape();

}

​

function mouseClicked() {

  pinArray.push(new Pin(mouseX, mouseY));

}

​

class Pin {

  constructor(x, y) {

    this.loc = createVector(x, y);

  }

}

​

​