Week 11 Group Assignment w/ Naser

Concept:

After learning about the functionalities and the means of communicating between P5 and Arduino platforms, we were given the assignments to initialize various scenarios to and from p5.

First Assignment:

In this assignment, we initialized an Arduino to p5 connection using a potentiometer to control the horizontal position of an ellipse:

Arduino code:

const int potPin = A0;  // Analog pin connected to the potentiometer
void setup() {
  Serial.begin(9600);
}
void loop() {
    int potValue = analogRead(potPin);  // Read the value from the potentiometer
      // Send the potentiometer value to p5.js
      Serial.println(potValue);
}

P5 Code:

let ellipseHorizental;
function setup() {
  createCanvas(640, 480);
  textSize(18);
  ellipseHorizental = width/2; 
}
function draw() {
  background(220);
  // Draw ellipse with width based on potentiometer value
  fill(255, 0, 255);
  ellipse(ellipseHorizental, height / 2, 100, 150);
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Print the current potentiometer value
    text('Potentiometer Value = ' + str(ellipseHorizental), 20, 50);
  }
}
function keyPressed() {
  if (key == " ") {
    setUpSerial();
  }
}
function readSerial(data) {
  if (data != null) {
    // convert the string to a number using int()
    let fromArduino = split(trim(data), ",");
    // Map the potentiometer value to the ellipse width
    ellipseHorizental = map(int(fromArduino[0]), 0, 1023, 0, 640); 
  }
}

Video:

Assignment 2:

In this assignment, we initiated a p5 to Arduino response. The slider in p5 can control the brightness of an LED in Arduino.

Arduino code:

int LED = 5; // Digital pin connected to the LED
void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(LED, OUTPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("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 brightnessValue = Serial.parseInt();
    if (Serial.read() == '\n') {
      delay(5);
      Serial.println(brightnessValue);
    }
    analogWrite(LED, brightnessValue);
    digitalWrite(LED_BUILTIN, LOW);
  }
}

P5 Code:

let brightnessSlider;
function setup() {
  createCanvas(640, 480);
  textSize(18);
  // Create a slider
  brightnessSlider = createSlider(0, 255, 128); // Set the range and initial value
  brightnessSlider.position(20, 100); // Set the position of the slider
}
function draw() {
  background(255);
  // Draw a slider
  fill(255, 0, 0);
  rect(brightnessSlider.x, brightnessSlider.y, brightnessSlider.width, brightnessSlider.height);
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Print the current brightness value
    text('Brightness = ' + brightnessSlider.value(), 20, 50);
  }
}
function keyPressed() {
  if (key == " ") {
    setUpSerial();
  }
}
function readSerial(data) {
  if (data != null) {
    let sendToArduino = brightnessSlider.value() + "\n";
    writeSerial(sendToArduino);
    }
}
int LED = 5; // Digital pin connected to the LED
void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(LED, OUTPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("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 brightnessValue = Serial.parseInt();
    if (Serial.read() == '\n') {
      delay(5);
      Serial.println(brightnessValue);
    }
    analogWrite(LED, brightnessValue);
    digitalWrite(LED_BUILTIN, LOW);
  }
}

Video:

Assignment 3:

This assignment we spent an unholy and frankly embarrassing amount of time on this. We modified the code from class and figured out a way to light up both LEDs when the ball on the screen bounces. The wind speed depends on readings from the LDR, so the ball goes in different directions when the board is in light or dark conditions. At a certain light level, the ball remains stationary.

Arduino Code:

int leftLedPin = 2;
int rightLedPin = 5;
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
// We&#39;ll use the builtin LED as a status output.
// We can&#39;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() &lt;= 0) {
digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial
data
Serial.println(&quot;0,0&quot;); // 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 left = Serial.parseInt();
int right = Serial.parseInt();
if (Serial.read() == &#39;\n&#39;) {
digitalWrite(leftLedPin, left);
digitalWrite(rightLedPin, right);
int sensor = analogRead(A0);
delay(5);
int sensor2 = analogRead(A1);
delay(5);
Serial.print(sensor);
Serial.print(&#39;,&#39;);
Serial.println(sensor2);
}
}
digitalWrite(LED_BUILTIN, LOW);
}

P5 Code:

