Category: S2026 – Aya

This reading reminded me of when I was getting my first glasses. I was well aware that even thou I need glasses to see things clearly. They are gonna be much more than that. They will become an integral part of my outlook. Which directly aligns with the authors idea of eyewear being a from of expression and how they overlap in terms of fashion and disability. Glasses in specific have a far greater effect of ones well being. but then thinking about it in a way that such a self expression can become mandatory. It is a scary idea. because then it is something that cages the freedom of self expression. The second aspect of the reading was hiding disability. It is indeed a psychological take that hiding something extra to give a sense that its not there. It reminds me of a saying that “The more you try to fill a shoe that is not yours , the emptier the look” What is intended to be a assistance can backfire in worse way. A solution can create a problem that is far more problematic then the original problem.

 

This week’s reading, Design Meets Disability, made me realize how limited my understanding and awareness of design in this aspect was. I initially thought that design in functional contexts was mainly about creating something accessible for problem-solving. I also thought that disabilities were something people might feel worried or concerned about when it comes to appearance. What really stuck with me was the idea that disability can actually inspire mainstream design, not just be something that adapts to it. I was particularly interested when I read the discussion about glasses, as I never really thought of them as related to a serious disability, and that is because of how normalized they are nowadays. People who need glasses wear them openly, and they come in many different styles from different brands. Along with this, the example of the Eames leg splint showed how something designed under strict constraints for injured soldiers led to completely new techniques that later influenced furniture design. This made me understand that disabilities are not always limitations, but can actually lead to innovation.

Moreover, comparing this to hearing aids made the contrast very clear, where focusing too much on hiding them can limit both their function and how people feel about using them. This also made me think of different applications, and the one that stood out most to me was prosthetic arms and legs. They started off as very visible and mechanical, made of materials like metal or wood, but with improvements, they are becoming more realistic, and sometimes even designed in creative ways. I felt like this shows a combination of both hiding the disability and expressing design, which highlights how complex this topic can be. Overall, this reading made me realize that design is not just about fixing an issue, but also about experimenting and thinking beyond it. This connects a lot to the work we do, because I sometimes focus too much on making something work, without thinking about how I can push it further or make it more creative.

Exercise 1:

P5 code:

https://editor.p5js.org/farahshaer/sketches/K1ETNJevI 

Arduino code:

https://github.com/farahshaer/Intro-to-IM/blob/15f03b7108b0eead04ecc8fbade23e0703c774e4/sketch_apr16a.ino 

Process:

So for the first part, it was a one way communication between arduino and p5 with the idea of taking an input from a sensor on arduino and using that data to control the circle on p5. I used a potentiometer as my sensor because it gives a smooth range of values which makes it easier to control the movement on the screen. The arduino reads the values and sends it to p5 using serial.prin1n(). Then in p5 I used readUntil(“\n”) to receive the data and once I got that value I cleaned it using trim() and converted it into a number using int(). Then I map it from the sensor range to the width of the canvas so it can control the x position of the ellipse. As I turn the potentiometer, the circle moves left and right on the screen. 

Exercise 2:

P5 Code:

https://editor.p5js.org/MariamAlameri/sketches/oWfNkocIc 

Arduino Code:

https://github.com/mariam9766/Intro-to-IM/blob/736de2e50c777dff22b3545885aebfa6cce33cfd/BidirectionalCommunicationExercise2_mariam.ino 

Process:

The second exercise involved bidirectional communication between p5 and Arduino, where we were asked to control the Arduino from p5. I wanted to create a p5 sketch that allows the user to control the brightness of an LED on the Arduino board. I chose to use a slider in the sketch, as it provides an intuitive and suitable way to adjust brightness. I also referred to the exercises completed in class and adjusted them to meet the purpose of this assignment. In the Arduino code, I used two if statements to ensure that the LED responds when data is received from p5, and to constrain the brightness value within the range of 0–255 for proper PWM control. In the p5 sketch, I implemented the slider using createSlider, adjusted its position and appearance, and used port.write to send the brightness value to the Arduino, allowing accurate control of the LED.

