Author: Abdelrahman Abdelazim

videos

User Testing

I asked two of my friends to try the project without giving them any instructions at all. I basically stepped back and just watched how they interacted with it. I wanted to see what they touched first, what they ignored, what they were drawn to, and where they hesitated.

The first user started gently, almost testing the waters, but the moving colors grabbed his attention fast. He pressed the big button and immediately saw his face in the painterly camera view, which made him smile. After that, he began switching modes and taking pictures like it made sense right away. The potentiometer especially got him excited. He kept turning it back and forth and saying how cool it felt that the strokes actually changed with the knob. The only time he paused was when he said it would be really helpful to have a quick three second countdown before the picture is taken so people can pose. Other than that, everything felt natural to him.

The second user had a totally different vibe. He came in pressing buttons really fast just to see what would happen. The system actually handled that well and he picked up the mapping between the controls and the changes on screen pretty quickly. He really liked how turning the knob changed the strokes and even said it felt more physical and satisfying than using a mouse. The only point where he seemed confused was after he saved a photo, because the interface didn’t really say anything. He wasn’t sure if the picture actually saved or how to get back to the live view. That moment definitely needs better feedback.

What felt great

1. 1. People figured things out by exploring, not thinking.
   2. The hardware controls feel natural — especially the knob!
   3. The color modes make people react emotionally (in a good way!).

What needs to change

1. 1. Clear photo-save feedback (a flash, message, anything!).
   2. A countdown before capturing the image.
   3. A more obvious return-to-camera cue
      
      What I wanted to explain

I think just two things: which button saves, and how to return after saving. If the UI signals those moments better, the whole experience becomes effortlessly smooth.

Conceptualization:

The central idea was to build a simple connection between physical and digital worlds.

Exercise 1: Single-Sensor and p5.js Movement
Using only one analog sensor (a potentiometer), the Arduino continuously reads values and streams them to p5.js over serial. p5.js interprets those readings and moves an ellipse along the horizontal axis, keeping it vertically centered.

// exercise 1
void setup() {
 Serial.begin(9600);
  // wait for p5 to connect
 while (Serial.available() <= 0) {
   Serial.println("0,0");
   delay(300);
 }
}
void loop() {
 // wait for data from p5
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH);
    Serial.read();     // read incoming
  
   int sensorValue = analogRead(A0); // read sensor
  
   Serial.println(sensorValue);   // send sensor value
 }
 digitalWrite(LED_BUILTIN, LOW);
}

P5js: https://editor.p5js.org/aka7951/sketches/alRawYdiF

Demo https://drive.google.com/file/d/1Morf2y7cxIAgYLHKVnitsadjr813cX4Z/view?usp=sharing

Exercise 2: LED Brightness Controlled by p5.js
Next, I reversed the flow. Instead of only reading from Arduino, I sent numerical values from p5.js back to the board so it could adjust LED brightness using PWM.

int ledPin = 9;


void setup() {
 Serial.begin(9600);
 pinMode(ledPin, OUTPUT);
 pinMode(LED_BUILTIN, OUTPUT);
  // Wait for p5 connection
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH);
   delay(300);
   digitalWrite(LED_BUILTIN, LOW);
   delay(300);
 }
}
void loop() {
 if (Serial.available() > 0) {
   int brightness = Serial.parseInt();  // Read brightness value from p5
   analogWrite(ledPin, brightness);     // Set LED brightness
  
   if (Serial.read() == '\n') {
     digitalWrite(LED_BUILTIN, LOW);
   }
 }
}

P5js: https://editor.p5js.org/aka7951/sketches/tQoRTseMj

Demo: https://drive.google.com/file/d/1rdLpd3JG87jDa9bJEWZWtLMIvA9Ub0Vg/view?usp=sharing

Exercise 3: Gravity + Wind Integration
Finally, I modified the p5.js gravity wind sketch. Each time the ball hits the “ground,” p5 sends a signal to Arduino, turning an LED on briefly before switching back off. Meanwhile, an analog sensor feeds continuous data to p5.js to influence the wind force acting on the falling ball.

int ledPin = 5;