let rVal = 0;
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let groundFlag;
let dropFlag = false; // flag for when the spacebar is pressed and the ball should drop
let windFlag = false; // flag to start/stop wind
function setup() {
createCanvas(640, 500);
// noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
groundFlag = 0;
frameRate(30);
textSize(20)
}
function draw() {
background(255);
text(&quot;rVal: &quot;+str(rVal), 20, 55);
text(&quot;wind.x: &quot;+str(wind.x), 20, 80);
if (!serialActive) {
text(&quot;Press Space Bar to select Serial Port&quot;, 20, 30);
} else {
text(&quot;Connected&quot;, 20, 30);
}
if (dropFlag == true) { // when spacebar is pressed, start the sketch
if (position.y == height - mass / 2) {
groundFlag = 1; // this value is sent to the LED in the Arduino end
} else {
groundFlag = 0;
}
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x, position.y, mass, mass);
if (position.y &gt; height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
}
if (windFlag == true) {
wind.x = map(rVal, 0, 1023, -1, 1);
}
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function keyPressed() {
if (keyCode == UP_ARROW) {
windFlag = true // wind is enabled when up arrow key is pressed
}
if (keyCode == DOWN_ARROW) {
windFlag = false // wind is paused when down arrow key is pressed
wind.x = 0
}
if (key == &quot; &quot;) {
setUpSerial();
dropFlag = true;
}
}
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
let fromArduino = split(trim(data), &quot;,&quot;); // split the message
// if the right length, then proceed
if (fromArduino.length == 2) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. &quot;103&quot; becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = groundFlag + &quot;,&quot; + groundFlag + &quot;\n&quot;;
writeSerial(sendToArduino);
}
}

Video:

Reflection:

The overall exercises were a great way to comprehend further the logic behind the coding and how both platforms are intertwined.  Knowing how things are operated between each other, we can now effectively work on our final projects and have so many possibilities of projects to work on.

Reading Response – Week 11

In this text, the author asks the question: How often do we excuse the design of things that cater to disabled people because of the market for which it is intended? The design of such objects, it seems, mostly tries not to portray a positive image but no image at all, as if to hide disability or to regard it as shameful. We’ve come from an era where it wasn’t outrageous to say things like “medical products should not be styled” [p. 16] when talking about glasses to an era where glasses are stylized and in some contexts even considered fashionable. It is interesting how we’re slowly progressing with some disabilities to make the design of aiding instruments more “acceptable” to abled people instead of trying to hide the disability through design. For example, contact lenses could make bad eyesight invisible to the observer, but most people still choose to wear glasses over lenses, in part because of the accessibility of their design. Even then, there are disabilities where advancement in aiding technology is constrained by the need for invisibility (like with hearing aids), which I think is a shame. The author wants such instruments to also follow the blueprint of glasses, so that advancement is favored over discretion. However, at the same time, the pressure of making the design of aiding instruments universal means there is a serious risk of designers going too far as to sacrifice functionality over design. The first priority, I think, should be functionality, and then design, in the case of such instruments, so the overall user experience is better.

Budget Rave

Inspiration

Speakers at the Convenience Store are too expensive (the good ones that is). This presents a problem for me, because for reasons unknown to me, my room has been established as the instinctively occasional hangout spot by my friends (maybe it’s because I have the biggest fridge and a microwave and a kettle for chai AND a roommate who’s hardly ever in my room). Anyways, for this assignment, I thought I’d make up for the absence of a speaker in my room by using the free speaker given to me by the university for my IM course.

Concept

I’m using an ultrasonic sensor to gauge how far an object is from the breadboard and playing different notes based on this distance. Keep in mind I don’t know the first thing about music theory so I used random notes for each distance so the music itself might not make sense. Or maybe it does and I’ve created a new wave of post-music music. Anyways, here’s a pic and the code.

Code

const int trigPin = 9;  
const int echoPin = 10;
float duration, distance; 
#include "pitches.h"

int melody[] = {
  NOTE_A1, NOTE_B2, NOTE_C3, NOTE_D4, NOTE_E5, NOTE_F3, NOTE_C4
};

void setup() {
  pinMode(trigPin, OUTPUT);  
  pinMode(echoPin, INPUT);  
  Serial.begin(9600);  
}

void loop() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  duration = pulseIn(echoPin, HIGH);
  distance = (duration * 0.0343) / 2;
  delay(100);

  int melodyIndex = map((int)distance, 0, 50, 0, 7);  // Adjust the range (0-50) so the notes change over a noticeable distance
  melodyIndex = constrain(melodyIndex, 0, 7);  // Ensure the index is within the valid range
  tone(8, melody[melodyIndex]);
  Serial.print("Distance: ");
  Serial.println(melodyIndex);
}

See for yourself

Here’s links to a video showing the functionality of my instrument and a bonus video of my friend discovering my instrument and easing up to the idea of raving to the melodious notes. Easter egg alert: we used the same lamp as a strobe light as the one in my previous assignment. Maybe the 100 campus dirhams weren’t a bad investment after all…