Exercise 3:

Concept:

After completing the first two exercises and creating communication between the p5 sketch and the Arduino code and board back and forth, in this exercise we had to combine both. When the ball in the p5 sketch bounces on the ground, the LED on the board flashes on and off, and when we use the potentiometer, which is the analog sensor on our Arduino board, we control the wind in the sketch and move the ball left and right.

P5 Code:

https://editor.p5js.org/farahshaer/sketches/hAwlRZjXM 

Arduino Code:

https://github.com/mariam9766/Intro-to-IM/blob/9f561f01e2719a784d6c54e8d43e4bbc998a6608/BidirectionalCommunicationExcercise3_mariam.ino 

Demonstration:

Circuit:

Schematic:

Code we’re proud of:

One part of the code that we are proud of is the bounce detection and how it connects to the Arduino:

//the bounce detection
  if (position.y > height - mass / 2) {
    //check if the ball hits the ground
    velocity.y *= -0.9; // A little dampening when hitting the bottom (reverse the direction when it hits)
    position.y = height - mass / 2; //keep it above the floor
    bounce = 1; //to mark that the bounce happened
  }
  //send to arduino
  let sendToArduino = bounce + "\n"; //send the bounce value 1 or 0 and the "\n" tells ardunio the message is done
  port.write(sendToArduino);
  // reset bounceafter it sends
  bounce = 0;
}

We are proud of this part because it turns the ball bouncing into a signal that affects something physical (the LED). It also only sends the signal once per bounce, which makes the interaction feel more intentional instead of constant.

Process:

So in this version of the gravity and wind example, I added serial communication so the sketch can interact with an Arduino on p5. Instead of controlling the wind using the keyboard like in the original example, the wind now comes from an analog sensor (like a potentiometer) connected to the Arduino. The Arduino sends that sensor value to p5, and I map it to a wind force so it pushes the ball left or right. I also added a bounce signal that goes the other way. Every time the ball hits the bottom of the canvas, I set a variable to 1 and send it to the Arduino. This tells the Arduino to briefly turn on an LED, then it gets reset back to 0 so the signal only happens once per bounce. Most of the original physics code stayed the same, but the main changes were adding serial setup, reading sensor data to control wind, and sending a bounce message back to control the LED.

For the Arduino side, I worked on the Arduino code to align with the p5 sketch we have and create serial communication from the Arduino board to the p5 sketch and vice versa. I set it up so the Arduino sends the analog sensor value from A0 to control the wind on the ball on the sketch, and receives a bounce signal from p5 when the ball hits the ground. When this signal is received, the Arduino briefly turns on an LED to indicate the bounce, and then resets the value so the LED only activates once every time it touches the ground. I also made sure the serial communication was properly structured so both inputs and outputs work smoothly together at the same time, allowing interaction between the physical sensor and the digital sketch.

Reflection:

This exercise helped us understand how bidirectional communication actually works, instead of just sending data one way. It was interesting to see how the Arduino and p5 sketch can influence each other at the same time. One challenge we ran into was getting the potentiometer to properly control the wind. Even though the LED response worked, the sensor input was inconsistent, which made it harder to debug whether the issue was in the Arduino code or the p5 code. This made us realize how important timing and serial communication structure are, especially when both sides are sending and receiving data continuously.

If we had more time, we would focus on possibly smoothing the wind movement so it feels less jumpy. We would also experiment with adding more physical outputs, like multiple LEDs or different types of sensors, to make the interaction more dynamic but we just wanted to stick with the assignment instructions for now to get a grasp of the concept.

For my final project, I want to create a physically interactive pattern machine that uses Arduino controls to generate and transform digital patterns in p5. Instead of drawing directly on the screen, the user would control the structure of the pattern through physical input. I want the project to feel more like an artwork than a tool, where the physical controls shape a visual composition in real time. Right now, I am thinking of using potentiometers and buttons so the user can change things like the density of the pattern, the size of the shapes, the color palette, or the type of pattern being generated.