void setup() {
 Serial.begin(9600);
 pinMode(ledPin, OUTPUT);
  // wait for p5 to connect
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH);
   Serial.println("0");
   delay(300);
   digitalWrite(LED_BUILTIN, LOW);
   delay(50);
 }
}
void loop() {
 while (Serial.available()) {   //check if there's data from p5
   digitalWrite(LED_BUILTIN, HIGH);
  
   int ledValue = Serial.parseInt();     //read LED value from p5 (0 or 1)
   if (Serial.read() == '\n') {     // check for newline character
     digitalWrite(ledPin, ledValue);
    
     int sensorValue = analogRead(A0);  // read potentiometer value
     Serial.println(sensorValue);  // send sensor value back to p5
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

P5js: https://editor.p5js.org/aka7951/sketches/ze7W5LcOi

Demo: https://drive.google.com/file/d/1c0O6wrqE6aStFpg9cvYVOke0zxojdR4Z/view?usp=sharing

Reflection & Challenges:

This project helped me practice the  bidirectional serial communication between Arduino and p5.js. One difficulty came from synchronizing input and output flows. In Exercises 2 and 3, sending and receiving serial data simultaneously often led to mixed or incomplete values being parsed. I learned to structure the serial communication carefully — ensuring each transmission ended with a newline and that both ends only read or wrote when data was available.

Reading Design Meets Disability made me think about how deeply design shapes the way we see ability and difference. I liked how the book challenged the traditional idea that design for disability should be purely functional. When I saw examples like the stylish hearing aids or the eyeglasses that evolved from medical tools to fashion accessories, I realized how design doesn’t just solve problems—it tells stories about people and identity. I found myself really appreciating how the author described the tension between discretion and expression, especially in how disability devices can either hide or celebrate difference. It made me think about how design always carries a message, even when it pretends to be neutral.

What I liked most was the way the book connected design with emotion and culture. I loved seeing how something as simple as a prosthetic leg could become a work of art, or how Apple’s minimalist products fit into the same conversation about accessibility and beauty. The idea that “good design on any terms” can come from understanding human diversity really stayed with me. I felt inspired by the thought that inclusive design isn’t about charity but creativity—it’s about expanding what we consider beautiful and functional at the same time. This reading made me want to look more closely at everyday objects and think about the values they quietly express.

Concept

Mini Piano

Given that we had to make a musical instrument, we were inspired by a project we found in YouTube of what seemed like a piano. From this, we aimed to make a smaller scale of this project following the requirements for the assignment. The circuit consists of one piezo speaker, a potentiometer as an analog sensor, and a three buttons as digital sensors.

Circuit Illustration

Figure 2 ( Circuit design with code and simulation on “Magnificent Jaiks” by Abdelrahman

Final Results

VIDEO

float octaveMultiplier = map(potValue, 0, 1023, 50, 200) / 100.0;

Concept

So basically, I made this little setup where I can control two LEDs using a knob and a button. One fades in and out smoothly when you twist the knob, and the other just pops on and off when you hit the button. It’s honestly pretty straightforward, but it was actually kind of fun to put together.

Demo

How It Works

The Knob: There’s a potentiometer, when you turn it, one of the LEDs gets brighter or dimmer. Twist one way and the light fades down, twist the other way and it gets brighter.

The Button: The other LED is even simpler. Press the button, light’s on. Let go, light’s off. That’s it.

Code

int pushButton = 2;
int led1 = 4;
int potentiometer = A5;
int led2 = 3;
void setup()
{
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
pinMode(pushButton, INPUT);
pinMode(potentiometer, INPUT);
}
void loop()
{
// digital sensor (switch) controlling ON/OFF state of LED
int buttonState = digitalRead(pushButton);
if (buttonState == HIGH){
digitalWrite(led1, HIGH);
}
else if (buttonState == LOW) {
digitalWrite(led1, LOW);
}
// analog sensor (potentiometer) controlling the brightness of LED
int potValue = analogRead(potentiometer);
int brightness = map(potValue, 0, 1023, 0, 255);
analogWrite(led2, brightness);
}