let r;

let x;

let y;

​

​

function preload() {

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

}

​

​

let animationIndex;

let textPoints;

let followPoints;

let time;

​

​

function setup() {

  createCanvas(600, 600);

  x = 0

  y = 0

  animationIndex = 0;

  textPoints = [];

  followPoints = [];

  time = 0;

  background(220);

  fill(0);

  ellipse(width/2, height/2, 1000,1000);

​

  let detail = 10;

  let fontSize = 20;

  let space = createPointText(' space ', 0, -3, fontSize, detail, 0);

  textPoints.push(space);

  let maxPoints = 0;

  textPoints.forEach(textInfo => {

    maxPoints = max(maxPoints, textInfo.length);

  });

​

​

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

    let point = new Follow(random(-100, 100), random(-100, 100));

    followPoints.push(point);

  }

}

​

function draw() {

​

  let x = random(0, width);

  let y = random(0, height);

  if(dist(x,y,width/2, height/2)<600){

  stroke(255);

  point(x, y);

  }

​

  time += 0.01;

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

    if (animationIndex === 0) {

​

      let maxIndex = round(min(textPoints[0].length - 1, index));

      let textPoint = textPoints[0][maxIndex];

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

    } else if (animationIndex === 1) {

      let maxIndex = round(min(textPoints[0].length - 1, index) * osc(.3));

      let textPoint = textPoints[0][maxIndex];

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

    }

    point.update();

​

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

      let offset = noise(x, y, time ) * TWO_PI*2;

      let offsetX = sin(offset) * 20;

      let offsetY = cos(offset) * 20;

      let os = osc(x / width) - osc(y / height);

      if (animationIndex === 1) {

        ellipse(x, y, 5 + offset, 5 + offset);

      } else if (animationIndex === 2) {

        strokeWeight(offset / 5);

        line(x, y, x + offset, y + offsetY);

      } else {

        fill(255,255,255,100);

noStroke();

      ellipse(x, y, 20 * os, 20 * os);

      }

    });

  });

}

​

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);

  textPoints.forEach(letter => {

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

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

  });

  return textPoints;

}

​

function mousePressed() {

  animationIndex += 1;

  animationIndex = animationIndex % 9;

}

​

function osc(scale) {

  if (!scale) {

    scale = 1;

  }

  return abs(sin(frameCount * 0.01 * scale));

}

​

class Follow {

  constructor(x, y) {

    this.currPos = createVector(x, y);

    this.finalPos = createVector(0, 20);

    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);

  }

}