The Arduino side of the project would be responsible for reading the physical input, and the p5 side would process that input and turn it into the visual response on screen. For example, buttons could be used to switch between different pattern types or different color modes. For this project, I took inspiration from patterns I see in rugs, embroidery, traditional clothes, and decorative geometric designs. I am especially interested in the way these patterns use repetition, symmetry, borders, and structured color palettes to create a full composition. Because of that, I want to make something that feels artistic while still having a clear interaction system.

For the visual direction, I want the patterns to feel more designed than random. I am interested in geometric repetition, floral motifs, textile-like patterning, and decorative compositions that change in response to the user. I do not want it to just feel like shapes moving around on a screen. I want it to feel like the user is shaping a system that produces a full visual composition. Some of the references I collected have a central medallion structure, some are more grid-based and repeated like tiles, and others are softer and more floral. I am still deciding exactly how the final look will come together, but I know I want the visuals to feel cohesive, decorative, and intentional.

For inspiration, I am looking at rug patterns, embroidery, geometric ornament, floral textile designs, and repeated decorative motifs. What I am most drawn to in these references is the use of repetition, symmetry, borders, and controlled color palettes. I also want to look at p5 pattern and symmetry examples, repeated shape systems, and tutorials related to mapping Arduino input into visual parameters in p5. For the Arduino side, I will likely look back at the potentiometer and button examples, and for p5 I want to look at examples that use repetition, grid systems, tiling, and color palette switching.

Images:

This is an AI generated image that gives a more concrete example of my project:

References:

• https://pin.it/T0fnQGXuC
• https://pin.it/4DNaWlxmq
• https://pin.it/1tYDm2dmi
• https://pin.it/4xp7tjsH0
• https://pin.it/30hUjJpG9
• ChatGpt for image generated

Concept:

In this series of exercises, we explored how Arduino and p5.js can talk to each other through serial communication. Each exercise focused on a different direction of data flow. First, Arduino sent information to p5.js. Then we switched it so p5.js controlled something on the Arduino. Finally, we combined both directions to create a full bi‑directional system. Doing these three tasks helped us understand how physical sensors and digital visuals can work together to create interactive experiences.

For the first exercise, we made a sketch where a circle in p5 moves left and right based on a potentiometer connected to Arduino. The potentiometer is the only sensor being used here, and its value controls the horizontal position of the circle while the circle stays in the middle of the screen vertically. On the Arduino side, the potentiometer value is read and sent through serial communication. On the p5 side, that value is read from the serial port and used to control the x position of the circle.

For the second exercise, we made a sketch where p5 controls the brightness of an LED on Arduino. Instead of Arduino sending data to p5, p5 sends a value to Arduino. I used a slider in p5, and moving that slider changed the brightness of the LED. The slider sends a value through the serial port, and Arduino reads that value and uses analogWrite() to control the LED brightness. Since brightness needs a gradual range, the LED had to be connected to a PWM pin.

For the third exercise, we combined both directions into one interactive system. We used the gravity‑wind example from class and connected it to both Arduino and p5.js. The potentiometer controlled the wind force in the p5 sketch, so turning it left or right pushed the falling ball in that direction. At the same time, p5 sent a message back to Arduino every time the ball hit the bottom of the screen. This made the LED blink with each bounce, creating a small physical reaction that matched the animation. Seeing the LED flash at the exact moment the ball hit the ground made the connection between the screen and the hardware feel much stronger. This exercise showed how both sides can respond to each other in real time.

Code:

P5 exercise 1: 

P5 exercise 2:

P5 exercise 3:

Arduino Github Link Exercise 1: https://github.com/mhraalnuaimi/exercise1week11/blob/main/W11..01_serial_simple_potentiometer.ino 

Arduino Github Link Exercise 2: https://github.com/mhraalnuaimi/exercise2week11/blob/main/W11_02_Bidirectional_Com.ino 

Arduino Github Link Exercise 3:  https://github.com/mhraalnuaimi/exercise3week11/blob/main/exercise3week11.ino 

 

Setup:

Exercise 1:

