let gothic;

let grotesk;

let fontSize = 150;

let sample = .5;

let letterWidth = 0;

let letterHeight = 0;

//height of rects

let rectHeight = 3;

//movement during pulses

let pulseValue = 0;

let vertLinePulseValue = 200;

​

let timerInt = 0;

let timerInt2 = 20;

​

let lineColor = 180

​

let wordArray;

​

function preload() {

​

  myriad = loadFont('MyriadPro-Bold.otf');

  gothic = loadFont('gothic.otf');

  grotesk = loadFont('grotesk.otf');

​

}

​

function setup() {

  createCanvas(600, 600);

  textFont(gothic);

  textSize(fontSize);

  fill(255, 0, 0);

  stroke(0);

  strokeWeight(2);

​

  rectMode(CENTER);

​

  wordArray = gothic.textToPoints('up', width / 2 - 80, height / 2 + 20, fontSize, {

    sampleFactor: sample

  });

}

​

function draw() {

  background(0);

  fill(255, 0, 0);

​

​

  let random1 = 0;

  let random2 = 0;

​

  let random1Echo = 0;

  let random2Echo = 0;

​

  let timerCheck = false;

​

  //timer for the "up" text

  timerInt++

  if (timerInt > 40) {

    timerCheck = false;

    random1 = random(0, -20);

    random2 = random(0, 18);

​

    //rectHeight *= 1.5;

    rectHeight += 2

​

    pulseValue += 5;

    vertLinePulseValue +=5;

​

    random1Echo = random1;

    random2Echo = random2;

  }

  if (timerInt > 50) {

    timerCheck = true;

  }

  if (timerCheck == true) {

    if (pulseValue > 0) {

      //pulseValue -= 5;

      pulseValue = 0;

      vertLinePulseValue = 200;

      timerInt = 0;

      rectHeight = 3;

    }

  }

​

​

​

  //timer for the lines

  timerInt2++

  if (timerInt2 > 40) {

​

  }

  if (timerInt2 > 45) {

    timerInt2 = 0;

  }

​

  stroke(lineColor - 40, 0, 0);

  //vertical lines

​

  line(width / 12, height / 7 * 5 - random1 / 2, width / 12 - vertLinePulseValue, height);

  line(width / 12 * 3, height / 7 * 5 - random1 / 2, width / 12 * 3 - (vertLinePulseValue/12*6), height);

  line(width / 12 * 5, height / 7 * 5 - random1 / 2, width / 12 * 5 - (vertLinePulseValue/12*3), height);

  line(width / 12 * 7, height / 7 * 5 - random1 / 2, width / 12 * 7 + (vertLinePulseValue/12*3), height);

  line(width / 12 * 9, height / 7 * 5 - random1 / 2, width / 12 * 9 + (vertLinePulseValue/12*6), height);

  line(width / 12 * 11, height / 7 * 5 - random1 / 2, width / 12 * 11 + (vertLinePulseValue), height);

​

  //horizontal line

  stroke(lineColor, 0, 0);

  rect(width / 2, height / 7 * 5 - random1 / 2, width, rectHeight);

​

  //thin horizontal lines

  stroke(lineColor - 40, 0, 0);

  rect(width / 2, height / 7 * 5.4 - (random1 / 2 - pulseValue), width, rectHeight / 5);

  rect(width / 2, height / 7 * 5.8 - (random1 / 2 - pulseValue * 1.3), width, rectHeight / 5);

  rect(width / 2, height / 7 * 6.2 - (random1 / 2 - pulseValue * 1.6), width, rectHeight / 5);

  rect(width / 2, height / 7 * 6.6 - (random1 / 2 - pulseValue * 1.9), width, rectHeight / 5);

​

​

​

  //line(0, height/3*2 + randomB1, 600, height/3*2 - randomB2);

​

  for (let i = 0; i < wordArray.length; i++) {

​

    stroke(255, 0, 0);

​

    ellipse(wordArray[i].x, wordArray[i].y + random1, letterWidth + 10, letterHeight + random2);

​

  }

}