let start_x1;

let start_x2;

​

// setup two x variable to hold the two target vertical positions

let target_x1;

let target_x2;

​

// the values we will actually reference to draw our geometry

let lerp_x1;

let lerp_x2;

​

// some lerping / transitioning values

let lerpVal = 0;

let lerpSpeed = 0.0125;

​

// some timer values to hold once the value have changed - without this the transitions happen straight after each other

let hold_timer = 25;

let hold = false;

​

function setup() {

  createCanvas(540, 540);

  rectMode(CORNERS); // setup the rect mode

​

  start_x1 = random(100, (width / 3) * 2); // some random values to start with

  start_x2 = random(start_x1, width-100);

​

  target_x1 = random(100, (width / 3) * 2); // some random target values to move towards

  target_x2 = random(target_x1, width-100);

}

​

function draw() {

  background(220);

​

  noStroke();

​

  //calculate our lerped x values;

  lerp_x1 = lerp(start_x1, target_x1, lerpVal);

  lerp_x2 = lerp(start_x2, target_x2, lerpVal);

​

  //point(lerp_x1, height / 2); // I used points to visualise this at the start

  //point(lerp_x2, height / 2);

​

  // set our colour and draw the rectangles

  fill(90, 45, 250);

  rect(0, 0, lerp_x1, height);

  fill(250, 95, 108);

  rect(lerp_x1, 0, lerp_x2, height);

  fill(71, 204, 250);

  rect(lerp_x2, 0, width, height);

​

  //Lerping to "1" and once you have reached one set hold to true

  if (lerpVal < 1 && hold == false) {

    lerpVal += lerpSpeed;

  } else {

    hold = true;

  }

  //triggered only if hold is true!

  if (hold == true) {

    //the following is triggered only once the countdown has completed!

    if (hold_timer <= 0) {

      // once we are at zero we need to reset a few things..

      hold = false; // reset hold to "false" - so start transitioning again

      hold_timer = 25; // reset the timer back to 25 to count back down to zero

      // set the old target values as the new starting points

      start_x1 = target_x1;

      start_x2 = target_x2;

      // make some new targets to transition towards

      target_x1 = random(100, (width / 3) * 2);

      target_x2 = random(target_x1, width-100);

      // reset out lerp value!

      lerpVal = 0;

    }

    // count the timer down - note how this happens AFTER checking if we are at zero

    hold_timer--;

  }

}

​