Exercise 2:

Exercise 3: 

Demonstration:

Exercise 1:

Exercise 2: 

Exercise 3: 

Schematic:

Exercise 1:

Exercise 2:

Exercise 3:

Process:  

During these exercises, we followed the same steps for each project: wiring the components, writing the Arduino code, and then connecting everything to p5.js using WebSerial. For Exercise 1, we wired a potentiometer and tested the analog readings in the serial monitor before using them in p5. In Exercise 2, we focused on sending values from p5 to Arduino, so we tested the slider and made sure the LED responded smoothly. Exercise 3 was the most detailed because it used both directions of communication. We had to make sure the potentiometer values were clean, the wind force felt natural, and the LED blinked at the right moment. We also learned that adding a newline at the end of each serial message made the communication much more stable. Overall, the process helped us understand how to connect physical sensors with digital visuals step by step.

 

Code We Are Proud Of:

Code Snippet:

port.write("1");
setTimeout(() => port.write("0"), 100);

This is the part of the code we are most proud of because it shows the moment when p5.js talks back to Arduino. When the ball hits the bottom of the screen, p5 sends a “1” to turn the LED on and then sends a “0” to turn it off again. This creates a quick flash that matches the bounce.

 

Reflection and Areas of Improvement:

Working through these three exercises helped us understand how Arduino and p5.js can communicate in different ways. In Exercise 1, we learned how to read an analog value from Arduino and use it to control something in p5.js. In Exercise 2, we learned how p5.js can send values back to Arduino to control hardware like an LED. In Exercise 3, we combined both directions and created a full interactive loop where both sides respond to each other. This final exercise felt like the most complete example of how serial communication can be used in creative projects. If we continued building on these ideas, we could make more complex interactions such as small games, musical tools, or installations that react to multiple sensors. Overall, these exercises helped us build a strong understanding of serial communication and how physical and digital elements can work together. 

If we were to improve these exercises, we would try adding more sensors or combining different types of inputs to make the interactions more interesting. For example, we could add buttons, sound sensors, or even an ultrasonic sensor to create more complex reactions in p5. We could also improve the visuals by adding animations or smoother movement to the ball. Another improvement would be organizing the code better by separating the serial functions from the physics code to make everything easier to read. These changes would help make the projects feel more polished and closer to real interactive installations.

 

References:

All the concepts we used in these exercises came from the Week 11.1 and Week 11.2 lecture slides. These slides explained how serial communication works, how to use WebSerial in p5.js, and how to send and receive data between Arduino and p5.  

Concept:
In this series of exercises, we explored how Arduino and p5.js can talk to each other through serial communication. Each exercise focused on a different direction of data flow. First, Arduino sent information to p5.js. Then we switched it so p5.js controlled something on the Arduino. Finally, we combined both directions to create a full bi‑directional system. Doing these three tasks helped us understand how physical sensors and digital visuals can work together to create interactive experiences.

For the first exercise, we made a sketch where a circle in p5 moves left and right based on a potentiometer connected to Arduino. The potentiometer is the only sensor being used here, and its value controls the horizontal position of the circle while the circle stays in the middle of the screen vertically. On the Arduino side, the potentiometer value is read and sent through serial communication. On the p5 side, that value is read from the serial port and used to control the x position of the circle.

For the second exercise, we made a sketch where p5 controls the brightness of an LED on Arduino. Instead of Arduino sending data to p5, p5 sends a value to Arduino. I used a slider in p5, and moving that slider changed the brightness of the LED. The slider sends a value through the serial port, and Arduino reads that value and uses analogWrite() to control the LED brightness. Since brightness needs a gradual range, the LED had to be connected to a PWM pin.

For the third exercise, we combined both directions into one interactive system. We used the gravity‑wind example from class and connected it to both Arduino and p5.js. The potentiometer controlled the wind force in the p5 sketch, so turning it left or right pushed the falling ball in that direction. At the same time, p5 sent a message back to Arduino every time the ball hit the bottom of the screen. This made the LED blink with each bounce, creating a small physical reaction that matched the animation. Seeing the LED flash at the exact moment the ball hit the ground made the connection between the screen and the hardware feel much stronger. This exercise showed how both sides can respond to each other in real time.