https://drive.google.com/drive/folders/1wF5HzdHqWylkz1_lZ35EAcVphwg50Nb9?usp=sharing

 

Week 10 – Reading Reflection

A Brief Rant on the Future of Interaction Design

This guy really doesn’t like screens, so much so that he calls screens “Pictures Under Glass”, meaning that they provide no connection to the task that one is performing. And to be honest, that is true. Even while typing this response, I can feel the keys under my fingertips, knowing where each key is without looking at it. I can tell exactly how much pressure I need to apply on each key for it to type something. I hear a clicking sound whenever I press a key, and I can anticipate which key produces which sound before I even press it with my fingers. I honestly love my keyboard because of how it feels to the touch, even though it’s not exactly very dynamic. I can’t say the same for my phone screen.

This guy suggests that screens were never meant to be the final all-encompassing technology of interaction design, but they are merely a transitional technology. After all, what else in the natural world do we use the gesture of sliding our fingers for? Even the act of making a sandwich requires more interaction than screens, the supposed Interface of the Future.

I find this vision of the future of interaction design very interesting, because I’ve never really thought about how much screens on handheld devices actually ignore our very hands before. I am curious to explore some other visions and ideas that consider this incapacity of screens and provide other exciting possibilities for the purpose of interaction design.

 

Responses

This guy mentions the idea of finger-blindness here which really caught my eye. Finger blindness, as he puts it, is when you don’t use your hands to their full potential for doing what they were meant to do (not swiping away at screens) making it harder to attach meaning and value to the act of touching something, which is a scary thought. Other than that, I love how this guy addresses these responses with humor and also makes sense at the same time. He reiterates that screens aren’t necessarily bad – for now. It’s just that we shouldn’t be limiting ourselves to just screens when we think about future advancements in technology but come up with other receptive devices that appreciate the intricacy of our hands. After all, humans deserve so much more than just screens.

Financial Management

So uhhh… I bought… A desk lamp… For a hundred dirhams. A hundred. A hundred as in 1-0-0.

Impulsive purchases got the best of me again.

Anyways, I decided I would use this lamp for something other than playing around with its colors. So I made this kind of proximity/light sensor thing. Basically when I hold the lamp close to the the circuit, the red LED turns off and as I back up the lamp, the red LED blinks slower and slower until it stops blinking. As long as the red LED blinks/is on, the green LED can be turned on using a digital switch. Initially while making this circuit, I ran into some very silly difficulties – I attached the components on a single row which meant the circuit was never complete and I couldn’t figure out the problem the entire night for the life of me. Here is the bad circuit:

But one debugging session later here is my creation, the good circuit:

It works in a very fun way and the lamp works in an even fun-er way. Check out the video I’ve attached of the LEDs in action:

https://drive.google.com/drive/folders/1uOQwTJqiPt6b5cQ-L8GTVn3CXHp50x17?usp=sharing

Here is the code:

int green = 10;
int red = 11;
// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(green, OUTPUT);
  pinMode(red, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  int sensorValue = analogRead(A0);
  // print out the value you read:
  Serial.println(sensorValue);
  delay(1);  // delay in between reads for stability

if (sensorValue > 40) { // when far, turn on but don't blink
  digitalWrite(green, LOW);
  digitalWrite(red, LOW);
}
if (sensorValue > 15 && sensorValue <= 40) { // when slightly close, blink slow
  digitalWrite(green, HIGH);
  digitalWrite(red, HIGH);
  delay(100);
  digitalWrite(red, LOW);
  delay(100);
}
if (sensorValue <= 15 && sensorValue > 10) { // when closer, blink fast
  digitalWrite(green, HIGH);
  digitalWrite(red, HIGH);
  delay(250);
  digitalWrite(red, LOW);
  delay(250);
} 
if (sensorValue <= 10) { // when very close, turn off
  digitalWrite(green, HIGH);
  digitalWrite(red, HIGH);
}  

}

 

Week 9 – Reading Response(s)

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

In this class, it’s easy to present our artworks as static pieces with instructions for the participants and a statement of how we want them to interpret it. The author of this piece, however, believes that this defeats the purpose of interactive art. He wants interactive artists to think of their artwork as a performance rather than a painting; you don’t go about narrating the plot to the audience in a performance – you let the audience perceive the performance through their own senses and interpretation. In the same way, we shouldn’t present our interactive artworks on a canvas with instructions and interpretations – we give them the basic context so they know what they’re getting into, and then we let them explore for themselves. We have to trust our audience to discover their interpretation through a ‘conversation’ with our artwork with merely a suggestion of what their course of action should be – unaided by our own directives – because only in this way can we offer an authentic emotional experience to our audience.

 

