let images = [];

let captureIndex = 0;

let recording = false;

let myFont;

let countdownValue = 4;

let countdownTimer; // Timer for the countdown

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

let displayStartPage = true; // variable to display "start" page

let sound1;

​

//  preloading font and sound

function preload() {

  myFont = loadFont("myFont6.ttf");

  sound1 = loadSound("sound1.mov");

}

​

function setup() {

  createCanvas(1000, 700);

  textFont(myFont);

  textSize(130);

  fill(255);

​

  // creating four video feeds

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

    let video = createCapture(VIDEO);

    video.size(width / 3, height / 3);

    video.hide(); // hiding the video feed

    videos.push(video);

  }

}

​

// function to display the countdown

function startCountdown() {

  countdownValue = 4; // start the countdown with "nothing"

  clearInterval(countdownTimer); // clear the existing timer, necessary after the first image is taken after the sketch is played

  countdownTimer = setInterval(() => {

    countdownValue--;

    if (countdownValue === 0) {

      // when count is down to 0

      clearInterval(countdownTimer); // stopping the timer

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

      countdownValue = 4; // resetting the countdown value back to 4

      setTimeout(startCountdown, interval); // 1-second delay before restarting the countdown

    }

  }, interval); // repeat the function at 1-second intervals

}

​

function captureImage() {

  if (recording) {

    sound1.play(); // playing the sound when an image is captured

​

    images[captureIndex] = videos[captureIndex].get(); // capturing the image from each of the four video feeds

    captureIndex++;

​

    // when the four images are taken, recording is stopped and images are saved as a grid

    if (captureIndex >= 4) {

      stopRecording();

      saveImages();

    }

  }

}

​

function saveImages() {

  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.png");

}

​

function draw() {

  if (displayStartPage) {

    // display the start page

    background(128, 0, 32);

    fill(255);

    textSize(70);

    textAlign(LEFT, CENTER);

    text("PHOTO BOOTH", 80, height / 2);

    textSize(30);

    text(

      "STEP 1.  CLICK  ON  THIS  SCREEN \n \nSTEP 2.  PRESS  RECORD  TO  START \n TAKING   IMAGES",

      80,

      550

    );

  } else {

    // display the actual photo booth page

    background(128, 0, 32);

​

    // size, position, and color of rectangle behind the images

    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;

​

    fill(255);

    rect(gridX, gridY, rectWidth, rectHeight);

​

    // 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

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

    }

​

    // red ellipse at the top left of the grid to replicate "recording" flashing circle

    if (recording) {

      fill(255, 0, 0);

      // coordinates of the first image in the grid

      let firstImageX = gridX + 30;

      let firstImageY = gridY + 30;

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

    }

​

    // countdown text

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

      fill(255);

      textSize(200);

      textAlign(CENTER, CENTER);

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

    }

​

    // photobooth text on photobooth page

    fill(255);

    textSize(100);

    textAlign(LEFT, BASELINE);

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

  }

}

​

// function to set up serial communication when space bar is pressed

function keyPressed() {

  if (key === " ") {

    setUpSerial();

  }

}

​

// function to start recording

function startRecording() {

  if (!recording) {

    recording = true;

    captureIndex = 0;

    images = [null, null, null, null]; // reset the images array to clear previous session

    clearInterval(countdownTimer); // clear the timer from the previous session

​

    // clearing the video feeds

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

      videos[i].hide(); // hide the video to clear the old feed

      videos[i] = createCapture(VIDEO); // create a new video capture

      videos[i].size(width / 3, height / 3); // set size for each video feed

      videos[i].hide(); // hide the video feed

    }

​

    startCountdown(); // start the countdown before the first image is captured

  }

}

​

// function to stop recording

function stopRecording() {

  print("Recording ended");

  if (recording) {

    recording = false;

    clearInterval(countdownTimer); // clear the countdown timer completely

  }

}

​

// read serial data from arduino

function readSerial(data) {

  if (data != null) {

    if (data == "START") { // when data from arduino is "START"

      displayStartPage = false; // switch to the photo booth page

      startRecording(); // start recording

    } else if (data == "STOP") { // when data from arduino is "STOP"

      displayStartPage = true; // display start page

      stopRecording(); // stop recording

    }

  }

}

​