let snapshot; // Variable to store the captured photo

let hatImages = []; // Array to store the hat images

let animalImages = []; // Array to store the animal images

let hatX = 0; // X-coordinate of the hat position

let hatY = 0; // Y-coordinate of the hat position

let animalX = 0; // X-coordinate of the animal position

let animalY = 0; // Y-coordinate of the animal position

let selectedHat = 0; // Index of the currently selected hat

let selectedAnimal = 0; // Index of the currently selected animal

let logo;

​

let participantName = "";

​

function preload() {

  // Preload the hat images

  hatImages[0] = loadImage("hat1.png");

  hatImages[1] = loadImage("hat2.png");

  hatImages[2] = loadImage("hat3.png");

​

  // Preload the animal images

  animalImages[0] = loadImage("animal1.png");

  animalImages[1] = loadImage("animal2.png");

  animalImages[2] = loadImage("animal3.png");

​

  //Preload the logo image

  logo = loadImage("logo-1.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Create a canvas to display the video and captured photo

  capture = createCapture(VIDEO); // Create a video capture object

  capture.hide();

​

  InputName(); // calling the function that creates a text box

}

​

function draw() {

  background(240); // Set the background color to white

​

  designID(); // calling the function that

  //draws the design of the ID

​

  //Display video

  imageMode(CENTER);

  image(capture, width / 2, height / 2 - 100, 220, 180);

​

  if (!serialActive) {

    textSize(20);

    text("Press '/' to Begin", 100, 30);

  } else {

    text("Instructions", 100, 30);

  }

​

  if (snapshot) {

    // If a photo is captured, display it along with the hat and animal

​

    // snapshot.resize (50,0);

    image(snapshot, width / 2, height / 2 - 100, 220, 180); //make it a smaller size

​

    if (selectedHat !== -1) {

      image(hatImages[selectedHat], hatX, hatY);

    }

​

    if (selectedAnimal !== -1) {

      image(animalImages[selectedAnimal], animalX, animalY); // if - 1 then no hat is selected

      // otherwise its true

    }

  }

}

​

function keyPressed() {

  // Capture a photo when the Enter key is pressed

  if (keyCode === ENTER) {

    snapshot = capture.get(); // Capture the current frame from the video

    capture.hide(); // Hide the video capture

    // image(snapshot, 0, 0); // Display the captured photo

  } else if (key === "/") {

    setUpSerial();

  } else if (key === "s") {

    print("saved");

  else if (key === "r"){

​

let hatX = 0; // X-coordinate of the hat position

let hatY = 0; // Y-coordinate of the hat position

let animalX = 0; // X-coordinate of the animal position

let animalY = 0; // Y-coordinate of the animal position

let selectedHat = 0; // Index of the currently selected hat

let selectedAnimal = 0; // Index of the currently selected animal

  capture = createCapture(VIDEO); // Create a video capture object

  capture.hide();

​

  InputName(); // calling the function that creates a text box

}

    //DisplayImageInGallery ();

  }

}

​

function captureBadge() {

  // Assuming the badge area is at position (100, 100) and is 300x300

  let badgeX = (width - (width / 2 - 310)) / 2;

  let badgeY = (height - (height - 10)) / 2;

  // Calculate the width and height of the badge

  let badgeWidth = width / 2 - 310;

  let badgeHeight = height - 10;

​

  // Capture the specified area of the canvas

  let badgeFrame = get(badgeX, badgeY, badgeWidth, badgeHeight)

  save(badgeFrame, "myBadge.png");

}

​

function designID() {

  //ID card general form

  rectMode(CENTER);

  fill(255);

  strokeWeight(15);

  stroke(101, 1, 144);

  rect(width / 2, height / 2, width / 2 - 310, height - 10, 10);

​

  //display logo image

  logo.resize(40, 41);

  image(logo, width / 2, height / 2 - 230);

​

  //Text "NYUAD"

​

  noStroke(0);

  fill(101, 1, 144);

  textAlign(CENTER, CENTER);

  textSize(40);

  textStyle(BOLD);

  text("NYUAD", width / 2, height / 2 + 50); // Display "NYUAD" below the photograph

​

  if (participantName != "") {

    text(participantName, width / 2, height / 2 + 100); // Display "NYUAD" below the photograph

  }

}

​

function InputName() {

  // Create an input element for the participant's name

  nameInput = createInput();

  nameInput.position(width / 2 - 110, height / 2 + 100); // Set the position of the input box

  nameInput.size(200, 20); // Set the size of the input box

​

  submitButton = createButton("Submit"); // Create a button to submit the input

  submitButton.position(width / 2 + 80, height / 2 + 180);

  submitButton.mousePressed(submitName); // Call the submitName function when the button is pressed

}

​

function submitName() {

  // Function to be called when the submit button is pressed

  participantName = nameInput.value();

  console.log("Submitted Name:", participantName);

  nameInput.hide();

  submitButton.hide();

  captureButton = createButton("Capture"); // Create a button to submit the input

  captureButton.position(width / 2 + 80, height / 2 + 180);

  captureButton.mousePressed(captureBadge);

}

​

/*function DisplayImageInGallery (){

  pixelDensity(1);

​

  // create an empty p5.Image object

  let newImage = createImage(width,height);

​

  // load both pixels arrays

  loadPixels();

  newImage.loadPixels();

​

  // copy from canvas into newImage:

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

    newImage.pixels[i] = pixels[i];

  }

  // Now we can display this new image

  newImage.updatePixels();

  image(newImage, 0, 0);

}

*/

​

function readSerial(data) {

  // Read data from the serial port

​

  if (data != null) {

    // If there is a message from Arduino

    // Split the message into an array

    let fromArduino = split(trim(data), ",");

    print(fromArduino);

    // If the array has the expected length

​

    if (fromArduino.length === 6) {

      // Extract the values and store them

      let buttonHat = int(fromArduino[0]);

      let buttonAnimal = int(fromArduino[1]);

      hatX = int(fromArduino[2]);

      hatY = int(fromArduino[3]);

​

      animalX = int(fromArduino[4]);

      animalY = int(fromArduino[5]);

​

      // Handle the buttonHat

      if (buttonHat == 1) {

        selectedHat = (selectedHat + 1) % hatImages.length; // can circle through the whole array of hat images when it reaches the end

      }

​

      // Handle the buttonAnimal

      if (buttonAnimal == 1) {

        selectedAnimal = (selectedAnimal + 1) % animalImages.length;

      }

​

      ///////////////////////////////////

      // SEND TO ARDUINO HERE (handshake)    ///////////////////////////////////

​

      // Create a string to send to Arduino

      let sendToArduino = selectedHat + "," + selectedAnimal + "\n";

      // Write the string to the serial port

      writeSerial(sendToArduino);

    }

  }

}

​

///////Arduino code

/*

const int buttonHatPin = 2;        // Pin for the hat button

const int buttonAnimalPin = 3;     // Pin for the animal button

const int potentiometerXPin = A0;  // Pin for the X-axis potentiometer

const int potentiometerYPin = A1;  // Pin for the Y-axis potentiometer

​

int buttonHatState = 0;       // Current state of the hat button

int buttonAnimalState = 0;    // Current state of the animal button

int potentiometerXValue = 0;  // Current value of the X-axis potentiometer

int potentiometerYValue = 0;  // Current value of the Y-axis potentiometer

​

void setup() {

  Serial.begin(9600);               // Initialize the serial communication

  pinMode(buttonHatPin, INPUT);     //

  pinMode(buttonAnimalPin, INPUT);  //

​

​

  // start the handshake

  while (Serial.available() <= 0) {

    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data

    Serial.println("0,0,0,0,0,0");        // send a starting message

    delay(300);                       // wait 1/3 second

    digitalWrite(LED_BUILTIN, LOW);

    delay(50);

  }

}

​

void loop() {

  buttonHatState = digitalRead(buttonHatPin);           // Read the state of the hat button

  buttonAnimalState = digitalRead(buttonAnimalPin);     // Read the state of the animal button

  potentiometerXValue = analogRead(potentiometerXPin);  // Read the value of the X-axis potentiometer

  potentiometerYValue = analogRead(potentiometerYPin);  // Read the value of the Y-axis potentiometer

​

  // Map the potentiometer values to the desired range

  int hatX = map(potentiometerXValue, 0, 1023, 0, 900);  // Map X-axis potentiometer value to the canvas width

  int hatY = map(potentiometerYValue, 0, 1023, 0, 900);  // Map Y-axis potentiometer value to the canvas height

​

  int animalX = map(potentiometerXValue, 0, 1023, 0, 900);  // Map X-axis potentiometer value to the canvas width

  int animalY = map(potentiometerYValue, 0, 1023, 0, 900);  // Map Y-axis potentiometer value to the canvas height

​

  // Send the button states and potentiometer values to p5.js

  Serial.print(buttonHatState);

  Serial.print(",");

  Serial.print(buttonAnimalState);

  Serial.print(",");

  Serial.print(hatX);

  Serial.print(",");

  Serial.print(hatY);

​

  Serial.print(",");

  Serial.print(animalX);

  Serial.print(",");

  Serial.println(animalY);

​

  delay(100);  // Delay for stability

}

​

*/

​