let cols = 10; // Initialize columns

let rows = 8; // Initialize rows

let cellWidth;

let cellHeight;

let frameRateSlider, colSlider, rowSlider; // Sliders for frame rate, columns, and rows

let globalFrameBuffer = [];

let bufferSize = 30; // Size of the global frame buffer

let borderColor; // Current border color

let lastBorderColorChangeTime = 0; // Time when we last changed the border color

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Initialize sliders

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

  frameRateSlider.position(10, height + 25);

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

  colSlider.position(10, height + 50);

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

  rowSlider.position(10, height + 75);

​

  calculateCellDimensions(); // Calculate initial cell dimensions

​

  borderColor = color(0); // Start with black border

​

  video.hide();

}

​

function draw() {

  background(0);

​

  // Update the frame rate based on the slider's value

  frameRate(frameRateSlider.value());

​

  // Check for changes in columns and rows based on sliders' values

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

    cols = colSlider.value();

    rows = rowSlider.value();

    calculateCellDimensions(); // Recalculate cell dimensions when grid changes

  }

​

  // Maintain the global frame buffer

  if (globalFrameBuffer.length >= bufferSize) {

    globalFrameBuffer.shift(); // Remove the oldest frame if the buffer is full

  }

  globalFrameBuffer.push(video.get()); // Capture the current frame

​

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

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

      drawCell(i, j); // Draw each cell based on the global frame buffer

    }

  }

​

  animateBorderColor(); // Animate the border color

  drawCellBorders()

​

  drawSettingsInfo(); // Display settings info like frame rate and grid size

}

​

function calculateCellDimensions() {

  cellWidth = width / cols; // Calculate the width of each cell

  cellHeight = height / rows; // Calculate the height of each cell

}

​

function drawCell(col, row) {

  let x = col * cellWidth;

  let y = row * cellHeight;

  let frameIndex = floor(random(globalFrameBuffer.length));

  let frame = globalFrameBuffer[frameIndex];

  image(frame, x, y, cellWidth, cellHeight, x, y, cellWidth, cellHeight);

}

function animateBorderColor() {

  let currentTime = millis();

  let cycleDuration = 20500; // Total duration for one full cycle

  let elapsedTime = (currentTime - lastBorderColorChangeTime) % cycleDuration;

​

  if (elapsedTime < 10000) { // First 10 seconds - Black

    borderColor = color(0, 0, 0);

  } else if (elapsedTime >= 10000 && elapsedTime < 13500) { // Next 3.5 seconds - Transition to semi-transparent

    let t = map(elapsedTime, 10000, 13500, 0, 1);

    borderColor = lerpColor(color(0, 0, 0), color(0, 0, 0, 50), t); // Adjust the second color's alpha for less transparency

  } else if (elapsedTime >= 13500 && elapsedTime < 17000) { // Hold semi-transparent for 3 seconds

    borderColor = color(0, 0, 0, 50); // Adjust alpha to match the end of the transition phase

  } else if (elapsedTime >= 17000) { // Last 3.5 seconds - Transition back to black

    let t = map(elapsedTime, 17000, 20500, 0, 1);

    borderColor = lerpColor(color(0, 0, 0, 50), color(0, 0, 0), t); // Start with semi-transparent

  }

}

​

function drawCellBorders() {

  stroke(borderColor);

  strokeWeight(1.5); // Increase stroke weight to make borders more noticeable

  noFill();

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

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

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

    }

  }

}

​

​

function drawSettingsInfo() {

  fill(255);

  noStroke();

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

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

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

}

​

// Ensure to implement or adjust the animateBorderColor function as previously described

​