Category: F2025 – Aya

Design Meets Disability

After reading this text,  I found myself agreeing with the author’s argument on fashion and designing products for disabilities. I’ve always been curious about the process behind designs for products meant to support people with disabilities, such as prosthetics, hearing aids, and glasses. Although at the beginning fashion was described as a form of reducing the size and enhancing the aesthetic aspect of products such as glasses, my thoughts about the author’s argument changed. But as I read further, I realized that reducing the size and making a product “fashionable” is not just about making it pretty, but also satisfying  the comfort of the client, and respecting their experience. 

The text reinforced some ideas I already had, especially the belief that good design is often thoughtful for problem-solving. I connected strongly with Charles Eames’ idea that design is guided by constraints, because it reminded me that although sometimes there will be limitations, this is just a first step towards understanding what the client wants and needs. At the same time, the reading challenged me to think about other  perspectives I thought about before, such as how making a design for disability discreet might unintentionally send a message that it should be hidden. Thus, it is important to always prioritize the comfort of the client, and take these different perspectives into consideration. 

Exercise 1: Arduino to P5 Communication

For this exercise, we used a potentiometer as the analog sensor. The potentiometer controls the ellipse’s position on the horizontal axis in the P5 sketch. When you turn it one way, the ellipse moves to the right, turning it the other way causes it to move left.

We added a little text at the top of the sketch that displays the sensor value. As the value increases, the ellipse moves to the right, and vice versa.

Link to code: Exercise1_FullCode

Schematic

 

Circuit Design

Demo Video

Exercise 2: P5 to Arduino Communication

Here, we used the keyboard arrow keys to change the LED brightness. Pressing the right arrow increases the brightness, and the left arrow decreases it.

Link to code: Exercise2_FullCode

Schematic

Demo Video

Exercise 3: Bi-directional Communication

For the Arduino to P5 communication, the potentiometer acts like the “wind” in the gravity/wind example. As you turn it, the ball gets pushed left or right depending on the mapped value.

For the P5 to Arduino communication, every time the ball hits the bottom and bounces, it triggers the LED to briefly turn on and then off, so the LED flashes in sync with each bounce.

Link to code: Exercise3_FullCode

Schematic

Demo Video

Exercise 1: Arduino to P5 Communication

For this exercise, we used a potentiometer as the analog sensor. The potentiometer controls the ellipse’s position on the horizontal axis in the P5 sketch. When you turn it one way, the ellipse moves to the right, turning it the other way causes it to move left.

We added a little text at the top of the sketch that displays the sensor value. As the value increases, the ellipse moves to the right, and vice versa.

Demo

Full Code

Schematic

Arduino:

void loop() {

  potentiometerValue = analogRead(potentiometerPin);  // reads sensor value (0–1023)


  // Send value to p5 via serial as a line of text

  Serial.println(potentiometerValue);

  delay(20);

}

P5:

// read sensor value from Arduino
 let data = port.readUntil("\n");
 if (data.length > 0) {
   sensorValue = int(trim(data)); // convert from string to number
 }

 // map potentiometer range (0–1023) to screen width
 let x = map(sensorValue, 0, 1023, 0, width);
 let y = height / 2;

 //draws ellipse
 ellipse(x, y, 50, 50);

Exercise 2: P5 to Arduino Communication

Here, we used the keyboard arrow keys to change the LED brightness. Pressing the right arrow increases the brightness, and the left arrow decreases it.

Demo

Full Code

Schematic

Arduino:

void loop() {
  if (Serial.available() >= 0) {
    brightness = Serial.parseInt(); 
    brightness = constrain(brightness, 0, 255);
    analogWrite(ledPin, brightness); 
  }
}

P5:

function draw() {
  background(240);

  if (!port.opened()) {
    text("Disconnected - press button to connect", 20, 80);
  } else {
    text("Connected - use arrow keys to adjust brightness", 20, 80);
    text("Brightness: " + sendToArduino, 20, 120);

    // Send the brightness value to Arduino
    port.write(sendToArduino + "\n");
  }
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    sendToArduino -= 10;
  } else if (keyCode === RIGHT_ARROW) {
    sendToArduino += 10;
  }

  sendToArduino = constrain(sendToArduino, 0, 255);
}