Physical Computing’s Biggest Hits (and misses)

This one was just a list of some of the most common project themes in interactive artwork projects. It’s funny because a lot of us will be revisiting these themes many times ourselves for our own artworks, but I don’t think there’s something deeply wrong with that. I think finding our own twist on things that have widely been done before is still our own thing. After all, it is easy to feel like everything worth doing has already been done. Not that that’s true, but I think we may just come closer to originality by stumbling upon an idea no one’s heard of before while first doing stuff that has been done, countless times over.

The Last Piece

I hate this puzzle/coaster/whatever the hell this is. Ever since I stole this (got it from a fair for free) I have kept it on my desk, neatly arranged in the exact way it came. But you can never have good things it seems. Because a few days ago, my friend came over and thought himself smart enough to reassemble this. Needless to say he wasn’t and he couldn’t. I had to bear the sight of this disarranged mess of a puzzle on my desk for days until another friend who had the same puzzle showed me his and I was able to successfully rearrange it. Those few days were not it, let me just say. But I have since come to realize that the puzzle isn’t for show. It is the process of failing to put it back and then eventually rearranging it that makes it… well, it. And so I created a little game with this puzzle called “The Last Piece”. Essentially, you know where the last piece goes, but the rest you have to figure for yourself. And only when you’re done with the rest can you put back the last piece. What do you get from it? The satisfaction of seeing an LED bulb turn red. Who doesn’t love to see little red lights?

The circuit itself is simple: I used aluminum foil to create points of contact between the board and the piece which I stole from my building’s main lounge. I then thought about what more this could use: more lights! So I added more contacts so that when the last piece is placed in the wrong position, a red light turns on and when it is in the right position, the yellow light turns on, indicating you’ve won.

I also finally have a picture of the solved puzzle so I never have to deal with the mess again, no matter how many times my friends fail at this game.

Week 8 – Reading Reflection

Emotion and Design

In the previous reading from Don Norman, he talked about how design flaws in everyday objects make it difficult for normal people to operate them, and how an object that is “usable but ugly” is more beneficial that an object that is visually pleasing but unusable; but his point was misinterpreted by many and had people thinking he advocated for usability over appealing design. In this reading, he clarifies that this was not to discredit visual appeal, but to bring usability to the same level of importance as it. He hopes that “the future of everyday things [will] be ones that do their job, that are easy to use, and that provide enjoyment and pleasure” [p. 41], emphasizing that even though usability gets the job done, it is still important for the design to be appealing and the functionality to be easy to figure out, because in the end, “it is time to have more pleasure and enjoyment in life” [p.41]. At the same time, he says what I think is the crux of his point: “To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable” [p. 42]. And I can’t argue with that. 

 

Her Code Got Humans on the Moon

Honestly, before reading this, I only knew that Maragaret Hamiltion was a someone who did something in the Apollo missions. But what I didn’t know was the depth of her involvement in the missions; without her, there might not have been a mission. It is inspiring to learn about her essentially pioneering systems programming and leading the software division of 400 people, all while mothering a 4 year old. Makes me think about how I can barely finish my assignments on time even without the taking-care-of-a-4-year-old part. It was also interesting to read about the “That would never happen” story, which is a very apt representation of human fallibility. The purpose of good system programming, I believe, is to minimize this exact fallibility – in other words, to be smarter than humans.

Midterm Project: Speedrunning Procrastination

CONCEPT

You know when you sit at your desk, open up your assignments on your laptop, and after thinking about what it is you have to do, you finally come to the conclusion: “Man, I could really go for a walk right now”? I know it all too well. I did the same with my midterm project, going on walks on and around campus, beyond the barriers across the welcome center (definitely not trespassing), above the highway behind campus, below the tunnel across the highway, but not starting my project. I’d listen to my playlist on Spotify while looking at the stars in the light-polluted Abu Dhabi sky, or at the stunning night skyline from the bridge on the highway (again don’t call the cops). Struggling to settle on an idea, I finally thought of making the exact thing that I was using to procrastinate on starting work in the first place – an interactive music library interface, just like Spotify. Now I could procrastinate while working, if that makes sense.

WORKFLOW

