groteskFont = loadFont('https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2Fgrotesk.otf?v=1580943594863sk.otf');

}

​

let animationIndex;

let textPoints1, textPoints2;

let followPoints; 

​

function setup() {

  createCanvas(500, 500);

  animationIndex = 0;

  followPoints = [];

​

  let fontDetail = 0.5;

  let fontSize = 40;

  textPoints1 = createPointText(' 1 ', 0, 0, fontSize, fontDetail, 0);

  textPoints2 = createPointText(' 2 ', 0, 0, fontSize, fontDetail, 0);

  //we need to figure out the max # of Follow points to make based off our text

  let maxPoints = max(textPoints1.length, textPoints2.length);

  // This is the same

  // let maxPoints = textPoints1.length;

  // if(maxPoints < textPoints2.length) {

  //   maxPoints = textPoints2.length;

  // }

​

  // Create our Follow Points

  for (let i = 0; i < maxPoints; i++) {

    let point = new Follow(random(0, width), random(0, height));

    followPoints.push(point);

  }

}

​

function draw() {

  colorMode(RGB, 255);

  background(255, 255, 255, 200);

​

  followPoints.forEach((point, index) => {

    if(animationIndex === 0) {

      // textPoints1 may have fewer points than the total # of follow points 

      // if our current index > textPoints1.length -1 we have already drawn 

      // every point for that text, so we return and skip setting setting the

      // point's position or drawing it

      // 

      if(index > textPoints1.length -1) { 

        return;

      }

      let textPoint = textPoints1[index];

      point.setPos(textPoint.x, textPoint.y);

    } else {

      if(index > textPoints2.length -1) {

        return;

      }

      let textPoint = textPoints2[index];

      point.setPos(textPoint.x, textPoint.y);

    }

    point.update();

    point.draw((x, y) => {

      if(animationIndex === 0) {

        ellipse(x, y, 25, 25);

      } else {

        rect(x, y, 25, 25);

      }

    });

  });

}

​

function createPointText(text, x, y, fontSize, sampleFactor, simplifyThreshold) {

  let textPoints = groteskFont.textToPoints(text, x, y, fontSize, {

    sampleFactor: sampleFactor,

    simplifyThreshold: simplifyThreshold

  });

  let bounds = groteskFont.textBounds(text, x, y, fontSize);

  //scale each letter to fit the screen

  textPoints.forEach(letter => {

    letter.x = letter.x  * width / bounds.w;

    letter.y = letter.y  * (height - 100) / bounds.h + height - 60;

  });

  return textPoints;

}

​

// incriments the animaiton index

function mousePressed() {

  animationIndex += 1;

  animationIndex = animationIndex % 2;

}

​

// Handels interpolating a point towards the a give position 

// using setPos. 

// requires: update() to be called every frame and 

// a function for drawing to be passed into draw().

class Follow {

  constructor(x, y) {

    this.currPos = createVector(x, y);

    this.finalPos = createVector(0, 0);

    this.speed = random(0.1, .2);

  }

​

  setPos(x, y) {

    this.finalPos.set(x, y);

  }

​

  update() {

    this.currPos = p5.Vector.lerp(this.currPos, this.finalPos, this.speed);

  }

​

  draw(shape) {

    shape(this.currPos.x, this.currPos.y);

  }

}