​

function setup() {

  createCanvas(600, 450);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  pixelDensity(1);

  frameRate(15); //framerate

}

​

function draw() {

  background(0);

  capture.loadPixels();

​

  const blockSize = 50;

  const w = capture.width;

  const h = capture.height;

  const blocksX = Math.floor(w / blockSize);

  const blocksY = Math.floor(h / blockSize);

​

  push();

  translate(width, 0);

  scale(-1, 1); //mirror image

​

  //block process

  for (let by = 0; by < blocksY; by++) {

    for (let bx = 0; bx < blocksX; bx++) {

      shuffleBlock(bx * blockSize, by * blockSize, blockSize, blockSize);

    }

  }

​

  capture.updatePixels();

  image(capture, 0, 0);

  pop();

}

​

function shuffleBlock(x, y, w, h) {

  let i = (x + y * capture.width) * 4;

  let blockPixels = [];

​

  //color get

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      let col = capture.pixels.slice(idx, idx + 4);

      blockPixels.push(col);

    }

  }

​

  //shufflecolors

  blockPixels = shuffleArray(blockPixels);

​

  //read colors to array

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      let col = blockPixels.shift();

      capture.pixels[idx] = col[0];

      capture.pixels[idx + 1] = col[1];

      capture.pixels[idx + 2] = col[2];

      capture.pixels[idx + 3] = col[3];

    }

  }

}

​

function shuffleArray(array) {

  for (let i = array.length - 1; i > 0; i--) {

    let j = Math.floor(Math.random() * (i + 1));

    [array[i], array[j]] = [array[j], array[i]];

      }

  return array;

}

​