I had come up with an idea, sure, but I soon realized that to actually bring my idea to life, it was ME who would have to work, to write code endlessly, to face disappointment because of errors, to fix said errors, to do it all over again God knows how many times. Grappling with the truth, I started first with loading whatever I would need for my project: album cover art, that font Spotify uses, the actual songs I would have in the library (definitely not downloaded from a sketchy website that might as well have phished me). I picked the songs very intricately to kind of form a parallel with the stages of procrastination as experienced by me:


Gangtey- aswekeepsearching

This song by Indian band aswekeepsearching represents for me the stage where my assignment’s deadline is far away and not thinking about it poses no immediate threat. The repeated mystifying chants are melancholic, but calm.

 


Kalga – aswekeepsearching

By the same band, this one represents the shift from the calm to the storm. It starts off calm but is then interrupted by loud drums and vocals, representing the interruption of calm by dread when the realization of incoming deadlines hits.

 

 

Nahin Milta – Bayaan

Nahin Milta, by Pakistani bad Bayaan, is a song about acceptance following hopelessness. Which in the sense of procrastination is pretty self-explanatory…

 

 

 

Tasveer – Mooroo

Another melancholic but calm song, this one you’d listen to while finally working on your assignment, maybe even singing along with it. Maybe don’t look too much into the lyrics though, because it can get sad. Tasveer means picture, and Mooroo sings about spent memories only living in pictures after they are lived.

Ayi Bahaar – Kashmir

This upbeat song is about the coming of spring. You guessed it – you’ve finally finished your assignment, and things aren’t too bad after all. There is still good in the world.

 

 

Here is the  playlist that I’ve used in my sketch:

After loading everything, I had to think of the logic behind different functions of a music player: play, pause, skip, go back, add to favorites, etc. At one point I was convinced that I would in no way be able to do all that because I could not for the life of me figure out how to implement  it. A few long walks later, I decided to start writing in the hopes that it would come to me itself; and come to me it did. I implemented the whole music player as  a class with methods for displaying relevant information like images, shapes, text, etc. It starts at a screen that introduces the concept and requires you to click to begin the experience. You can return to the screen from the music player by pressing any key on the keyboard. In the player, you can pause and play songs, skip to the next song, go back to the previous song, repeating the same 5 songs without going out of bounds. The code aspect can be understood using the comments on my sketch, the link to which I have provided below:

https://editor.p5js.org/haroonshafi/sketches/9mTUs7KrB

SKETCH

Here is how I wanted my sketch to look like:

Here is the sketch:

I am quite proud of finally figuring out the million conditions for implementing playback options. Embedded below are specific parts of the code: the first one that displays the details for a single song and the second skips the current song.

case 0:
        background("#484848"); // set background according to colour of album cover

        push(); // drop down icon
        strokeWeight(4);
        stroke("#373737");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          // duration slider constantly updating as time passes using the ratio of two methods as follows
          this.x,
          0.7 * height,
          (gangteyAudio.currentTime() / gangteyAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();

        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y); // displaying name of song
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20); // displaying artist name

        textSize(10); // the following code displays the time of the song and its duration in minutes and instead of showing it in seconds by default by using modulus and integer division functions
        text(
          Math.floor(gangteyAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(gangteyAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(gangteyAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(gangteyAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );

        if (gangteyAudio.isPlaying()) {
          // for alternating between the pause/play icon shape
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }

        image(
          // displaying album cover
          gangteyImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
if (
      // if forward icon pressed
      mouseIsPressed &&
      mouseY > height * 0.85 - 12 &&
      mouseY < height * 0.85 + 12 &&
      mouseX > width * 0.7 - 10 &&
      mouseX < width * 0.7 + 12
    ) {
      greenFlag = 1; // reset heart flag to clear as song changes
      switch (
        songNum // stop song currently playing
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.stop();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.stop();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.stop();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.stop();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.stop();
          }
          break;
      }
      if (songNum == 4) {
        // update index to next index by incrementing
        songNum = 0;
      } else {
        songNum += 1;
      }
      switch (
        songNum // play song from next index
      ) {
        case 0:
          if (gangteyAudio.isPlaying() == false) {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying() == false) {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying() == false) {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying() == false) {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying() == false) {
            ayiBahaarAudio.play();
          }
          break;
      }
    }

I think it is possible to enhance the functionality even more, for example by enabling shuffle, but this specific playlist is meant to be listened to in its exact order so maybe next time! Other than that, I am quite satisfied that even though I didn’t think it possible in the beginning, by revisiting the concepts and spending hours revising everything we’ve learnt so far and even checking out some other concepts, in the end I was able to bring my concept to life. Also, you guys should definitely put this playlist on while on a walk and maybe tell me what you thought about it! Hope you like the experience!