p5 Code:

P5 exercise 1: https://editor.p5js.org/MaryamAlremeithi/full/yCY7LOF5F
P5 exercise 2: https://editor.p5js.org/MaryamAlremeithi/full/34Nhzf7WZ
P5 exercise 3: https://editor.p5js.org/mharaalnuaimi/full/-E_JsjCiX

Arduino Github Link Exercise 1: Exercise 1
Arduino Github Link Exercise 2: Exercise 2
Arduino Github Link Exercise 3: Exercise 3

Setup:
Exercise 1:

Exercise 2:

Exercise 3:

Demonstration:
Exercise 1: exercise1
Exercise 2: exercise2
Exercise 3: exercise3

Schematic:
Exercise 1:

Exercise 2:

Exercise 3:

Process:
During these exercises, we followed the same steps for each project: wiring the components, writing the Arduino code, and then connecting everything to p5.js using WebSerial. For Exercise 1, we wired a potentiometer and tested the analog readings in the serial monitor before using them in p5. In Exercise 2, we focused on sending values from p5 to Arduino, so we tested the slider and made sure the LED responded smoothly. Exercise 3 was the most detailed because it used both directions of communication. We had to make sure the potentiometer values were clean, the wind force felt natural, and the LED blinked at the right moment. We also learned that adding a newline at the end of each serial message made the communication much more stable. Overall, the process helped us understand how to connect physical sensors with digital visuals step by step.

Code We Are Proud Of:

port.write("1");
setTimeout(() => port.write("0"), 100);

 

This is the part of the code we are most proud of because it shows the moment when p5.js talks back to Arduino. When the ball hits the bottom of the screen, p5 sends a “1” to turn the LED on and then sends a “0” to turn it off again. This creates a quick flash that matches the bounce.

Reflection and Areas of Improvement:

Working through these three exercises helped us understand how Arduino and p5.js can communicate in different ways. In Exercise 1, we learned how to read an analog value from Arduino and use it to control something in p5.js. In Exercise 2, we learned how p5.js can send values back to Arduino to control hardware like an LED. In Exercise 3, we combined both directions and created a full interactive loop where both sides respond to each other. This final exercise felt like the most complete example of how serial communication can be used in creative projects. If we continued building on these ideas, we could make more complex interactions such as small games, musical tools, or installations that react to multiple sensors. Overall, these exercises helped us build a strong understanding of serial communication and how physical and digital elements can work together.

If we were to improve these exercises, we would try adding more sensors or combining different types of inputs to make the interactions more interesting. For example, we could add buttons, sound sensors, or even an ultrasonic sensor to create more complex reactions in p5. We could also improve the visuals by adding animations or smoother movement to the ball. Another improvement would be organizing the code better by separating the serial functions from the physics code to make everything easier to read. These changes would help make the projects feel more polished and closer to real interactive installations.

References:
All the concepts we used in these exercises came from the Week 11.1 and Week 11.2 lecture slides. These slides explained how serial communication works, how to use WebSerial in p5.js, and how to send and receive data between Arduino and p5.

Exercise 1:

P5 code:

https://editor.p5js.org/farahshaer/sketches/K1ETNJevI 

Arduino code:

https://github.com/farahshaer/Intro-to-IM/blob/15f03b7108b0eead04ecc8fbade23e0703c774e4/sketch_apr16a.ino 

Reflection/process:

So for the first part, it was a one way communication between arduino and p5 with the idea of taking an input from a sensor on arduino and using that data to control the circle on p5. I used a potentiometer as my sensor because it gives a smooth range of values which makes it easier to control the movement on the screen. The arduino reads the values and sends it to p5 using serial.prin1n(). Then in p5 I used readUntil(“\n”) to receive the data and once I got that value I cleaned it using trim() and converted it into a number using int(). Then I map it from the sensor range to the width of the canvas so it can control the x position of the ellipse. As I turn the potentiometer, the circle moves left and right on the screen. 

 

