​

let capture; // Variable to store the live video capture

let snapshot; // Variable to store the captured photo (selfie)

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

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

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

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

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

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

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

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

let logo; // Variable to store logo image

​

let participantName = ""; // Variable to store the name typed

​

////////////////////PRELOAD ALL THE IMAGES//////////////////////////////

​

function preload() {

  // Preload the hat images

​

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

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

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

  hatImages[3] = loadImage("hat4.png");

  hatImages[4] = loadImage("hat5.png");

  hatImages[5] = loadImage("hat6.png");

  hatImages[6] = loadImage("hat7.png");

  hatImages[7] = loadImage("hat8.png");

  hatImages[8] = loadImage("hat9.png");

​

  // Preload the animal images

​

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

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

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

  animalImages[3] = loadImage("animal4.png");

  animalImages[4] = loadImage("animal5.png");

  animalImages[5] = loadImage("animal6.png");

  animalImages[6] = loadImage("animal7.png");

  animalImages[7] = loadImage("animal8.png");

  animalImages[8] = loadImage("animal9.png");

  animalImages[9] = loadImage("animal10.png");

  animalImages[10] = loadImage("animal11.png");

  animalImages[11] = loadImage("animal12.png");

  animalImages[12] = loadImage("animal13.png");

​

  //Preload the logo image

​

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

}

​

function setup() {

  // Create a canvas to display the video and captured photo

  createCanvas(windowWidth, windowHeight);

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

  capture.hide(); // Hide the video so that people could see an image

​

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

}

​

function draw() {

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

​

  designID(); // calling function that draws the design of the ID card

​

  //Display live video in the center of the canvas and resize it

  //according to the size of the ID card

​

  imageMode(CENTER);

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

​

  // Connect to the serial port

  if (!serialActive) {

    textSize(20);

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

  } else {

    text(" ", 100, 30);

  }

​

  // An if statement: If a photo is captured, display it along with the hat and animal images

​

  if (snapshot) {

    // Display a captured selfie in place of the live video

    // resizing to the same parameters as video

​

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

​

    // A nested if statement:

    // if -1 then no hat image is selected, otherwise the statement is true.

    // If a hat image is selected, then display the image at the index selectedHat from the array of hatImages.

    // The image is placed at coordinates (hatX, hatY).

​

    if (selectedHat !== -1) {

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

    }

​

    // A nested if statement:

    // if -1 then no animal image is selected, otherwise the statement is true.

    // If an animal image is selected, then display the image at the index selectedAnimal from the array of animalImages.

    // The image is placed at coordinates (animalX, animalY).

​

    if (selectedAnimal !== -1) {

      image(animalImages[selectedAnimal], animalX, animalY);

    }

  }

}

​

function keyPressed() {

  // Capture a photo when the ENTER key is pressed

  if (keyCode === ENTER) {

    // Capture the current frame from the video

    snapshot = capture.get();

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

  }

  // Set up the Serial port if "/" key is pressed

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

    setUpSerial();

  }

  // Start the experience all over if SHIFT key is pressed

  else if (keyCode === ALT) {

    reset();

  }

}

​

////////////FUNCTION TO SAVE AN ID BADGE BY CALCULATING ////////////////

////////////THE WIDTH AND HEIGHT OF THE BADGE AND CAPTURING/////////////

////////////THE SPECIFIED AREA OF THE CANVAS////////////////////////////

​

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 TO DESIGN AN ID CARD////////////////////////

​

function designID() {

  //ID card general form

  // Drawing a rectangular shape in the middle of the canvas

  // with white color fill and purple stroke

​

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

​

  //Write the text "NYUAD"

​

  noStroke(0);

  fill(101, 1, 144);

  textAlign(CENTER, CENTER);

  textSize(40);

  textStyle(BOLD);

  // Display "NYUAD" below

  // the captured photograph and the name of the participant

  text("NYUAD", width / 2, height / 2 + 50);

​

  // If participant writes their name in the input box

  // Then, display the name typed

  if (participantName != "") {

    text(participantName, width / 2, height / 2 + 100);

  }

}

​

////////////FUNCTION TO CREATE A TEXT BOX TO WRITE THE NAME/////////////

/////////////////AND SUBMIT IT BY CLICKING THE BUTTON///////////////////

​

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 TO DISPLAY THE NAME OF THE PARTICIPANT THAT WAS TYPED IN THE INPUT TEXT BOX BEFORE, HIDE THE INPUT BOX AND CREATING A FINAL BUTTON TO CAPTURE THE WHOLE ID BADGE////////////////////////////////////

​

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 TO START THE EXPERIENCE AGAIN////////////////

////////////////CALLING ALL THE NECESSARY VARIABLES AGAIN///////////////

​

function reset() {

  snapshot = false; // Variable to store the captured photo

  background(240);

  capture = createCapture(VIDEO);

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

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

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

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

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

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

​

  participantName = "";

  InputName();

  nameInput.show();

  submitButton.show();

  captureButton.hide();

}

​

////////////////////////RECEIVING DATA FROM ARDUINO/////////////////////

​

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

    }

  }

}

​

/*

/////////////////ADDITIONAL CODE TO WORK ON TO DISPLAY ALL//////////////

//////////////////OF THE CAPTURED BADGES ON THE CANVAS//////////////////

​

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

}

*/

​

///////////////////////////////ARDUINO CODE/////////////////////////////

​

/*

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

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

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

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

const int potentiometerAnimalXPin = A2;  // Pin for the X-axis potentiometer for animal

const int potentiometerAnimalYPin = A3;  // Pin for the Y-axis potentiometer for animal

​

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

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

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

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

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

​

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

​

void setup() {

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

  pinMode(buttonHatPin, INPUT);     // Setting up the button pin as input

  pinMode(buttonAnimalPin, INPUT);  // Setting up the button pin as input

​

​

  // START THE HANDSHAKE TO SEND 6 VALUES FROM ARDUINO TO P5

  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

  potentiometerHatXValue = analogRead(potentiometerHatXPin);  // Read the value of the X-axis potentiometer for hat image

  potentiometerHatYValue = analogRead(potentiometerHatYPin);  // Read the value of the Y-axis potentiometer for hat image

  potentiometerAnimalXValue = analogRead(potentiometerAnimalXPin);  // Read the value of the X-axis potentiometer for animal image

  potentiometerAnimalYValue = analogRead(potentiometerAnimalYPin);  // Read the value of the Y-axis potentiometer for animal image

​

​

  // Map the potentiometer values to the desired range

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

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

​

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

  int animalY = map(potentiometerAnimalYValue, 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

}

​

​

*/

​