let cLayer, mLayer, yLayer, kLayer;

let layers = [];

let layerIndex = 0;

let progressWidth = 0;

let drawSpeed;

​

function preload() {

  img = loadImage('source2.jpg');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  img.loadPixels();

​

  // Set drawSpeed for 15 seconds to cover the width

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

​

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

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

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

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

​

  // CMYK Separation

  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];

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

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

​

      // RGB to CMYK conversion

      let c = 1 - (r / 255);

      let m = 1 - (g / 255);

      let y = 1 - (b / 255);

      let k = min(c, m, y);

​

      c = (c - k) / (1 - k);

      m = (m - k) / (1 - k);

      y = (y - k) / (1 - k);

​

      // Draw each layer

      let cColor = color(0, 255 * (1 - c), 255 * (1 - c));

      let mColor = color(255 * (1 - m), 0, 255 * (1 - m));

      let yColor = color(255 * (1 - y), 255 * (1 - y), 0);

      let kColor = color(255 * (1 - k));

​

      cLayer.stroke(cColor);

      mLayer.stroke(mColor);

      yLayer.stroke(yColor);

      kLayer.stroke(kColor);

​

      cLayer.point(x, yy);

      mLayer.point(x, yy);

      yLayer.point(x, yy);

      kLayer.point(x, yy);

    }

  }

​

  layers = [cLayer, mLayer, yLayer, kLayer];

​

  // Add a new layer every 15 seconds

  setInterval(() => {

    if (layerIndex < layers.length - 1) {

      layerIndex++;

      progressWidth = 0; // Reset

    }

  }, 15000);

}

​

function draw() {

  background(255);

​

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

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

​

  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;

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}