let loc1 = 142;

let loc2 = 150;

​

let direction1 = 1;

let direction2 = 1;

let _sampleFactor = 0.5;

let rectHeight = 2;

let _red = 255;

let _green =255;

function preload() {

  myFont = loadFont('font.otf');

}

​

function setup() {

  createCanvas(600, 600);

  textFont(myFont);

​

}

​

function draw() {

  background(255,255,210,59);

  noStroke();

​

  let fontArray = myFont.textToPoints("ZIP", loc1, height / 2 + 50, 200, {

    sampleFactor: _sampleFactor

  });

  fill(_red, _green, 20,99.9);

  textSize(200);

  text('ZIP', loc2, height / 2+45);

  fill(255, 20, 20,50);

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

    rect(fontArray[i].x, fontArray[i].y, -2, rectHeight);

  }

​

  if (mouseX > width / 2) {

        if(_red<255){

      _red+=6;

    }

            if(_green<255){

      _green+=2;

    }

​

    loc1 += direction1;

    loc2 += direction2;

​

    if (loc1 < 600) {

      direction1 += 1;

    }

    if (loc1 > 600) {

      loc1 = -400;

      direction1 = 0;

    }

    if (loc2 < 600) {

      direction2 += 1;

    }

    if (loc2 > 600) {

      loc2 = -400;

      direction2 = 0;

    }

​

  } else {

        if(_red>200){

      _red-=4;

    }

            if(_green>0){

      _green-=10;

    }

​

    if (loc1 > 142) {

      loc1--;

    }

    if (loc2 > 150) {

      loc2--;

    }

​

    loc1 += direction1;

    loc2 += direction2;

​

    if (loc1 < 350) {

      direction1 += 1;

    }

    if (loc1 > 350) {

      direction1 -= 1;

    }

    if (loc2 > 0) {

      direction2 -= 1;

    }

    if (loc2 < 0) {

      direction2 += 1;

    }

  }

​

​

  if (mouseY > height / 2) {

    if (rectHeight < 15) {

      rectHeight += .5;

    }

  } else {

    if (rectHeight > 2) {

      rectHeight -= .5;

    }

  }

​

}