//with a width that expands to the canvas edges

var door1, door2;

​

function setup() {

  createCanvas(400, 400);

  colorMode(HSB, 360, 1, 1);

  //noStroke();

  door1 = {

    x1: 0,

    y1: 0,

    x2: width / 2,

    y2: 0,

    width: width / 2,

    height: height,

    hue: 0

  }

  door2 = {

    x1: 0,

    y1: 0,

    x2: width / 2,

    y2: 0,

    width: width / 2,

    height: height,

    hue: 1

  }

}

​

function draw() {

  background(220);

  door1.x1 = lerp(door1.x1, -(width / 2), 0.1);

  door1.x2 = lerp(door1.x2, width, 0.1);

  if(door1.x1 <= -((width / 2) + 1) || door1.x2 >= width - 1) {

    door1.x1 = door2.x1;

    door1.y1 = door2.y1;

    door1.x2 = door2.x2;

    door1.y2 = door2.y2;

    door1.width = door2.width;

    door1.height = door2.height;

    door1.hue = door2.hue;

    door2 = {

      x1: 0,

      y1: 0,

      x2: width / 2,

      y2: 0,

      width: width / 2,

      height: height,

      hue: frameCount % 360

    }

  }

  fill(door2.hue, 1, 1);

  rect(door2.x1, door2.y1, door2.width, door2.height);

  rect(door2.x2, door2.y2, door2.width, door2.height);

  fill(door1.hue, 1, 1);

  rect(door1.x1, door1.y1, door1.width, door1.height);

  rect(door1.x2, door1.y2, door1.width, door1.height);

}