let xspeed1, xspeed2;

let speed = 5;

let low = 0;

let high = 255;

let a = low;

let aspeed = 0.5;

let bg = high;

let m = 120;

let NUM_TXTS = 6;

​

// Textures

let txts = [];

let txt;

​

function preload() {

  //for (let i = 0; i < NUM_TXTS; i++) {

    txts.push(loadImage("0.jpg"));

    txts.push(loadImage("1.jpg"));

    txts.push(loadImage("2.jpg"));

    txts.push(loadImage("3.jpg"));

    txts.push(loadImage("4.jpg"));

    txts.push(loadImage("5.jpg"));

  //}

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  noCursor();

  randomSeed(0);

  reset();

}

​

function reset() {

  console.log("RESET");

  a = low;

  x1 = width * random(0.1, 0.5);

  x2 = width - x1;

  xspeed1 = random(-speed, speed); //random(1) > 0.5 ? -speed : speed;

  // Go the opposite way

  xspeed2 = random(-speed, speed); //xspeed1 > 0 ? -speed : speed;

  // Pick a random texture

  txt = txts[floor(random(txts.length))];

}

​

function draw() {

  // If bg is white

  background(bg);

  tint(bg, a);

  image(txt, 0, 0);

​

  // Is the background white or black?

  // Make it the oppposite color

  fill(bg < low ? low : high);

  rect(0, 0, x1, height);

  rect(x2, 0, width - x2, height);

  fill(bg > low ? low : high, a);

  rect(0, 0, x1, height);

  rect(x2, 0, width - x2, height);

  a += aspeed;

  // If fully faded in

  if (a > high + m || a < low - m) {

    x1 += xspeed1;

    x2 += xspeed2;

    if ((x1 > width || x1 < 0) && (x2 > width || x2 < 0)) {

      if (x1 > width || x2 < 0) {

        // If the background was white, make it black

        bg = bg > low ? low : high;

        console.log(bg);

      }

      reset();

    }

  }

​

  //background(0);

​

}