Author: Shahd Nigim

 

I am still not sure what to do for my final project I have three different ideas and I am not sure which one to pick.

Idea 1:

I am thinking of doing a PS4-like controller with a car race on the screen. It would have some audio effects and a trick to win or lose. I want to do it so that 2 people might be able to race at the same time. However, I am not sure how and if I will be able to do it. It seems like a cool idea but I am a little overwhelmed by how it will go. It can either work fine or go the other way around.

Idea 2:

I am thinking of having a screen and a small area where people can run in place but seem as if they are running on a track. Maybe the speed of the person running is controlled by the heart rate. Then maybe I would do some research to see how many calories the person burned at a specific time their weight. It seems an interesting idea. However, it is also challenging and how I visualize it is that it is somehow immersive so that the person only focuses on the running and not what is going on around them.

Ideas 3:

A small physical car and a controller.  I might make a car that moves on a track using a controller similar to kids’ car toys. However, I am trying to think of a twist or a way to make It more engaging. I am not sure until now how to do so.

 

I think the reading was interesting it communicated the importance of design to disabilities and how it opens a new possibility to re-invent these pieces as fashion and not only for medical purposes. I enjoyed the part about glasses because it reminded me of the times when I would go shopping with my mom and I always try many on before picking one that suits me. I can not imagine a time when glasses were not stylized. Similarly, I think there is a sense of struggle when comes to designing things for disability, I will argue that maybe because the person designing these pieces is not disabled himself/herself which would be a problem because the designer would not know what the people who he/she is designing for wants. I think part of the design process is to know the consumers well. Their opinion, their style, and what they want. However, the reading lacked that part. Especially when it comes to design Ear- Wear and different body limbs.

It is good to design products that are more inclusive and toward the disabled like clickable audio buttons, or products that have braille on them. Further, how do we design products that can compensate people who lack some limps? Do we incorporate different limps to our design too or do we make our products useable in different ways but with the same effect? I do not think that the radio example is that inclusive it might be to a degree but I think it could be more inclusive if the designers would allow users to control it with voice, or even control it with brail and then would also have a small screen that writes whatever is being displayed in the radio

Process:

For this assignment, we had to finish the three in-class examples that connect p5js and Arduino. In the beginning, I thought I understood the code and the connection but then I realized that I did not fully understand it. So I decided to review it line by line and try to understand the communication between Arduino and P5js.

Then Yupu and I decided to work together on these three examples we divided them so that he worked on the first one I worked on the second and we both worked on the third together. We helped each other debug the code and figure out how to implement it together. Honestly, this process of debugging helped me understand the communication between the two (P5js and Arduino) better.

Example 1: Circle Moving

 

// Week 11.2 Serial port - Light sensor, ball and light example 1 


int leftLedPin = 7;
int rightLedPin = 4;


void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);


 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);


 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);
 pinMode(rightLedPin, OUTPUT);


 // Blink them so we can check the wiring
 digitalWrite(leftLedPin, HIGH);
 digitalWrite(rightLedPin, HIGH);
 delay(200);
 digitalWrite(leftLedPin, LOW);
 digitalWrite(rightLedPin, LOW);



 // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data
      Serial.println("0,0");            // send a starting message
    delay(300);                       // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}


void loop() {
 // wait for data from p5 before doing something
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH);  // led on while receiving data


   if (Serial.read() == '\n') {


     int sensor = analogRead(A1);  //potentiometer
     Serial.println(sensor);
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

 

Example 2: LED Brightness

// Week 11.2 Example LED brightness


int leftLedPin = 6;

void setup() {
  // Start serial communication so we can send data
  // over the USB connection to our p5js sketch
  Serial.begin(9600);


  // We'll use the builtin LED as a status output.
  // We can't use the serial monitor since the serial connection is
  // used to communicate to p5js and only one application on the computer
  // can use a serial port at once.
  pinMode(LED_BUILTIN, OUTPUT);

  // Outputs on these pins
  pinMode(leftLedPin, OUTPUT);

  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data
    Serial.println("0,0");            // send a starting message
    delay(200);                       // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(200);
  }
}


void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH);  // led on while receiving data

    int brightness = Serial.parseInt();
    analogWrite(leftLedPin, brightness);
    if (Serial.read() == '\n') {
      Serial.println("0,0");
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
}

 

Example 3:  Gravity, Ball, and LED

// week 11 example 3 sensor analg and digital light and abouncing ball 

int leftLedPin = 7;
int rightLedPin = 4;