Exercise 3: Bi-directional Communication

For the Arduino to P5 communication, the potentiometer acts like the “wind” in the gravity/wind example. As you turn it, the ball gets pushed left or right depending on the mapped value.

For the P5 to Arduino communication, every time the ball hits the bottom and bounces, it triggers the LED to briefly turn on and then off, so the LED flashes in sync with each bounce.

Demo

Full Code

Schematic

Arduino:

void loop() {
  // Read analog sensor
  sensorValue = analogRead(sensorPin);
  // Send sensor value to P5
  Serial.println(sensorValue);
  
  // Check for bounce signal from P5
  if (Serial.available() > 0) {
    int bounce = Serial.read();
    if (bounce == 1) {
      digitalWrite(ledPin, HIGH);
      delay(100);
      digitalWrite(ledPin, LOW);
    }
  }

  delay(50);
}

P5:

// Read analog sensor value from Arduino
 if (port.available() > 0) {
   sensorValue = int(port.read());
   wind.x = map(sensorValue, 0, 1023, -2, 2); // Map sensor to wind strength
 }

 

Design Meets Disability 

In this reading, the author argues that simplicity can be just as important as universality in design. While universal design aims to include every possible user, trying to add too many features can actually make a product harder to understand and use. The author emphasizes that cognitive accessibility, how easy something is to learn and navigate, is often overlooked because it is harder to measure than physical accessibility. By valuing simplicity over complexity, designers can sometimes create products that are more inclusive in practice, even if they do not meet every theoretical definition of universal design. The author also suggests that good designers learn to balance the ideal design brief with what will actually work best for users, sometimes choosing to remove features for a better overall experience.

I agree with the author’s argument that simplicity can be a powerful form of accessibility. In my experience, many products become confusing or overwhelming when they try to offer every possible option to every type of user. However, I also think that sometimes having more features can be beneficial for users. In many cases, a product with extra options feels like a better deal because it allows for more customization or more advanced use when needed. While simplicity is appealing, I don’t always want to sacrifice functionality for the sake of minimalism. I believe the best approach depends on the context: some products should stay simple, but others can genuinely improve the user experience, and even accessibility, by offering richer features as long as they remain intuitive to use.

Task 1: 
Light sensor controls ellipse on p5.js
https://drive.google.com/file/d/1LG16uZcffBsWkmddW0rGVTF8lVujMUjo/view?usp=sharing

int lightPin = A0;
void setup() {
Serial.begin(9600);
pinMode(lightPin, INPUT);
}
void loop() {
int sensorValue = analogRead(A0);
Serial.println(sensorValue);
delay(5);
}

let address = 0;

function setup() {
  createCanvas(600, 600);
  noFill();
}

function draw() {
  background("purple");
  stroke("white");

  // Convert the incoming sensor reading (0–1023) into a horizontal screen position
  ellipse(map(address, 0, 1023, 0, width), height / 2, 100, 100);

  if (!serialActive) {
    // Show a connection screen while serial communication hasn’t started yet
    background("rgb(70,9,70)");
    stroke("white");
    textSize(50);
    text("Press Space Bar to select Serial Port", 20, 30, width - 30, 200);
  }
}

function keyPressed() {
  // When the space bar is pressed, begin the setup process for the serial port
  if (key == " ") setUpSerial();
}

function readSerial(data) {
  // If valid data arrives from the Arduino, save it for use in draw()
  if (data != null) {
    address = int(data);
  }
}

Task 2:
Controlling brightness of LED on p5.js using mouseX position
https://drive.google.com/file/d/1F5u96LDEvKJTtBuD6cbVIIlCcqiFUnyZ/view?usp=sharing

// Holds the brightness value we will send to the Arduino
let brightness = 0;

// Stores any data received back from Arduino (not used, but required)
let latestData = "";

function setup() {
  // Create the canvas where visual feedback will appear
  createCanvas(600, 400);
  noStroke();
}

