let y;

let groteskFont;

​

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

  angleMode(DEGREES);

  //gradient background

  c1 = color(232, 249, 255);

  c2 = color(0, 188, 255);

  setGradient(c1, c2);

  x = 0

  y = 0

  animationIndex = 0;

  textPoints = [];

  followPoints = [];

  time = 0;

  let detail = 5;

  let fontSize = 10;

​

  let one = createPointText('water', 0, -1, fontSize, detail, 0);

  textPoints.push(one);

  let maxPoints = 100;

  textPoints.forEach(textInfo => {

    maxPoints = max(maxPoints, textInfo.length);

  });

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

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

    followPoints.push(point);

  }

​

}

​

function draw() {

  time += 0.5;

  fill(255,255,255,5);

  noStroke();

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

    }

    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*osc, y*osc + offset, 5 * osc + offset);

      } else if (animationIndex === 2) {

        strokeWeight(offset / 5);

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

      } else {

        // fill(os * 255, 0, 255 - os * 255)

        // stroke(os * 255, 0, 255 - os * 255)

        ellipse(x, y, 15, 15);

      }

    });

  });

}

​

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 - 200) / bounds.h + height - 60;

  });

  return textPoints;

}

​

​

​

function osc(scale) {

  if (!scale) {

    scale = 10;

  }

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

}

​

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

  }

​

​

​

​

​

}

​

​

​

​

function leaf(leafX, leafY) {

  if (x < 600) {

      x = x + 1;

    } else if (x == 600) {

      x = 0;

    }

  }

​

function setGradient(c1, c2) {

  noFill();

  for (var y = 0; y < height; y++) {

    var inter = map(y, 0, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, y, width, y);

  }

​

​

}

​