void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);


 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);


 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);
 pinMode(rightLedPin, OUTPUT);


 // Blink them so we can check the wiring
 digitalWrite(leftLedPin, HIGH);
 digitalWrite(rightLedPin, HIGH);
 delay(200);
 digitalWrite(leftLedPin, LOW);
 digitalWrite(rightLedPin, LOW);






 // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data
    Serial.println("0,0");            // send a starting message
    delay(300);                       // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}


void loop() {
 // wait for data from p5 before doing something
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH);  // led on while receiving data


   int LED_STATE = Serial.parseInt();
   //int right = Serial.parseInt();
   if (Serial.read() == '\n') {
     digitalWrite(rightLedPin, LED_STATE);
     int sensor2 = analogRead(A1);
     delay(5);
     Serial.print(sensor2);
     Serial.print(',');
     Serial.println('Y');
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

 

 

 

 

Concept:

I think it was a challenge for us to find an idea for this project. Alex and I shared some videos of cool musical instruments with one another. We also tried to brainstorm some ideas and think of how to do it. We wanted to do something interesting, and creative. After a series of discussions, we finally decided to make a flower and bee instrument. This instrument plays different sounds if the bee comes to a flower, or if sunlight is pointed at a flower. Also, it plays sound when the bee is going to the flower. We did this by making a circuit that had a toggle switch, an LED, four light sensors, one distance sensor, and a piezo buzzer. Would it be cool if one could hear sounds emitted by a flower under different conditions?

Our instrument makes different notes with the interaction between the flower, bee, and light, which I like to think of as a musical narrative that delves into the natural world.

Highlight:

 We began by assembling the circuit and making the flower, bees, and light source.

It was confusing to make the circuit, but it worked out fine in the end. We decided to add a toggle switch to move from the distance sensor to the light sensor, this enhanced the user experience by allowing them to transition between the distance sensor and the light sensors. The light sensor and the distance sensor add different interactive experiences for the user, which I think engages them more.

#include "pitches.h"

const int BUZZER = 8;
const int ECHO_PIN = 9;
const int TRIG_PIN = 10;
const int FLOWER1 = A0;
const int FLOWER2 = A1;
const int FLOWER3 = A2;
const int FLOWER4 = A3;
const int SWITCH = A5;
int flowerSound = 0;
int LED=2;
long duration = 100;

int DARK_THR = 600;

void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(FLOWER1, INPUT);
  pinMode(FLOWER2, INPUT);
  pinMode(FLOWER3, INPUT);
  pinMode(FLOWER4, INPUT);
  pinMode(BUZZER, OUTPUT);  
  pinMode(ECHO_PIN, INPUT);    // echo pin measure the duration of pulses coming back from the distance sensor
  pinMode(TRIG_PIN, OUTPUT);   // trigger pin output pulses of electricity
  pinMode(LED,OUTPUT);
}

void loop() {
  digitalWrite(LED,HIGH);
  int flower1 = analogRead(FLOWER1);
  delay(1);  // delay in between reads for stability
  int flower2 = analogRead(FLOWER2);
  delay(1);  // delay in between reads for stability
  int flower3 = analogRead(FLOWER3);
  delay(1);  // delay in between reads for stability
  int flower4 = analogRead(FLOWER4);
  delay(1);  // delay in between reads for stability
  int switchOn = digitalRead(SWITCH);
  delay(1);  // delay in between reads for stability

  // Serial.println(switchOn);  ///debugging

  if (switchOn) {
    //dark sensor = lower notes
    if (flower1 <= DARK_THR) {
      tone(BUZZER, NOTE_C3, duration);
    } else if (flower2 <= DARK_THR) {
      tone(BUZZER, NOTE_D3, duration);
    } else if (flower3 <= DARK_THR) {
      tone(BUZZER, NOTE_E3, duration);
    } else if (flower4 <= DARK_THR) {
      tone(BUZZER, NOTE_F3, duration);

    //bright sensor = higher notes
    } else if (flower1 >= 850) {
      tone(BUZZER, NOTE_G3, duration);
    } else if (flower2 >= 850) {
      tone(BUZZER, NOTE_A3, duration);
    } else if (flower3 >= 850) {
      tone(BUZZER, NOTE_B3, duration);
    } else if (flower4 >= 850) {
      tone(BUZZER, NOTE_C4, duration);
    } else {         
      noTone(BUZZER);
    }
  } else { // if switch is changed to distance sensor
    int distance = getDistance();
    Serial.println(distance);
    if (1 < distance && distance < 3) {
      tone(BUZZER, NOTE_C4);
    } else if (3 < distance && distance < 6) {
      tone(BUZZER, NOTE_D4);
    } else if (6 < distance && distance < 9) {
      tone(BUZZER, NOTE_E4);
    } else if (9 < distance && distance < 12) {
      tone(BUZZER, NOTE_F4);
    } else if (12 < distance && distance < 15) {
      tone(BUZZER, NOTE_G4);
    } else if (15 < distance && distance < 18) {
      tone(BUZZER, NOTE_A4);
    } else if (18 < distance && distance < 21) {
      tone(BUZZER, NOTE_B4);
    } else {
      noTone(BUZZER);
    }
  }
}

