Category: S2025 – Mang

This week’s reading was very eye-opening, and addressed a number of design aspects that I had never really considered. The title Design Meets Disability left me with a preconception of what that entailed, which was quickly proven wrong. I’ve worn glasses since I was nine years old, so seeing one of the first sections focus on them came as a surprise to me. I am obviously aware of things like contacts and non-prescription lenses, but it was fascinating to look at the shift from medical spectacles to ‘eyeware’ and see how the perception completely changed. The hearing aid section served as a contrast to that change, where the emphasis is on hiding them from view. There have been a number of times where it took me years of knowing someone to ever notice that they wear hearing aids, which speaks to how far the technology has come. Another tidbit was the mention of using pink plastic to try and hide wearable devices like those, which stood out to me at the very beginning of the text and was addressed again here.

I found it harder to identify with the later portions on prosthetic limbs, mostly due to lack of exposure, but I also feel like it is harder to think about in general. Glasses and hearing aids just focus the ambient light/sound to fit your needs, but trying to design a fully-functional arm seems much more complex. The aesthetic side of things is also a bit strange. Instead of being worn on your head and framing your face, they are harder to work with in that they are simply much larger, but can also be obscured by clothing much more easily. The battle between functionality and aesthetic also becomes much more important, with some prosthetics aiming to look as realistic as possible versus using inorganic structures like hooks to maximize their usefulness. From there you can even ask whether we should allow prosthetics to be constrained by the rest of the body, or to instead push into the realm of transhumanism.

In the article, one of the most interesting points made was the how solving these design problems for those with disabilities can benefit everyone by creating better products overall, not just tailored to those with a disability. This really goes against what ideas we would intuitively have about design, creativity and innovation; namely that more is more. But this article argues that working with constraints, in this case, the unique needs of a person with a disablilty, actually leads to more creative outcomes that can branch out into better designs for general use. Namely, the article says working with disabilities in mind pushes designs to be more simple to increase ease of use, to be more discreet and smaller, and generally more usable. This pushes products, in general to also be better and more easily used by those without disabilities, which is the same point of design. Working for disabilities actually pushes design in the same direction it should be going in anyway in the majority of cases.

This reading explores how design and disability are intricately related, and how a constraint in designing from disability can lead to greater innovative efforts and contributions. The constraints due to disability basically serve as a catalyst for innovation. The author brings up several examples in history that illustrate the evolution of design with disability. Designing for disability shouldn’t solely focus on the functionality but it should also consider the aesthetics of the product, challenging the stigma around people with disabilities. Every single design, from furniture to eyewear to prosthetics to hearing aids, serve a purpose. That purpose is not only defined by its functionality, but also its aesthetic form. I was very interested in the aesthetics of Aimee Mullins’ prosthetics, and how it combines function, form and aesthetics. I do believe that inclusive designing helps to create a sense of identity and belonging for differently abled people. As a person who wears glasses, I think it is definitely important to consider the design of such products; it truly does give a sense of identity and expression. It is also important to create diverse, inclusive and collaborative work environments that promote the designing for the differently abled. I loved this quote from Steve Jobs mentioned here, “Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” This just highlights how all spheres of design must come together for it to be innovative and inclusive; both in functionality and aesthetics. 

Plant Whisperer

I want to make an interactive system that allows a plant to “communicate” its environment and feelings through a digital avatar. Using an Arduino, the project reads light levels and touch interactions, and sends this data to a p5.js sketch. The p5.js interface visualizes the plant’s mood in real time using simple animations, color changes, and sound.

For example, if the plant is in low light, the avatar may appear tired or sleepy, and the RGB LED on the Arduino will turn a soft blue. If the user touches the plant (using a button or capacitive sensor), it responds with a cheerful animation and sound, and the LED may flash in a brighter color.

It’s intended to be playful, meditative, and emotionally engaging—bridging physical and digital experiences in a way that encourages users to care for their environment.

Before diving into the first task, we began by loading the sample Arduino and p5.js code from the previous class. We then read through each line to see how Arduino connects and communicates with p5. This served as a helpful foundation to jumpstart our workflow.

Task 1:

After reviewing the code and identifying the necessary components, we proceeded to build the circuit using a sliding potentiometer. Using analogRead from pin A0, we captured the potentiometer’s data and sent it to p5. The values ranged from 0 to 900, so we divided them by 2.25 to map them to the x-position on the canvas, ensuring smooth and accurate movement. A global variable ‘pos’ is updated and mapped into the x position of the ellipse.

Here is the p5.js code:

