let rLayer, gLayer, bLayer;

let layers = [];

let layerIndex = 0;

let progressWidth = 0;

let drawSpeed;

​

function preload() {

  img = loadImage('source2.jpg');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  img.loadPixels();

​

  // draw speed for each layers = 15 sec

  drawSpeed = img.width / (15 * 60);

​

  // RGB layer

  rLayer = createGraphics(img.width, img.height);

  gLayer = createGraphics(img.width, img.height);

  bLayer = createGraphics(img.width, img.height);

​

  // RGB Channel Separation

  let contrastFactor = 1.2; // increase contrast

  for (let x = 0; x < img.width; x++) {

    for (let yy = 0; yy < img.height; yy++) {

      let index = (x + yy * img.width) * 4;

      let r = img.pixels[index + 0];

      let g = img.pixels[index + 1];

      let b = img.pixels[index + 2];

​

      // apply contrast adjustment

      r = adjustContrast(r, contrastFactor);

      g = adjustContrast(g, contrastFactor);

      b = adjustContrast(b, contrastFactor);

​

      // define color for each layer

      let rColor = color(r, 0, 0);

      let gColor = color(0, g, 0);

      let bColor = color(0, 0, b);

​

      rLayer.stroke(rColor);

      gLayer.stroke(gColor);

      bLayer.stroke(bColor);

​

      rLayer.point(x, yy);

      gLayer.point(x, yy);

      bLayer.point(x, yy);

    }

  }

​

  layers = [rLayer, gLayer, bLayer];

​

  // add a new layer every 15 seconds

  setInterval(() => {

    if (layerIndex < layers.length - 1) {

      layerIndex++;

      progressWidth = 0; // reset

    }

  }, 15000);

}

​

function adjustContrast(value, factor) {

  // centering value at 128, scaling by factor, then recentering

  return constrain((value - 128) * factor + 128, 0, 255);

}

​

function draw() {

  background(0); // for screen blendmode

​

  let offsetX = (windowWidth - img.width) / 2;

  let offsetY = (windowHeight - img.height) / 2;

​

  blendMode(SCREEN);

​

  // draw layers with screen effect

  for (let i = 0; i < layerIndex; i++) {

    image(layers[i], offsetX, offsetY);

  }

​

  // draw layer from left to right

  if (layerIndex < layers.length) {

    image(layers[layerIndex], offsetX, offsetY, progressWidth, img.height, 0, 0, progressWidth, img.height);

    progressWidth += drawSpeed;

    if (progressWidth > img.width) {

      progressWidth = img.width;

    }

  }

  blendMode(BLEND);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}