float getDistance() {
  float echoTime;                   //variable to store the time it takes for a ping to bounce off an object
  float calculatedDistance;         //variable to store the distance calculated from the echo time

  //send out an ultrasonic pulse that's 10ms long
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);

  echoTime = pulseIn(ECHO_PIN, HIGH);      //pulsein command to see how long it takes for pulse to bounce back to sensor
  calculatedDistance = echoTime / 55.2;    //calculate  distance of object that reflected the pulse in cm 
  return calculatedDistance;  
}

 

The code was simple, we created a nested if condition so that when the switch is on the light sensors (the flowers) would play different notes. The notes change in pitch from low to high depending on whether the bee is on the flower of the light source. Then when the switch is off we move to the distance sensor where the bee moves displaying different sounds. These notes are played with a difference of 3cm in distance. For the distance sensor, we play a whole octave of notes.

 

 Reflection and Future Improvements:

 I enjoyed making this assignment, but I believe there is room for improvement. There is much more that can be done and improved so that the sound is clearer, and the instrument is more interesting. It would be cool if it were a dual-player instrument, which means that the distance sensor and the light sensor play the sounds at the same time. It is a little more complicated to do and would need more time. On the aesthetics aspect, canceling all the wires in a box would be neater, and safer for users, thus providing an appealing look. I believe there is space to enhance this project in terms of functionality and look; however, this project was a challenge technically but sparked our imagination.

The Future of Interaction Design  and Responses: A Brief Rant on the Future of Interaction Design:

The rant is about a problem in interaction designs now. They are not tangible interfaces, dynamic materials, and/or haptic. Human Capabilities were the main concern of the author. I think humans’ capabilities are daffier. As much as it was an interesting read as much as it is not inclusive. There are a lot of responsibilities and an interactive designer needs to keep in mind in terms of inclusivity. I think accessibility is a big concern. I agree that capabilities like our hands and fingers can do a lot of things and influence our futures and how they are incredible but this also made me think of those who do not have them. What should an interaction designer do? How can we help? How should we compensate?  I do not know the answer, but I hope one day I will.

I like the part when he/she started to talk about choices, and we chose what to do and how to interact. I agree and I think as interactive designers we should choose to have a responsibility to make our designs inclusive as much as we can.

I think there is a lot to be done in research regarding tangible interfaces, dynamic materials, and haptic because they are somehow inadequate. Thus, I wonder what would be a dynamic medium for keyboards.

Even though he is trying to challenge us to create designs that take advantage of our capabilities I think there should be a balance between that and the idea that capabilities might not always be equal.

 

Concept:

For this assignment, we had to get information from an analog and a digital sensor and control 2 LEDs, one with the analog and one with the digital. Since it is almost Christmas season, I wanted to create a Christmas tree lit by a light sensor and a switch separately. I really like this time of the year because it is special in my hometown. It is all about family and friends gatherings, rainy days, meaningful conversations with delicious food, and an end-of-year celebration.

Highlight:

Reviewing the lecture notes and my notes was key in constructing this assignment. I started by drawing the tree, coloring it, and marking where I wanted the LEDs to go. I had to glue things in place because the paper was not strong enough to handle all the LEDs and wires.

I was a little scared of assembling the circuit in the wrong way and creating a shot, but it worked out well. However, I had to figure out how to deal with many things to make this project work. For instance,  I  had to figure out how to make the LED anode longer. To fix this problem, I  decided to use wires and attach them to the anode and the board instead of attaching the LEDs directly to the board. It was frustrating to attach the wires to the LEDs especially to keep them in place. To distinguish between the positive and negative anodes of the LED I used foil for one and copper tape for the other. Doing so made it less confusing to attach them to the board. I had some doubts about whether the circuit was correct or not so I re-assembled them multiple times to make sure I made it correctly. Attaching the switch and the light sensor was easier. Even though I made two codes one for the switch and the other for the light sensors, on the board they both share the same GND and the 5V.