Exercise 2:

P5 Code:

https://editor.p5js.org/MariamAlameri/sketches/oWfNkocIc 

Arduino Code:

https://github.com/mariam9766/Intro-to-IM/blob/736de2e50c777dff22b3545885aebfa6cce33cfd/BidirectionalCommunicationExercise2_mariam.ino 

Reflection/process:

The second exercise involved bidirectional communication between p5 and Arduino, where we were asked to control the Arduino from p5. I wanted to create a p5 sketch that allows the user to control the brightness of an LED on the Arduino board. I chose to use a slider in the sketch, as it provides an intuitive and suitable way to adjust brightness. I also referred to the exercises completed in class and adjusted them to meet the purpose of this assignment. In the Arduino code, I used two if statements to ensure that the LED responds when data is received from p5, and to constrain the brightness value within the range of 0–255 for proper PWM control. In the p5 sketch, I implemented the slider using createSlider, adjusted its position and appearance, and used port.write to send the brightness value to the Arduino, allowing accurate control of the LED.

 

Exercise 3:

Concept:

After completing the first two exercises and creating communication between the p5 sketch and the Arduino code and board back and forth, in this exercise, we had to combine both. When the ball in the p5 sketch bounces on the ground, the LED on the board flashes on and off, and when we use the potentiometer, which is the analog sensor on our Arduino board, we control the wind in the sketch and move the ball left and right.

P5 Code:

https://editor.p5js.org/farahshaer/sketches/hAwlRZjXM 

Arduino Code:

https://github.com/mariam9766/Intro-to-IM/blob/9f561f01e2719a784d6c54e8d43e4bbc998a6608/BidirectionalCommunicationExcercise3_mariam.ino 

Demonstration:

Circuit:

Schematic:

Code we’re proud of:

One part of the code that we are proud of is the bounce detection and how it connects to the Arduino:

//the bounce detection
  if (position.y > height - mass / 2) {
    //check if the ball hits the ground
    velocity.y *= -0.9; // A little dampening when hitting the bottom (reverse the direction when it hits)
    position.y = height - mass / 2; //keep it above the floor
    bounce = 1; //to mark that the bounce happened
  }
  //send to arduino
  let sendToArduino = bounce + "\n"; //send the bounce value 1 or 0 and the "\n" tells ardunio the message is done
  port.write(sendToArduino);
  // reset bounceafter it sends
  bounce = 0;
}

We are proud of this part because it turns the ball bouncing into a signal that affects something physical (the LED). It also only sends the signal once per bounce, which makes the interaction feel more intentional instead of constant.

Reflection/future work:

So in this version of the gravity and wind example, I added serial communication so the sketch can interact with an Arduino on p5. Instead of controlling the wind using the keyboard like in the original example, the wind now comes from an analog sensor (like a potentiometer) connected to the Arduino. The Arduino sends that sensor value to p5, and I map it to a wind force so it pushes the ball left or right. I also added a bounce signal that goes the other way. Every time the ball hits the bottom of the canvas, I set a variable to 1 and send it to the Arduino. This tells the Arduino to briefly turn on an LED, then it gets reset back to 0, so the signal only happens once per bounce. Most of the original physics code stayed the same, but the main changes were adding serial setup, reading sensor data to control wind, and sending a bounce message back to control the LED.

For the Arduino side, I worked on the Arduino code to align with the p5 sketch we have and create serial communication from the Arduino board to the p5 sketch and vice versa. I set it up so the Arduino sends the analog sensor value from A0 to control the wind on the ball in the sketch, and receives a bounce signal from p5 when the ball hits the ground. When this signal is received, the Arduino briefly turns on an LED to indicate the bounce, and then resets the value so the LED only activates once every time it touches the ground. I also made sure the serial communication was properly structured so both inputs and outputs work smoothly together at the same time, allowing interaction between the physical sensor and the digital sketch.

