let side = 300;

let goals = [];

let t = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pos = createVector(width/2, height/2)

  s = createVector(side/2, side/2)

  let a = pos.copy().sub(s);

  let b = pos.copy().sub(createVector(-s.x, s.y));

  let c = pos.copy().sub(createVector(s.x, -s.y));

  let d = pos.copy().add(s);

  goals.push({ start: a, end: b })

  goals.push({ start: b, end: d })

  goals.push({ start: d, end: c })

  goals.push({ start: c, end: a })

}

​

function draw() {

  background(255);

  rectMode(CENTER)

  stroke(0, 0, 255);

  rect(pos.x, pos.y, side, side);

​

  push();

  let lerped = [];

  for (let goal of goals) {

    let p = p5.Vector.lerp(goal.start, goal.end, t);

    lerped.push(p);

  }

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

    if (lerped[i + 1]) {

      stroke(255, 0, 0);

      line(lerped[i].x, lerped[i].y, lerped[i + 1].x, lerped[i + 1].y) 

    } else {

      stroke(255, 0, 0);

      line(lerped[i].x, lerped[i].y, lerped[0].x, lerped[0].y) 

    }

  }

  pop();

  t += 0.01

  if (t > 1) {

    t = 0;

  }

}