The code is like to what we did in class. I tried to figure out how to add all Pins in one line of code but I could not figure out how,

Light Sensor:

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(13, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(9, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(3, OUTPUT);
  pinMode(2, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  int sensorValue = analogRead(A4);
  if (sensorValue > 255) {
    digitalWrite(13, LOW);
    digitalWrite(11, LOW);
    digitalWrite(9, LOW);
    digitalWrite(7, LOW);
    digitalWrite(5, LOW);
    digitalWrite(3, LOW);
    digitalWrite(2, LOW);
    delay(1000);  // turn the LED off by making the voltage LOW
  }
  // wait for 30 milliseconds to see the dimming effect
  else {
    digitalWrite(13, HIGH);
    digitalWrite(11, HIGH);
    digitalWrite(9, HIGH);
    digitalWrite(7, HIGH);
    digitalWrite(5, HIGH);
    digitalWrite(3, HIGH);
    digitalWrite(2, HIGH);
  }
}

Switch :

// digital pin 2 has a pushbutton attached to it. Give it a name:
int pushButton = A2;

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  // make the pushbutton's pin an input:
  pinMode(pushButton, INPUT);
  pinMode(13, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(9, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(3, OUTPUT);
  pinMode(2, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input pin:
  int buttonState = digitalRead(pushButton);
  // print out the state of the button:
 if (buttonState==1) {
  digitalWrite(13, HIGH);
    digitalWrite(11, HIGH);
    digitalWrite(9, HIGH);
    digitalWrite(7, HIGH);
    digitalWrite(5, HIGH);
    digitalWrite(3, HIGH);
    digitalWrite(2, HIGH);
  
    // turn the LED off by making the voltage LOW
  }
  // wait for 30 milliseconds to see the dimming effect
  else {
      digitalWrite(13, LOW);
    digitalWrite(11, LOW);
    digitalWrite(9, LOW);
    digitalWrite(7, LOW);
    digitalWrite(5, LOW);
    digitalWrite(3, LOW);
    digitalWrite(2, LOW);
    
    
  }
}

 

 

Reflection and future improvements:

Trusting the process was a huge reason why this project worked. It is not complicated, but it needs a lot of focus. In the future, I want to make it more presentable and neater. I want to also find a way where both the sensors work together in the same code.

Merry Christmas!

Making Interactive Art: Set the Stage, Then Shut Up and Listen

I agree that art should be open to interpretation. I think interactive art requires time from the artist and is open to change and manipulation in response to the user’s experience. The first time an artist does an interactive art it might not go as planned especially if he/she does not add instructions, but that is ok because they would learn and start up conversations with the viewers and redefine it to make it work better. I believe a good interactive piece is self-explanatory and does what the artist expects at least 50/60% of the time. However, some interactive art pieces are made to be experienced differently.

I liked the part about listening to the audience while they are experiencing the piece because this starts interesting conversations and may inspire new ideas. I agree that an interactive artist is like a director. He/she proposes materials and interactions to the audience and then they can interpret it in ways that express themselves and the artist too.

Physical Computing’s Greatest Hits (and Misses)

I agree that recreating things can lead to further developments. There is a book I once read called “Steal Like an Artist” and it talks about how everything we do is inspired by things that already exist. A lot of technological advances came to exist because they were recreating something but found a new thing on the way. If we think of coding, for example, we would have not been so advanced and creative if we kept figuring out the logic that is already there. Instead, we take the pre-existing logic and then add to it and develop it to be better.

I enjoyed the piece on Floor Pads because it seems simple and fun. I also think that the meditation helper is cool. As a person who dies yoga I think is a really good way to focus and try to maintain your inner balance at home. However, I am not sure how it “reacts to your state of mind” because it might not be accurate. Thus, it’s pretty cool if it can be accurate.

 

Norman’s reading made sense to me. I totally agree that emotions play a role in what tools or elements we use daily, and it could be as simple as a pot. We design things with purpose in mind, but making them appealing is as important. I really liked the part about the transformation from black and white screens to colors, and his argument that the inspiration of colors does not have a scientific effect but rather have an emotional one. It made me think of colors a painter would use to emphasize certain moods. For example, if an artist wants to emphasize loneliness or sad emotions they would use blues, and if they are emphasizing hope and love they would use worm colors like yellow and orange. I believe appealing design is as important as affordance, and having a balance between functionality and appearance is what good design is about.

Margret Hamiltion was an inspiring read. Her work did not only transform technology and software but opened possibilities for the developments we see today. It is a success story that proves a quote I read once: when there is a well, there is a way. We design what we want to be, but we can always re-design anything that does not fit into our plan. Similar to Hamilton who did not limit herself, we push our borders higher and higher every time we reach something. In a way, we push our lives the same way designers re-design objects and ideas. What made her different is that she had a vision that best suited her passion and inspiration. It is good to be inspired; nevertheless, everyone is inspired to aspire.

Concept:

For my midterm, I envisioned creating an immersive underwater experience, inspired by my childhood favorite movie “Finding Nemo.” The whole idea is to bring human interaction to the fish world. As a result, I wanted to create a street feel life but under the sea. There fish can go shopping and view artworks in a museum.

I created the whole atmosphere from scratch. I combined vector-based images for the background and other objects using Illustrator. I saved the files as PNG and then added them to P5JS.

Highlight:

The code was the most challenging part mainly for creating layers and buttons to click on. I started the process of implementation by trying to figure out all the variables I needed for each part. Then I loaded all the images and audio I wanted to use for the project. After that, I began to find the logic for moving from one scene to the next. I created a class called experience manager where I give instructions on what to display in the layers when a specific button is clicked. This class is a boolean. As a result, when a specific variable is set to be true it will be visible on the screen: the sound, the images, and the buttons.

// class to manage which slide to display.
class ExperienceManager {
  constructor() {
    this.onHome = true;
    this.onStreet = false;
    this.onMall = false;
    this.onMuseum = false;
  }
  display() {
    if (this.onHome) {
      image(HomeImg, 0, 0, 500, 500);
      SoundWaves.play();
      SoundMall.stop();
      SoundMuseum.stop();
      fishObj = new ClickedObj(fish, 215, 320, 90, 90);
      // Call the textGraphics function
      Title("Life Under the Sea", width / 2, 90, 30);
      // Call the instruction box function
      drawInstructionBox(110, 130, 280, 180, 23);
      this.onStreet = false;
      this.onMall = false;
      this.onMuseum = false;
    } else if (this.onStreet) {
      SoundWaves.play();
      SoundMall.stop();
      SoundMuseum.stop();
      image(seaSt, 0, 0, 500, 500);
      arrowStObj = new ClickedObj(arrow, 10, 20, 25, 25);
      mallObj = new ClickedObj(malltrn, 25, 320, 150, 150);
      museumObj = new ClickedObj(museumtrn, 38, 190, 110, 110);
      this.onHome = false;
      this.onMall = false;
      this.onMuseum = false;
    } else if (this.onMall) {
      //     hide clicks
      SoundMall.play();
      SoundMuseum.stop();
      SoundWaves.stop();
      fishObj.x = -100;
      museumObj.x = -100;
      // bags on click display
      image(mall, 0, 0, 500, 500);
      arrowMallObj = new ClickedObj(arrow, 10, 20, 25, 25);

      this.onStreet = false;
      this.onHome = false;
      this.onMuseum = false;
    } else if (this.onMuseum) {
      image(museum, 0, 0, 500, 500);
      SoundWaves.stop();
      SoundMall.stop();
      SoundMuseum.play();
      arrowMuseumObj = new ClickedObj(arrow, 10, 20, 25, 25);
      this.onHome = false;
      this.onMall = false;
      this.onStreet = false;
    }
  }
}

I also created a class for clickable objects like the fish, and arrows that go to the previous layer, the mall, the museum, the bags, and artworks. This class has a lot of conditionals in it. For some, I made clickable images but for the bags and artwork, I felt it’s better to have curser values that refer to a specific bag of artwork and then display an image for that. Then I created a function for the home screen instructions and passed the text through an array of strings. And added a rectangle behind it. Finally, I added the title of the interaction set a color, and a font in the title function.

// this class helps because it removes alot of hard coding so when I change the coordinates of an inage the program will recognise and so i dont need to change it everywhere.
class ClickedObj {
  constructor(imgFileName, x, y, imgWidth, imgHeight) {
    this.imgFileName = imgFileName;
    this.x = x;
    this.y = y;
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    this.drawObjct();
  }
  drawObjct() {
    if (this.imgFileName) {
      image(this.imgFileName, this.x, this.y, this.imgWidth, this.imgHeight);
      // print("image draw sucessfull");
    }
  }
  isSelected() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.imgWidth &&
      mouseY > this.y &&
      mouseY < this.y + this.imgHeight
    ) {
      return true;
    } else return false;
  }
}

// to go to the next layer of the street so all clickable objects are here.
function mouseClicked() {
  //  to go  back to the home layer and instructions and click other objects like the fish etc.
  if (expMgr.onHome) {
    if (fishObj.isSelected()) {
      // print("fish 1 is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
      //print("done")
    }
  } else if (expMgr.onStreet) {
    if (mallObj.isSelected()) {
      // print("mall is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = false;
      expMgr.onMall = true;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (museumObj.isSelected()) {
      // print("museum is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = false;
      expMgr.onMall = false;
      expMgr.onMuseum = true;
      expMgr.display();
    } else if (arrowStObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = true;
      expMgr.onStreet = false;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    }
  } else if (expMgr.onMall) {
    if (arrowMallObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (mouseX >= 83 && mouseX <= 124 && mouseY >= 90 && mouseY <= 135) {
      image(rdBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 83 &&
      mouseX <= 120 &&
      mouseY >= 200 &&
      mouseY <= 236
    ) {
      image(LneBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 83 &&
      mouseX <= 121 &&
      mouseY >= 220 &&
      mouseY <= 331
    ) {
      image(BrwnBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 353 &&
      mouseX <= 379 &&
      mouseY >= 91 &&
      mouseY <= 140
    ) {
      image(YlwBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 391 &&
      mouseX <= 422 &&
      mouseY >= 96 &&
      mouseY <= 141
    ) {
      image(OrngBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 345 &&
      mouseX <= 381 &&
      mouseY >= 192 &&
      mouseY <= 238
    ) {
      image(bluBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 397 &&
      mouseX <= 423 &&
      mouseY >= 202 &&
      mouseY <= 235
    ) {
      image(GrnBg, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 355 &&
      mouseX <= 381 &&
      mouseY >= 297 &&
      mouseY <= 336
    ) {
      image(pnkBag, width / 4, height / 4, 210, 210);
    } else if (
      mouseX >= 391 &&
      mouseX <= 427 &&
      mouseY >= 312 &&
      mouseY <= 332
    ) {
      image(whtBag, width / 4, height / 4, 210, 210);
    }
  } else if (expMgr.onMuseum) {
    if (arrowMuseumObj.isSelected()) {
      // print("arrow is clicked");
      expMgr.onHome = false;
      expMgr.onStreet = true;
      expMgr.onMall = false;
      expMgr.onMuseum = false;
      expMgr.display();
    } else if (
      mouseX >= 126 &&
      mouseX <= 177 &&
      mouseY >= 96 &&
      mouseY <= 199
    ) {
      image(art1, width / 3, height / 3, 250, 300);
    } else if (
      mouseX >= 212 &&
      mouseX <= 293 &&
      mouseY >= 102 &&
      mouseY <= 179
    ) {
      image(art3, width / 3, height / 3, 250, 300);
    } else if (
      mouseX >= 330 &&
      mouseX <= 384 &&
      mouseY >= 97 &&
      mouseY <= 191
    ) {
      image(art2, width / 3, height / 3, 250, 300);
    }
  }
}

To be honest the hardest part was the clickable objects class because at the beginning the objects would layer on one another and would still be clickable even if they were not visible. However, I fixed it by passing the clicks to the specific experience they fit in. I also faced a lot of bugs because P5js is case-sensitive, and it would take me hours to realize that but now I know, and it is the first thing I look for if I have a bug.

 

Reflection and ideas for future work or improvements:

I am satisfied with the overall result of the project. For the future, I would add more places to visit and add some motion to the website. Maybe a fish moving, some submarine. I would also want to add a music icon where users can pick a song and pause it if they want. I also want the home page to be more interactive, maybe create graphics with text or water bubbles that move around the canvas.

Resources:

https://itch.io/games/made-with-p5js

https://www.youtube.com/watch?v=MzD7W6Vt6LA

https://www.youtube.com/results?search_query=p5js+object+orianted+

https://p5js.org/reference/#/p5/REMOVE

https://p5js.org/examples/sound-load-and-play-sound.html

https://www.rapidtables.com/web/color/blue-color.html

https://p5js.org/examples/interaction-snake-game.html

https://stackoverflow.com/questions/58477636/transitioning-from-one-scene-to-the-next-with-p5-js