let pos = 0;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(pos,200,100,100);
}

function keyPressed() {
  if (key == " ") {
    setUpSerial(); // setting up connection between arduino and p5.js
  }
}

function readSerial(data) {

  if (data != null) {
    let fromArduino = trim(data) + "\n";
    pos = fromArduino/2.25; // to map 0 to 900 in the right range in p5.js (400 by 00) canvas
    writeSerial(sendToArduino);
  }
}

int sensor = A0;

void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  digitalWrite(led, HIGH);
  delay(200);
  digitalWrite(led, LOW);

  // starting 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() {
  digitalWrite(LED_BUILTIN, LOW);
  int sensor = analogRead(A0);
  Serial.println(sensor); // sending sensor information to p5.js
  
}

let ledval = 0;
let input;

function setup() {
  createCanvas(400, 400);
  input = createInput('');
  input.position(120, 100);
}

function draw() {
  background(220);
}

function keyPressed() {
  if (key == " ") {
    setUpSerial(); // setting up connection
  }
}

  if (data != null) {
    let fromArduino = trim(data);
    let sendToArduino = input.value() + "\n";  
    writeSerial(sendToArduino);
  }
}

int led = 3;

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

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

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

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

    int ledVal = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(led, ledVal);
      delay(5);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
  
}

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let floor = false;

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);
  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;
      floor = true; // light up the LED!
    }
  
}

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 == " ") {
    setUpSerial(); // setting up serial connection
  }
  
  if (keyCode==LEFT_ARROW){
    wind.x=-1;
  }
  if (keyCode==RIGHT_ARROW){
    wind.x=1;
  }
  if (key=='s'){ // changed from space to 's' since SPACEBAR is used to initiate serial connection pairing to arduino
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
}

function readSerial(data) {
  if (data != null) {
    let fromArduino = trim(data);
    wind.x = map(fromArduino, 0, 912, -2, 2); // mapping sensor's analog value to ball's wind x axis value

    let sendToArduino = Number(floor) + "\n";
    
    writeSerial(sendToArduino);
    floor = false; // turning off blue LED
  }
}

int sensor = A0;
int led = 3;

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

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

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

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

    int ledVal = Serial.parseInt();
    if (Serial.read() == '\n') {
      digitalWrite(led, ledVal);
      delay(5);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
  int sensor = analogRead(A0);
  Serial.println(sensor);
  
}

My idea is to create a volleyball game that allows users to play against a wall, bouncing the ball in circles to earn points all while trying to keep the ball up off the ground.

The arduino will consist of 6 sensors connected to it, aligned along the edge of the wall on the floor, pointing up and equally spaced. These sensors will detect anytime a ball bounces along the wall above the sensors. Then, there will be a projector behind the player. This will project a p5 sketch with sporadically appearing circles projected on the wall. As the player bounces/passes the ball into the circles, the sensors will detect an input and the player will score the point and make that circle disappear, and a new circle will appear, and so on. The goal is to get the most points in 60 seconds of play. The player is naturally penalized for dropping or losing the ball when they are forced to go and pick it up and return back to continue playing as they are on a timer. The player must stand behind a red tape line I will place a distance from the playing wall surface.

For this project, I wanted to explore create a Disney/Pixar themed  game. I got inspired by the core memories idea in  Inside Out and subway surfers which e which was my favourite game to play growing up and so I decided to design an Inside Out racing game.

The digital game, built in p5.js, represents the mental world of a child’s mind. At first, the user enters his/her core memory and then the race starts. The player dodges Disney villains (representing negative emotions like fear, jealousy, and anxiety) and collects Disney heroes (representing friendship, family, hope, and self-acceptance) as power-ups. As the player progresses, either Joy or Sadness physically moves forward on a real-life race track depending on the player’s choices and collisions. If Sadness wins, a memory ball turns blue. If Joy wins, it glows yellow.

The goal of the game is to protect the player’s game memory and collect as many power ups as possible so that joy wins and the memory ball turns yellow.

How It Works:

The p5.js Game:

The main game interface is a side-scrolling runner similar to Subway Surfers. The player character avoids villains (like Scar, Maleficent, or Ursula) and collects heroes (like Buzz Lightyear, Elsa, and Baymax). Each obstacle or power-up has a symbolic connection to an emotion or social concept:

• Jealousy→ Evil Queen (Snow White)
• Fear→ Randall (Monsters Inc.)
• Anxiety→ Mother Gothel (Tangled)
• Friendship→ Woody and Buzz
• Family→ Elsa and Anna
• Self-doubt→ Forky (Toy Story)
• Memory Loss→ Dory
• Stereotypes→ Judy Hopps and Nick Wilde (Zootopia)

