let cols = 10; // Starting columns

let rows = 8; // Starting rows

let cellWidth;

let cellHeight;

let frameBuffers = [];

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

let frameRateSlider; // Slider for frame rate

let colSlider, rowSlider; // Sliders for columns and rows

let borderChangeInterval = 10000; // Interval for changing border color (10 seconds)

let lastBorderChangeTime = 0; // Last time the border color started changing

let borderColor; // Current border color

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  frameRateSlider = createSlider(1, 60, 30, 1);

  frameRateSlider.position(10, height + 25);

​

  colSlider = createSlider(1, 20, cols, 1);

  colSlider.position(10, height + 50);

  rowSlider = createSlider(1, 20, rows, 1);

  rowSlider.position(10, height + 75);

​

  calculateCellSize();

  initializeBuffers();

​

  borderColor = color(0); // Initialize border color as black

​

  video.hide();

}

​

function draw() {

  background(0);

​

  // Update cols and rows based on sliders' values

  if (cols !== colSlider.value() || rows !== rowSlider.value()) {

    cols = colSlider.value();

    rows = rowSlider.value();

    calculateCellSize();

    initializeBuffers();

  }

​

  frameRate(frameRateSlider.value());

​

  updateAndDisplayCells();

​

  // Animate border color

  animateBorderColor();

​

  drawCellBorders();

​

  // Display settings

  fill(255);

  noStroke();

  text(`Frame Rate: ${frameRateSlider.value()} FPS`, 200, height + 40);

  text(`Columns: ${cols}`, 200, height + 65);

  text(`Rows: ${rows}`, 200, height + 90);

}

​

function calculateCellSize() {

  cellWidth = width / cols;

  cellHeight = height / rows;

}

​

function initializeBuffers() {

  frameBuffers = [];

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

    frameBuffers.push([]);

  }

}

​

// ... Rest of the functions (updateAndDisplayCells, animateBorderColor, drawCellBorders) remain the same.

function updateAndDisplayCells() {

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

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

      let index = j * cols + i;

      if (index >= frameBuffers.length) {

        continue; // Skip if index is out of bounds

      }

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

​

      // Add the current frame to the buffer

      frameBuffers[index].push(img);

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

        frameBuffers[index].shift(); // Remove the oldest frame if the buffer is full

      }

​

      // Display a randomly selected frame from the buffer

      let frameIndex = floor(random(frameBuffers[index].length));

      image(frameBuffers[index][frameIndex], i * cellWidth, j * cellHeight);

    }

  }

}

​

function animateBorderColor() {

  let currentTime = millis();

  let elapsed = currentTime - lastBorderChangeTime;

  // Adjust the duration to include a hold time for the transparency

  let fadeDuration = 3500; // 3.5 seconds to fade

  let holdDuration = 3000; // 3 seconds to hold the transparency

  let totalDuration = fadeDuration * 2 + holdDuration; // Total cycle duration

​

  if (elapsed >= totalDuration) {

    // Reset the timer every total cycle

    lastBorderChangeTime = currentTime;

    elapsed = 0;

  }

​

  let t;

  if (elapsed <= fadeDuration) {

    // Fade to transparent

    t = map(elapsed, 0, fadeDuration, 0, 1);

  } else if (elapsed <= fadeDuration + holdDuration) {

    // Hold transparency

    t = 1;

  } else {

    // Fade back to black

    t = map(elapsed, fadeDuration + holdDuration, totalDuration, 1, 0);

  }

​

  // Interpolate between black and transparent based on 't'

  borderColor = lerpColor(color(0, 0, 0, 255), color(0, 0, 0, 0), t);

}

​

​

function drawCellBorders() {

  stroke(borderColor); // Use the animated border color

  noFill();

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

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

      rect(i * cellWidth, j * cellHeight, cellWidth, cellHeight);

    }

  }

}

​