function draw() {
  // Clear the screen each frame with a black background
  background(0);

  // Convert trackpad/mouse X position (0 → width) into brightness (0 → 255)
  brightness = int(map(mouseX, 0, width, 0, 255));

  // Draw a rectangle whose fill intensity matches the brightness value
  fill(brightness);
  rect(0, 0, width, height);

  // If a serial port is active, send the brightness value to the Arduino
  if (serialActive) {
    writeSerial(brightness + "\n"); // "\n" ensures Arduino reads full numbers
  }

  // If serial is NOT open, show instructions to the user
  if (!serialActive) {
    background("purple");
    fill("white");
    textSize(28);
    text("Press SPACE to choose Serial Port", 20, 40);
  }
}

function keyPressed() {
  // Press SPACE to open the Web Serial port selection dialog
  if (key === " ") {
    setUpSerial();
  }
}

// This function is REQUIRED by p5.webserial
// It receives data sent from Arduino (even if unused)
function readSerial(data) {
  if (data) latestData = data;
}

// Sends data to Arduino IF the writer is available
function writeSerial(value) {
  if (writer) {
    writer.write(value);
  }
}

int ledPin = 9;
int brightness = 0;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
}

void loop() {
  if (Serial.available() > 0) {
    brightness = Serial.parseInt();
    brightness = constrain(brightness, 0, 255);
  }

  analogWrite(ledPin, brightness);
}

Task 3:
Potentiometer to control the direction of the wind and LED light when when ball bounces
https://drive.google.com/file/d/1x8fewdACiGBJ0Qv7vc6tiyZ5ukW19EtK/view?usp=sharing

int LED = 9;
int POT = A0;


void setup() {
Serial.begin(9600);
pinMode(LED, OUTPUT);


// Test the LED
digitalWrite(LED, HIGH);
delay(500);
digitalWrite(LED, LOW);
}


void loop() {
int p_value = analogRead(POT); // read from the potentiometer
int move = map(p_value, 0, 1023, -1, 2); // map the value to -1, 0, and 1
Serial.println(move);


if (Serial.available() > 0) {
// read from p5.js
int touch = Serial.parseInt();
// set the LED command
if (touch == 1) {
digitalWrite(LED, HIGH);
} else {
digitalWrite(LED, LOW);
}
}
}

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let on = 0;

function setup() {
  createCanvas(640, 360);
  //noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  wind = createVector(0,0);
}

