let isDragging = false;

let cutoutSize = 100;

let videoScale = 2;

let cutoutStartX, cutoutStartY;

let placedSquares = [];

let squareMagnification = 2;

let showGrid = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

}

​

function draw() {

  background(0);

  if (video.loadedmetadata) {

    let scaledWidth = video.width * videoScale;

    let scaledHeight = video.height * videoScale;

    let x = (width - scaledWidth) / 2;

    let y = (height - scaledHeight) / 2;

    image(video, x, y, scaledWidth, scaledHeight);

    for (let square of placedSquares) {

      copy(

        video,

        square.sourceX,

        square.sourceY,

        int(square.size/(videoScale * square.magnification)),

        int(square.size/(videoScale * square.magnification)),

        square.x,

        square.y,

        square.size,

        square.size

      );

    }

       if (showGrid) {

      drawGrid(x, y, scaledWidth, scaledHeight);

    }

    if (isDragging) {

      let currentX = mouseX - cutoutSize/2;

      let currentY = mouseY - cutoutSize/2;

      copy(

        video,

        cutoutStartX,

        cutoutStartY,

        int(cutoutSize/(videoScale * squareMagnification)),

        int(cutoutSize/(videoScale * squareMagnification)),

        currentX,

        currentY,

        cutoutSize,

        cutoutSize

      );

    }

  }

}

​

function drawGrid(videoX, videoY, videoWidth, videoHeight) {

  push();

  // Draw grid lines

  stroke(255, 255, 255, 50);

  strokeWeight(1);

  // Draw vertical lines

  for (let x = videoX; x <= videoX + videoWidth; x += cutoutSize) {

    line(x, videoY, x, videoY + videoHeight);

  }

  // Draw horizontal lines

  for (let y = videoY; y <= videoY + videoHeight; y += cutoutSize) {

    line(videoX, y, videoX + videoWidth, y);

  }

  // Draw red dots at center of each grid square

  noStroke();

  fill(255, 0, 0, 200); // Semi-transparent red

  for (let x = videoX + cutoutSize/2; x < videoX + videoWidth; x += cutoutSize) {

    for (let y = videoY + cutoutSize/2; y < videoY + videoHeight; y += cutoutSize) {

      circle(x, y, 4); // 4-pixel diameter dot

    }

  }

  pop();

}

​

function mousePressed() {

  if (!isDragging && video.loadedmetadata) {

    let scaledWidth = video.width * videoScale;

    let scaledHeight = video.height * videoScale;

    let videoX = (width - scaledWidth) / 2;

    let videoY = (height - scaledHeight) / 2;

    if (mouseX >= videoX && mouseX < videoX + scaledWidth &&

        mouseY >= videoY && mouseY < videoY + scaledHeight) {

      let sourceX = int((mouseX - videoX) / videoScale);

      let sourceY = int((mouseY - videoY) / videoScale);

      let halfCutSize = int(cutoutSize / (2 * videoScale * squareMagnification));

      cutoutStartX = constrain(sourceX - halfCutSize, 0, video.width - int(cutoutSize/(videoScale * squareMagnification)));

      cutoutStartY = constrain(sourceY - halfCutSize, 0, video.height - int(cutoutSize/(videoScale * squareMagnification)));

      isDragging = true;

    }

  } else {

    placedSquares.push({

      sourceX: cutoutStartX,

      sourceY: cutoutStartY,

      x: mouseX - cutoutSize/2,

      y: mouseY - cutoutSize/2,

      size: cutoutSize,

      magnification: squareMagnification

    });

    isDragging = false;

  }

}

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    cutoutSize = cutoutSize === 100 ? 300 : 100;

  }

  if (key === 'x' || key === 'X') {

    squareMagnification = squareMagnification === 1 ? 2 : 1;

  }

  if (key === 'g' || key === 'G') {

    showGrid = !showGrid;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}