let cols = 10;

let rows = 8;

let frameRateSlider, colSlider, rowSlider;

let globalFrameBuffer = [];

let bufferSize = 30;

let borderColor;

let transitionStartTime = 0; // Time when the current transition started

let borderAlpha = 255; // Initial alpha value for the border color (fully opaque)

let transitioning = false; // Flag to indicate if we are currently in a transition

let transitionDuration = 3500; // Duration of the transition in milliseconds

​

function setup() {

 createCanvas(640, 480).parent('canvasContainer'); // Assuming there's a div with id 'canvasContainer'

  video = createCapture(VIDEO);

  video.size(width, height);

      video.class('grayscale'); // Add a class to the video element for CSS targeting

​

  video.hide(); // Use this if you plan to draw the video onto the canvas manually

​

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

  frameRateSlider.position(10, height + 25);

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

  colSlider.position(10, height + 50);

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

  rowSlider.position(10, height + 75);

​

  calculateCellDimensions();

​

  video.hide();

}

​

function draw() {

  background(0);

  frameRate(frameRateSlider.value());

​

  // Update cols and rows from sliders

  cols = colSlider.value();

  rows = rowSlider.value();

  calculateCellDimensions();

​

  // Maintain the global frame buffer

  if (globalFrameBuffer.length >= bufferSize) {

    globalFrameBuffer.shift();

  }

  globalFrameBuffer.push(video.get());

​

  // Draw each cell based on the global frame buffer

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

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

      drawCell(i, j);

    }

  }

​

  updateBorderColor();

  drawCellBorders(); // Apply the current border visibility setting

  drawSettingsInfo();

}

​

function calculateCellDimensions() {

  cellWidth = width / cols;

  cellHeight = height / rows;

}

​

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 updateBorderColor() {

  let currentTime = millis();

  // Check if we should start a new transition

  if (!transitioning && currentTime - transitionStartTime > 5000 + 7000) { // Wait for 10s opaque, 7s transparent, start new cycle

    transitioning = true;

    transitionStartTime = currentTime;

  }

​

  if (transitioning) {

    let elapsed = currentTime - transitionStartTime;

    if (elapsed <= transitionDuration) { // Fade to transparent

      borderAlpha = map(elapsed, 0, transitionDuration, 255, 0);

    } else if (elapsed <= transitionDuration + 7000) { // Hold transparent

      borderAlpha = 0;

    } else if (elapsed <= 2 * transitionDuration + 7000) { // Fade to opaque

      borderAlpha = map(elapsed, transitionDuration + 7000, 2 * transitionDuration + 7000, 0, 255);

    } else {

      transitioning = false;

      borderAlpha = 255;

      transitionStartTime = currentTime; // Reset for the next cycle

    }

  }

  borderColor = color(0, 0, 0, borderAlpha);

}

​

function drawCellBorders() {

  stroke(borderColor);

  strokeWeight(0.9); // Set the stroke weight for visibility

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

}

​

​

​