function draw() {
  background(255);
  
  if (!serialActive) {
    text("Click on the Screen to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  
  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 > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
  }
  // turn on the LED only when it's on the ground or hits the ground
  if(position.y == height-mass/2){ 
    on = 0;
  }else{
    on = 1;
  }
}
function applyForce(force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}
function keyPressed(){
  if (key==' '){
    mass=random(15, 80);
    position.y=-mass;
    velocity.mult(0);
  }
}
function mousePressed() {
    setUpSerial();
}
function readSerial(data) {
  if (data != null) {
    // make sure there is actually a message
    // split the message
    wind.x = data;
    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = on + "\n";
    writeSerial(sendToArduino);
  }
}

Reflection
I generally liked on working and understanding underlying concepts behind how to the Arduino and p5.js sketches work together. I already see my progress being able to understand how pins work and how to connect each sensor properly. I wanted to avoid using distance sensor because I used it for the last project. We worked together with Aizhan, and used AI a bit for the third task to helps us understand how gravity and velocity worked, and it helped us come up with a code to connect potentiometer as a wind.

Design Meets Disability:

As I was reading, I found out that what stayed with me most was how deeply design choices are entangled with social attitudes, even often more than we admit. The author’s critique of “camouflage” design exposed how much stigma gets quietly built into objects that are supposed to help people. It made me reconsider how often “neutrality” in design actually reinforces harmful norms by trying to erase difference instead of valuing it.

I was also struck by the idea that design for disability shouldn’t be separated from regular, mainstream design. The examples of the Eames splint and Aimee Mullins’ prosthetics shifted my understanding of what inclusivity can look like. Instead of treating disability as a constraint to minimize, the reading frames it as a space for experimentation, a site where new forms, aesthetics, and cultural meanings can emerge. That idea felt surprisingly liberating, because it challenges designers to imagine disability not as a deviation, but as part of the full spectrum of human experience.

Also, the discussion of universal design made me question my own assumptions about what “inclusive” even means. Sometimes we equate inclusivity with adding features for everyone, but the reading suggests that true thoughtfulness might come from editing, refining, and listening to individual needs. It left me with a sense that designing responsibly requires both humility and boldness: the humility to recognize one’s blind spots, and the boldness to challenge conventions that limit how people see themselves.

After reading this article, I was reminded of Mark Zuckerberg’s quote where he said that the next biggest innovation is going to be VR. The author emphasized that the incorporation of more senses into these technological devices allows people to really interact with them in a much deeper sense, whereas smartphones are just composed of screens and we just scroll on the glass, not getting any feedback. At first, I thought we still get tactile feedback from the screen. For instance, when we are playing games and get attacked by someone, we feel the vibration. But that does not foster any intimate interaction between users and the device itself. What makes an experience more unique and immersive is stimulating as many human senses as possible, something that I learned in the class I took when I was a sophomore, called Immersive Experiences. I think for my final project, I want to do something that can impact people’s thoughts and make them reflect on their past experiences through immersive experiences. Through these two articles, I learned that we are shifting to a world where the distance between technology and humans is getting much closer. I am somewhat worried about it because there are already cases where people get confused about their identities since they spend most of their time in a digital world. I think it is best to create a boundary between us and technology to remain humanities in this world.

I really agreed with what Bret Victor was saying in “A Brief Rant on the Future of Interaction Design.” The piece did exactly what it was meant to do; it made me aware of something I never really saw as a problem before. When he talked about “Pictures Under Glass,” I honestly felt a bit called out. I’ve never questioned how flat and disconnected our interactions with screens have become; I just accepted them as normal.

Working with Arduino this semester made his point hit even harder. For some reason, it feels so much more rewarding than coding in p5, maybe because I can actually touch and see what I’m creating. It’s not just visuals on a screen; it exists in the real world. Even our first project, where we had to design creative switches that didn’t rely on hands, felt like a step toward the kind of thinking Victor wants designers to embrace.

I don’t know enough about the field to say whether designs nowadays are really “timid,” but I get where he’s coming from. The black-and-white photography analogy stuck with me; it shows how something can be revolutionary for its time but still just a transition toward something better. This reading made me rethink what “interaction” really means and imagine a future for technology that feels more connected to the body, not just the screen.

Inspiration:

For this week’s project, the main inspo for our instrument was Stormae’s Song “Alors on Danse”. We were mainly inspired by the way that the songs main notes are split into 3 notes of varying pitches, with one sound constantly playing in the background. For that reason we varied the pitches of the three sounds our project produces with a 4th note that is constantly playing when the button is pressed.

Concept:

For this week’s project, we used 3 light sensors to play sounds on the piezo speaker, with one note being played constantly when a button is clicked. With the light sensor, once the user’s finger covers the sensor that is when the note is played. Furthermore, we have three sensors each of which plays a different pitch on the piezo speaker. The condition that allows for this is the reading of the sensor in comparison to the threshold we defined. An additional component we added was the button that allows for the sounds to be played on the piezo speaker and then stopped once the button is pressed again.

Code:

int photoPins[3] = {A0, A1, A2};// first we define a list of integers holding the analog pins
int buttonPin = 2; // digi pin 2 for the buttons
int piezzoPin = 8; //digi pin 8 for the piezzo speaker

int threshold = 700; //this is the threshold fo rte light/no light intensity that worked wit our light sensors in our environment/lighting

bool prevPhoto[3] = {false, false, false}; //keeping track of whether the light sebsir was interacted with or not false initially
bool prevButton = false; //initially false
bool buttonState = false;//initially false

void setup() {
  pinMode(buttonPin, INPUT_PULLUP); //for the button pint as an input for the arduino
  pinMode(piezzoPin, OUTPUT); //setting the buzzor pin as output so the arduino sneds the sound signal
  Serial.begin(9600); // serial monitor for debugging
}

void loop() {
  for (int i = 0; i < 3; i++) { //looping over the 3 sensors to reasd their analog value
    int value = analogRead(photoPins[i]);
    bool tapped = value < threshold; //comparing the value captured by the sensor and the defined threshold
    if (tapped && !prevPhoto[i]) { //checking for tap in the current state compared to prev
      if (i == 0) tone(piezzoPin, 440, 200); // translates to A0
      if (i == 1) tone(piezzoPin, 523, 200); // translates to A1
      if (i == 2) tone(piezzoPin, 659, 200); // translates to A2
    }
    prevPhoto[i] = tapped; //MAKING SURE TO NOTE it as tapped to have a singular tap rather than looping

    Serial.print(value); //serial print
    Serial.print(",");
  }

  bool pressed = digitalRead(buttonPin) == LOW; //setting the reading of the button to low meaning the button is pressed
  if (pressed && !prevButton) { //when the button is pressed state changes from not pressed(false) to presssed(true)
    buttonState = !buttonState;
    if (buttonState) tone(piezzoPin, 784);// if toggled on play a continuoue G5 tone
    else noTone(piezzoPin); //otherwise stop the buzzer
  }
  prevButton = pressed;

  Serial.println(pressed ? "1" : "0"); //for monitoring purposes

  delay(50);//short delay
}

Disclaimer: Some AI/ChatGPT was used to help with debugging and allowing multiple elements to work cohesively.

More Specifically:

1- When trying to debug, to check if button is pressed is true on the serial monitor (this line: Serial.println(pressed ? “1” : “0”); //for monitoring purposes)
2- Recomended values for frequency in hertz to mimic Alors on Danse (if (i == 0) tone(piezzoPin, 440, 200); // translates to A0 if (i == 1) tone(piezzoPin, 523, 200); // translates to A1 if (i == 2) tone(piezzoPin, 659, 200); // translates to A2) The SECOND parameter

Schematic: Demo:

IMG_8360

Future Improvements:

As for the future improvements, one main thing we wanted to capture in this project is being to overlap the sounds, but since we were working with one piezo speaker, we were not able to do that. To address this we aim to learn more about how we can maybe start playing the sounds from our laptops instead of the physical speaker we connect to the Arduino. Other improvements could be exploring how we can incorporate different instrument sounds maybe and create an orchestra like instrument.

Victor’s brief but powerful rant on the future of interaction design continued to open my eyes to the extent that technology has cut off human beings from the physical world. For him, the so-called “future” of design with its touchscreen and glossy surface is not a revolution but merely a very limited advance that pays no attention to the human side of things. He completely turns the issue around and states that our hands are the most delicate locks for the least skillful and least tech-savvy users. The describes actions as elementary as page turning and a glass of water holding caused me to realize the extent of feedback and consciousness that humans get from touch. At this point, one might conclude that most of the devices one has nowadays are the ones that take the feedback away from them. His term “Pictures Under Glass” truly resonated with me since it brilliantly encapsulates the notion of how dull and one-dimensional technology interactions can appear. The reading of his rant made me reflect on the directors’ point that soft human qualities should not be engendered by modern technology. In my opinion, he wants us to know that true advancement should keep us emotionally attached to our creations while tech, unfortunately, does the opposite.

In his later responses, Victor makes it clear that he was not trying to destroy de facto technology but to show the way to future development. He underlines that the iPad and the likes are already very important and revolutionary, and still, they are not the end. The comparison of the iPad with the old black-and-white photography was very pleasant to me. It was good for the time but the market for color film kept rising. Victor believes that it should be the same with interaction design. Not only should we seek the right ways to design technology that is visible, tangible, and interactable, but also we should explore such ways. What I found most striking was his stress on the whole body in interaction rather than just a fingertip. He said that most of us are sitting and staring at screens all day long, which makes a total separation from our original nature of moving, feeling, and exploring. This idea was very strong to me as it brings technology back to something very human. Reading both articles made me rethink the role of design in either restricting or enlarging our innate capabilities. Victor’s writing is a sign that the technology of the future should make us feel more alive and interconnected, while on the other hand, it should not have the opposite effect of making us feel dead and isolated.