When a villain is hit, Sadness moves closer to the finish line. When a hero is collected, Joy moves ahead.

The game is built using OOP principles and screen transitions, just like in my previous project. Each frame checks for collisions, updates the character’s position, and sends signals via serial communication to the Arduino based on whether Joy or Sadness should move forward.

Arduino:
The physical track features 3D-printed figures of Joy and Sadness mounted on sliding mechanisms (like small carts or servo-driven platforms). The Arduino receives signals from p5.js via serial and moves either character forward in small steps.

At the finish line, each figure holds a translucent memory ball (ping pong ball or resin sphere). Using RGB LEDs, the Arduino lights up the ball:

• Yellow: for Joy (Emotion: Happiness)
• Blue: for Sadness (Emotion: Nostalgia/Grief)

Challenges:

One big challenge I’m still figuring out is how to power the LEDs inside the moving figures.

I’m also still testing how I’ll light up the memory ball when the character reaches the end. It might involve placing a proximity sensor at the finish line, or coding a timer that tracks when one character hits the end point based on movement count

Concept:
For my final project, I want to develop an interactive system which mixes emotional machine learning, environmental sensing, and generative art. The core idea is to create an ambient environment that responds dynamically to human emotions and gestures. Using ML5.js, I aim to analyze real-time inputs like facial expressions (via FaceAPI) or body movements (via PoseNet) from a webcam feed, translating these into evolving light patterns using Arduino-controlled LEDs and abstract visualizations in p5.js.

Challenges:
First, I need to determine how to reliably connect ML5.js (running in a browser) with Arduino, maybe through the WebSerial API, while ensuring real-time synchronization between emotion detection, visualization, and lighting. Latency concerns me, as even minor delays could break the immersive experience. Second, mapping emotional states (e.g., “happy” or “angry”) to artistic outputs feels subjective; I’ll need to experiment with parameter mappings (color, motion, sound).

Reading Response:

I resonate with the reading’s premise that disability design must evolve from mere practicality to an embrace of fashion and artistic expression. This shift not only empowers users but enables them to sculpt their identities—both in how they see themselves and how they are seen by others—through distinctive, personalized devices. Take eyewear as a poignant illustration of this concept: its triumph lies in the diversity of choices, such as an array of frame styles that resonate culturally, enabling individuals to exude confidence rather than embarrassment. In the same vein, Mullins’ prosthetic designs highlight how aesthetics can harmonize with personal flair, bolstering self-worth and enhancing social engagement, much like the way we choose our attire or adorn ourselves with jewelry.

To further this dialogue, I suggest harnessing innovative, interactive design tools like p5.js to create dynamic platforms where users can tailor assistive devices in real-time. By allowing them to select shapes, hues, and materials that echo their personal tastes and lifestyle choices, we align with the reading’s call for user autonomy. This transforms design into a participatory experience where individuals take an active role in shaping the aesthetics and functionality of their devices, akin to selecting outfits that express their unique style. Such tools have the potential to democratize the design process, making it accessible and inclusive while cultivating a culture that celebrates disability as a vibrant expression of individuality.

Moreover, this approach tackles the reading’s concerns about universal design by emphasizing personalized solutions. By incorporating sensor-driven inputs like gesture or voice controls, these platforms can cater to a broad spectrum of abilities, reflecting the user-friendly elegance reminiscent of the iPod interface. This not only fulfills the reading’s vision of design as an act of empowerment but also positions technology as a dynamic intersection of art, fashion, and disability, resulting in devices that are not only functional and beautiful but also deeply personal.

Final Project Preliminary Concept:

My concept combines generative music and art with arduino through a new type of sensor (Heart Rate Sensor). This would connect to the radial artery on the wrist, and the user’s heart rate will be sent to arduino and then through a serial connection to p5.js in real-time. p5.js will have a pre-defined set of musical nodes and visual graphics which will respond to the user’s heart rate, this is effectively a visual data representation of BPM.

The output then is the generative artwork (in synch and contributing to the experimental generated music). The experience would last 2 minutes and the user’s input to change the visuals and music.

I also want to incorporate 3 midi style touch sensors which facilitate the person’s interaction with my project. To make them intuitive , I will place them vertically (left for back, middle for pausing/continuing, right to go forward) which will allow the user to filter through different algorithms of how the musical nodes and visual representations are produced.