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(500, 500);

    r = round(random(1, 15))

  x = 0

  y = 0

  animationIndex = 0;

  textPoints = [];

  followPoints = [];

  time = 0;

​

  let detail = 3;

  let fontSize = 40;

  let one = createPointText(' 24 ', 0, 0, fontSize, detail, 0);

  textPoints.push(one);

​

  textPoints.push(createPointText('kobe ', 2, 0, fontSize, detail, 0));

​

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

  let maxPoints = 0;

  textPoints.forEach(textInfo => {

    maxPoints = max(maxPoints, textInfo.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() {

     background(255, 225, 0,10);

  ellipse(x, 50, 100, 100);

  fill(230,216,242,100);

​

  ellipse(x, x, 200, 200);

  fill(166, 145, 184,100);

​

  ellipse(x, 400, 90, 90);

  fill(172, 116, 219,100);

​

  ellipse(300, x, 80, 70);

  fill(165, 89, 227,100);

​

  ellipse(200, x, 20, 20);

  fill(79, 19, 128,100);

​

  ellipse(390, x, 20, 20);

  fill(162, 50, 252,100);

​

  ellipse(90, x, 90, 90);

  fill(143, 3, 255,100);

​

  ellipse(x, 300, 50, 50);

  fill(135, 78, 181,100);

​

​

  ellipse(x, x, 20, 20);

  fill(135, 78, 181,100);

​

​

  if (x < width) {

    x = x + 1;

  } else if (x == width) {

    x = 0;

  }

​

  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[1].length - 1, index) * osc(.3));

      let textPoint = textPoints[1][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 + .1) - osc(y / height + .1);

      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(136, 0, 255);

noStroke();

      ellipse(x, y, 25 * os, 25 * 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);

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

}

​

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

  }

}