let a1, a2;

let aspeed1 = 0.1;

let aspeed2 = -0.1;

let low = 0;

let high = 145;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  randomSeed(0);

  a = 0;

  a1 = 145;

  a2 = 145;

  x = width / 2;

  noCursor();

}

​

function draw() {

  background(0);

  a1 += aspeed1;

  a2 += aspeed2

  a1 = constrain(a1, low - 1, high + 1);

  a2 = constrain(a2, low - 1, high + 1);

  //console.log(a1, a2);

  // If it's all one color

  if ((a1 < low && a2 < low) || (a1 > high && a2 > high)) {

    console.log("NEW DIVISION");

    x = random(width);

    if (frameCount > 0) {

      console.log("ROTATE");

      a = random(1) > 0.5 ? 0 : PI/2;

    }

    bounce(random(width));

  // Or if at opposite extremes

  } else if ((a1 < low && a2 > high) || (a1 > high && a2 < low)) {

    console.log("REVERSE");

    bounce(random(width));

  }

  push();

  //translate(0, -width);

  rotate(a);

  fill(255, a1);

  rect(0, -width, x, width * 2);

  fill(255, a2);

  rect(x, -width, width-x, width * 2);

  pop();

}

​

function bounce(_x) {

  a1 = constrain(a1, low, high);

  a2 = constrain(a2, low, high);

  if (_x < x) aspeed1 *= -1;

  else aspeed2 *= -1;

  console.log(aspeed1, aspeed2, a1, a2);

​

}