This exercise helped us understand how bidirectional communication actually works, instead of just sending data one way. It was interesting to see how the Arduino and p5 sketch can influence each other at the same time. One challenge we ran into was getting the potentiometer to properly control the wind. Even though the LED response worked, the sensor input was inconsistent, which made it harder to debug whether the issue was in the Arduino code or the p5 code. This made us realize how important timing and serial communication structure are, especially when both sides are sending and receiving data continuously.

If we had more time, we would focus on possibly smoothing the wind movement so it feels less jumpy. We would also experiment with adding more physical outputs, like multiple LEDs or different types of sensors, to make the interaction more dynamic, but we just wanted to stick with the assignment instructions for now to get a grasp of the concept.

EXERCISE 01: ARDUINO TO P5 COMMUNICATION

For this exercise, we used a potentiometer as our sensor to control an ellipse in p5.js. As the knob is turned, the Arduino reads the changing analog values and sends them to p5 through serial communication. 

let x = map(sensorValue, 0, 255, 50, width - 50);
  ellipse(x, height / 2, 50, 50);
}

The values are mapped to the x-position of the ellipse, allowing it to move horizontally across the screen while staying centered vertically.

P5 Code | Github

We also did another version of it, which basically uses an ultrasonic sensor. The P5 code is the same for both, just the mapping is different. You comment out the one user using it for a smoother response. The ball movement corresponds to the distance detected by the sensor.

Github

EXERCISE 02: P5 TO ARDUINO COMMUNICATION

For Exercise 2, we used a slider in p5 to control the brightness of an LED connected to the Arduino. As the slider moves, it sends values from 0 to 255 through serial communication. The Arduino reads these incoming values and uses them to adjust the LED brightness using PWM, making the LED appear dimmer or brighter depending on the slider position.

if (Serial.available() > 0) {
int brightness = Serial.parseInt();
analogWrite(9, brightness);
}

This part of the code checks if there is incoming data from p5. When a value is received, it reads the number using parseInt() and uses it to control the LED brightness through analogWrite, which determines how bright or dim the LED will be.

P5 Code |  Github

EXERCISE 03: BI-DIRECTIONAL COMMUNICATION

For Exercise 3, we used a simple setup of an LED, a 330 ohm resistor, and an ultrasonic sensor. The core logic is that the LED is on by default and turns off for a split second when the ball touches the ground, giving a blinking effect. The wind is mapped to the distance detected by the sensor. A distance of less than 40 cm causes left winds and vice versa. The wind strength is proportional to the distance. The ball is meant to bounce off the walls. 

The Arduino code is rather simple, if an object is detected, the distance is written to the serial communication, and if an input is read on the serial communication, the light is blinked. The most interesting part about the Arduino code is how the distance is measured using the pulse

long duration = pulseIn(ECHO, HIGH, 30000); // 30 ms timeout

On the P5 ending, smoothening of the input by the distance sensor was important because otherwise the signal was getting abrupt

latestData = lerp(latestData, val, 0.2);

This was suggested by ChatGPT. It defines a number that basically gets an average, but using linear interpolation. 

The most challenging part of the code was managing the movement of the ball when the bounce is dying off. In the last second, there were a lot of bounces happening. We dealt with that by, instead of blinking the LED on each bounce, we kept the LED on and just turned it off when the ball was in contact with the ground.

P5 Code | Github

For the final project, I was thinking of mixing in one of my old p5 assignments, assignment 2 if I remember correctly, the one with conway’s game of life, now, I want to make an infinity mirror, but what you see inside is the process of conway’s game of life instead of standard colors, with some buttons or some external stuff to change how the cells behave and add some variety.

This will require me to buy a picture frame, for the frame and the acrylic, and also get a one way window film to attach to create that infinity mirror effect, along with buying LED lights also. I plan on adding a lot of interactivity with the user to change how the cells live and die so its less of just a show and more of something interactive. The p5js will handle the processing of the game of life, and maybe provide a UI to handle it or I might pivot towards using hands with ml5js. The Arduino will take the data from p5js and turn on the led’s when they need to be turned on.