let cols = 8;

let rows = 6;

let cellWidth;

let cellHeight;

let frameBuffers = []; // Array to store frame buffers for each cell

let bufferSize = 30; // Size of the buffer for each cell

​

function setup() {

  createCanvas(640, 480);

  frameRate(10)

  video = createCapture(VIDEO);

  video.size(width, height);

  cellWidth = width / cols;

  cellHeight = height / rows;

​

  // Initialize frame buffers for each cell

  for (let i = 0; i < cols * rows; i++) {

    frameBuffers[i] = [];

  }

​

  video.hide();

}

​

function draw() {

  // Update frame buffers with the current video frame

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

    for (let j = 0; j < rows; j++) {

      let index = j * cols + i;

      let img = video.get(i * cellWidth, j * cellHeight, cellWidth, cellHeight);

​

      // Add the current cell frame to the buffer and maintain the buffer size

      frameBuffers[index].push(img);

      if (frameBuffers[index].length > bufferSize) {

        frameBuffers[index].shift(); // Remove the oldest frame

      }

    }

  }

​

  // Display a delayed frame from the buffer for each cell

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

    for (let j = 0; j < rows; j++) {

      let index = j * cols + i;

      let buffer = frameBuffers[index];

      let frameIndex = floor(random(buffer.length)); // Randomly select a frame to simulate unsynchronization

​

      if (buffer.length > 0) {

        let img = buffer[frameIndex];

        image(img, i * cellWidth, j * cellHeight);

      }

    }

  }

}

​