let images = [];

let captureIndex = 0;

let recording = false;

let myFont;

let countdownValue = 4; // 4 for "nothing", 3 for "3", etc.

let countdownTimer; // Timer for the countdown

const interval = 1000; // 1-second interval for countdown

let showStartPage = true; // Variable to control start page display

let sound1; // Variable to hold the sound

​

function preload() {

  myFont = loadFont('myFont6.ttf'); // Replace with the path to your font file

  sound1 = loadSound('sound1.mov'); // Load the sound file

}

​

function setup() {

  createCanvas(1000, 700);

  textFont(myFont); // Set the custom font

  textSize(130); // Set the text size

  fill(255); // Set the text color

​

  // Create four video feeds

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

    let video = createCapture(VIDEO);

    video.size(width / 3, height / 3); // Set size for each video feed

    video.hide(); // Hide the video feed if necessary

    videos.push(video);

  }

​

  // Initialize an empty array with four placeholders for images

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

    images.push(null);

  }

}

​

function startCountdown() {

  countdownValue = 4; // Start the countdown at "nothing"

  countdownTimer = setInterval(() => {

    countdownValue--;

    if (countdownValue === 0) {

      clearInterval(countdownTimer); // Stop the timer

      captureImage(); // Capture an image after the countdown

      countdownValue = 4; // Reset the countdown value

      setTimeout(startCountdown, interval); // Delay before restarting the countdown

    }

  }, interval); // Update every second

}

​

function captureImage() {

  if (recording) {

    // Play the sound when an image is captured

    sound1.play();

​

    // Capture the image from each video feed

    images[captureIndex] = videos[captureIndex].get();

    captureIndex++;

​

    // If four images have been captured, stop recording and save the images

    if (captureIndex >= 4) {

      stopRecording();

      saveImagesAsGrid();

    }

  }

}

​

function saveImagesAsGrid() {

  let gridHeight = images[0].height * 4;

  let gridImage = createGraphics(images[0].width, gridHeight);

​

  // Draw each image in a vertical grid

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

    if (images[i]) {

      gridImage.image(images[i], 0, i * images[0].height);

    }

  }

​

  // Save the grid image as a PNG

  save(gridImage, 'photo_grid.png');

}

​

function draw() {

  if (showStartPage) {

    // Display the start page

    background(128, 0, 32); // Burgundy background

    fill(255);

    textSize(70);

    textAlign(CENTER, CENTER);

    text('PHOTO BOOTH \n \n \n PRESS RECORD TO START \n TAKING IMAGES', width / 2, height / 2);

  } else {

    // Display the photo booth interface

    // Burgundy background

    background(128, 0, 32); // RGB values for burgundy

​

    // Calculate the position and size for the grey gradient rectangle

    let rectWidth = width / 3 * 2 + 20;

    let rectHeight = height / 3 * 2 + 20;

    let gridX = width / 2 - rectWidth / 2;

    let gridY = height / 2 - rectHeight / 2 + 40;

​

    // Draw the grey gradient rectangle

    let lightGrey = color(200); // Light grey

    let darkGrey = color(80); // Dark grey

    setGradient(gridX, gridY, rectWidth, rectHeight, lightGrey, darkGrey, "Y");

​

    // Display the video feeds in a grid layout

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

      let offsetX = (i % 2) * (width / 3);

      let offsetY = Math.floor(i / 2) * (height / 3);

​

      // Display the video feed directly

      image(videos[i], gridX + offsetX + 10, gridY + offsetY + 10);

    }

​

    // Draw a red ellipse at the top-left corner of the first image in the grid

    if (recording) {

      fill(255, 0, 0); // Red color

      let firstImageX = gridX + 30; // X coordinate of the first image in the grid

      let firstImageY = gridY + 30; // Y coordinate of the first image in the grid

      ellipse(firstImageX, firstImageY, 20, 20); // Position the ellipse at the top-left corner of the first image

    }

​

    // Draw countdown text

    if (recording && countdownValue <= 3 && countdownValue > 0) {

      fill(255);

      textSize(200);

      textAlign(CENTER, CENTER);

      text(countdownValue, width / 2, height / 2);

    }

​

    // Draw the "PHOTO BOOTH" text in its original position

    fill(255);

    textSize(100);

    textAlign(LEFT, BASELINE);

    text('PHOTO BOOTH', 130, 130);

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  if (axis == "Y") { // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis == "X") { // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

function keyPressed() {

  if (key === ' ') {

    setUpSerial();

  }

}

​

function startRecording() {

  print("Recording started");

  if (!recording) {

    recording = true;

    captureIndex = 0;

    startCountdown(); // Start countdown before the first capture

  }

}

​

function stopRecording() {

  print("Recording ended");

  if (recording) {

    recording = false;

    clearInterval(countdownTimer);

  }

}

​

function readSerial(data) {

  if (data != null) {

    if (data == "START") {

      showStartPage = false; // Switch to the photo booth page

      startRecording(); // Start recording

    } else if (data == "STOP") {

      showStartPage = true;

      stopRecording();

    }

  }

}

​