Month: November 2025

What stood out to me most in this reading is how deeply innovation is tied to the desire to solve a problem. I didn’t read this text as “design theory”  I read it as a reminder of something I’ve always believed: when something doesn’t work for the human body, we don’t stop; we fix it. Disability becomes a spark that pushes design forward, not a limitation that holds it back. This idea felt almost obvious once I saw it in writing. Synthetic legs exist because someone needed to walk. Hearing aids exist because someone needed to hear. Braces exist because someone needed their teeth to function better. When life presents a barrier, our instinct as humans is to invent ways around it. I’ve always been a problem solver by nature, so this perspective resonated with me on a personal level it aligns with the way I already think.

Another part I connected with was the discussion about discretion vs. expression. I honestly never understood why disability-related devices were expected to be “hidden,” made to look like they don’t exist. Glasses used to be seen this way too, and now they’re almost a fashion statement. I love the idea that assistive technologies shouldn’t be things people are ashamed of. If an object was created to make someone’s life easier, why wouldn’t that be something to show proudly? I hope more devices follow the path that glasses took — becoming normal, stylish, and expressive. There’s something beautiful about the idea of a prosthetic leg being carved out of wood like art, or a hearing aid designed like jewelry. These devices are part of someone’s identity, and identity shouldn’t be minimized.

What the text made me think about is how much of our world is actually built on disability innovation without people noticing. A lot of mainstream design only exists because someone once had a challenge that needed solving. Things we take for granted today ergonomic chairs, Velcro, touchscreens, even certain furniture techniques came from disability-driven constraints. I like how the book almost flips the conversation: instead of treating disability as something society has to “cope” with, it becomes a source of creativity and new possibilities.

UAE History Interactive

I want to create an interactive piece that shows the transformation of the UAE the same way my grandpa used to describe it to me. When he talked about his childhood, he always used to say, “Everything was sand… everything was quiet,” and it honestly shocked me how different life was back then. We grow up surrounded by skyscrapers, malls, lights, and busy streets, and sometimes we forget that underneath all of this was once nothing but desert, small fishing villages, and long stretches of empty land. I want this project to make people feel that transition  not just see it.

I’m going to create a set of images using generative AI: first, an empty desert with soft, muted colors, representing the UAE before development. Then, a second stage with small hints of growth, old houses, dhow boats, maybe the beginnings of trade and community. And finally, a fully developed UAE today: bright, modern, busy, full of life. These images will live inside my P5 sketch, and as the user interacts with the physical object, the scene will change smoothly from past to present. It’s almost like time is responding to their touch.

The interaction will come from the Arduino. I want to use one simple input — probably a pressure sensor or something that can “feel” how much the user is pressing. The Arduino will read how soft or strong the touch is, like it’s sensing the user’s curiosity. Light pressure will show the early UAE, the untouched sand dunes. A little more pressure will reveal the beginning of development. And a stronger press will bring the scene into the modern UAE we know now. It’s not about force it’s about guiding the story. The sensor becomes like a storyteller’s tool, the thing that decides which chapter you’re seeing.

I also want the Arduino to do something small in the real world, so it feels alive on both sides. Maybe a soft LED that glows brighter as the UAE “grows,” or a tiny sound from a buzzer that plays a subtle tone when the country reaches the modern stage almost like the present humming with life. But nothing loud, nothing dramatic, just small hints of the past and present waking up.

This whole idea is about honoring heritage and culture through interaction. When my grandpa tells stories, I always feel this warm, emotional contrast between the silence of the old desert and the energy of the city today. I want my project to recreate that feeling the quiet beginning, the slow growth, and the incredible transformation. Not as a history lesson, but as an emotional journey. A way to let people travel through the UAE’s story just by placing their hand on a simple sensor, turning their touch into a timeline. It’s simple, but I want it to feel meaningful.

 

Exercise 1

Reflection:

I built a simple circuit using the Arduino and a 10kΩ potentiometer to control an on-screen ellipse in p5.js. I connected the potentiometer’s outer legs to 5V and GND and the middle leg to the analog pin A0, allowing it to act as a variable voltage divider. After uploading the Arduino code and checking the serial monitor, I could see how turning the knob changed the analog readings from 0 to 1023. This helped me understand how analog sensors translate physical movement into numerical data that can be visualized digitally. It was satisfying to see the system work after troubleshooting my wiring and realizing how the order of connections affects the readings.

Codes:

p5js

// === Arduino + p5.js WebSerial (directional movement, fixed) ===
// Pot controls direction/speed by how its value changes. p5 does NOT control Arduino.

let port;
let reader;
let connectButton;
let isConnected = false;

let latestData = null; // last parsed int from serial (0..1023)
let prevData   = null; // previous sample to compute delta
let lineBuffer = '';   // accumulate serial chunks until '\n'

let posX = 0;          // ellipse position
let speed = 0;         // horizontal velocity

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(240);
  textFont('monospace');

  connectButton = createButton('Connect to Arduino');
  connectButton.position(20, 20);
  connectButton.mousePressed(connectToSerial);

  // start centered; we'll keep it centered until first data arrives
  posX = width / 2;
}

async function connectToSerial() {
  try {
    // Request and open port
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    isConnected = true;
    console.log(' Port opened');

    // Create a text decoder stream and reader for clean line-by-line reads
    const textDecoder = new TextDecoderStream();
    const readableClosed = port.readable.pipeTo(textDecoder.writable);
    reader = textDecoder.readable.getReader();

    // Kick off read loop
    readSerialLines();
  } catch (err) {
    console.error(' Connection failed:', err);
    isConnected = false;
  }
}

async function readSerialLines() {
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) break; // reader released
      if (!value) continue;

      // Accumulate and split by newline
      lineBuffer += value;
      let lines = lineBuffer.split(/\r?\n/);
      lineBuffer = lines.pop(); // save incomplete tail

      for (let line of lines) {
        line = line.trim();
        if (!line) continue;
        const v = parseInt(line, 10);
        if (!Number.isNaN(v)) {
          // Clamp to expected 10-bit range
          latestData = Math.min(Math.max(v, 0), 1023);
          // Initialize prevData on first valid sample
          if (prevData === null) prevData = latestData;
        }
      }
    }
  } catch (err) {
    console.error(' Read error:', err);
  } finally {
    try { reader && reader.releaseLock(); } catch {}
  }
}

function draw() {
  background(240);

  if (!isConnected) {
    fill(200, 0, 0);
    noStroke();
    textAlign(CENTER, CENTER);
    textSize(20);
    text("Click 'Connect to Arduino' to begin", width / 2, height / 2);
    return;
  }

  // If we haven't received any valid data yet, show waiting status
  if (latestData === null || prevData === null) {
    fill(0);
    textSize(16);
    textAlign(LEFT, TOP);
    text('Waiting for data...', 20, 60);
    // Keep ellipse centered until first data arrives
  } else {
    // Change in pot reading determines direction and speed bump
    const delta = latestData - prevData;

    // Deadband to ignore small noise
    const deadband = 4;
    if (delta > deadband) {
      speed = constrain(speed + 0.6, -12, 12); // turn right -> move right
    } else if (delta < -deadband) {
      speed = constrain(speed - 0.6, -12, 12); // turn left -> move left
    } else {
      // friction when knob still
      speed *= 0.90;
    }

    // Integrate position and clamp
    posX += speed;
    posX = constrain(posX, 0, width);

    // Update prev for next frame
    prevData = latestData;
  }

  // Draw ellipse at vertical center
  noStroke();
  fill(50, 100, 255);
  ellipse(posX, height / 2, 80, 80);

  // HUD
  fill(0);
  textSize(14);
  textAlign(LEFT, TOP);
  const shown = latestData === null ? '—' : latestData;
  text(⁠ Sensor: ${shown} ⁠, 20, 60);
  text(⁠ Speed:  ${nf(speed, 1, 2)} ⁠, 20, 80);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Keep position on-screen if you resize smaller
  posX = constrain(posX, 0, width);
}

Arduino IDE

const int potPin = A0;

void setup() {
  Serial.begin(9600);  
}

void loop() {
  int val = analogRead(potPin);   // 0..1023
  Serial.println(val);            
  delay(10);                     
}

Schematic + Board

Exersize 2

Reflection

Reflection on the Schematic and Circuit

For this project, I created both the schematic and the circuit, and I kept them very simple. My setup only included one LED and one resistor connected to the Arduino and grounded. The main purpose of the assignment was to use serial communication with p5.js to control the brightness of the LED, so I focused more on the coding rather than making the hardware complex. Before starting the p5 part, I tested my circuit using a simple Arduino code just to make sure that the LED was lighting up correctly and everything was connected properly. Once I confirmed that it worked, I added the schematic and moved on to the serial communication part. The schematic itself was very basic something I’ve done before so it wasn’t hard to figure out. I liked that I could keep the circuit minimal but still meet the goal of the exercise, which was to control the LED’s brightness through p5. It showed me how even a simple circuit can become interactive and meaningful when combined with code.

Reflection on the Code

The coding part was definitely the hardest and most time-consuming part of this project. I’ve never connected p5.js and Arduino together before, so figuring out how to make them communicate took a lot of trial and error. At first, I kept trying to make it work on Safari without realizing that the serial connection doesn’t actually work there, it only works on Google Chrome. So, I kept rewriting and rechecking my code, thinking there was something wrong with it, even though the logic itself was fine. My professor had already shown us the structure for serial communication, so I kept following it, creating and recreating the same code over and over again, but it just wouldn’t connect.

It got really frustrating at one point because I had everything wired correctly, and my code looked right, but the Arduino and p5 still weren’t talking to each other. I spent a lot of time trying to figure out what was wrong. Once I finally switched to the right browser and saw the serial connection actually working, it was such a relief. The LED started responding, and it felt like everything finally came together. After so many attempts, seeing both the Arduino and p5.js working together perfectly was honestly so rewarding. I was really proud of how it turned out in the end it looked simple but worked exactly how I wanted it to. All that frustration was worth it because the final design turned out really good, and it felt amazing to watch it finally come to life.

Codes

P5js embedded

Arduino IDE

// ===== Arduino: LED brightness  =====

const int ledPin = 10;  // LED connected to pin 10

void setup() {
  Serial.begin(9600);   // must match p5.js baud rate
  pinMode(ledPin, OUTPUT);
}

void loop() {
  if (Serial.available() > 0) {
    int brightness = Serial.read();      // read 0–255
    brightness = constrain(brightness, 0, 255);
    analogWrite(ledPin, brightness);     // control LED brightness
  }
}

Circuit + Schematic

Exersize 3

codes

p5

let velocity;
let gravity;
let position;
let acceleration;
let drag = 0.99;
let mass = 50;

let brightnessValue = 0; // Potentiometer value from Arduino (0–5)
let ballDropped = false;
let ledOn = false;

function setup() {
  createCanvas(640, 360);
  noFill();
  textSize(18);

  position = createVector(width / 2, 0);
  velocity = createVector(0, 0);
  acceleration = createVector(0, 0);
  gravity = createVector(0, 0.5 * mass);
}

function draw() {
  background(255);

  fill(0);
  if (!ballDropped) {
    text("Press D to drop the ball", 20, 30);
    text("Press Space Bar to select Serial Port", 20, 50);
    return;
  }

  if (serialActive) {
    text("Connected", 20, 30);
    text(⁠ Potentiometer: ${brightnessValue} ⁠, 20, 50);
  } else {
    text("Serial Port Not Connected", 20, 30);
  }

  // Gravity only (no wind)
  applyForce(gravity);

  // Update ball
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);

  // Draw ball
  ellipse(position.x, position.y, mass, mass);

  // Bounce
  if (position.y >= height - mass / 2) {
    velocity.y *= -0.9;
    position.y = height - mass / 2;

    // Tell Arduino: turn LED on briefly
    if (serialActive && !ledOn) {
      writeSerial("1,0\n");
      ledOn = true;
    }
  } else if (ledOn) {
    // Tell Arduino: turn LED off
    writeSerial("0,0\n");
    ledOn = false;
  }
}

function applyForce(force) {
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

// Serial setup and drop ball
function keyPressed() {
  if (key == " ") setUpSerial();
  if (key == "D" || key == "d") dropBall();
}

function dropBall() {
  position.set(width / 2, 0);
  velocity.set(0, 0);
  mass = 50;
  gravity = createVector(0, 0.5 * mass);
  ballDropped = true;
}

// Read data from Arduino
function readSerial(data) {
  if (data != null) {
    let fromArduino = split(trim(data), ",");
    if (fromArduino.length === 1) {
      brightnessValue = int(fromArduino[0]); // Potentiometer value
    }
  }
}

Arduino IDE

int potPin = A5;   // Potentiometer
int ledPin = 3;    // LED on PWM pin

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

  // Blink LED to confirm setup
  analogWrite(ledPin, 255);
  delay(200);
  analogWrite(ledPin, 0);
}

void loop() {
  // Read potentiometer (0–1023)
  int raw = analogRead(potPin);

  // Map to PWM range (0–255)
  int brightness = map(raw, 0, 1023, 0, 255);

  // Continuously send brightness value to p5 if you need it
  Serial.println(brightness);

  // Check for serial commands from p5
  if (Serial.available()) {
    String data = Serial.readStringUntil('\n');

    // When ball hits ground → p5 sends "1,0"
    if (data == "1,0") {
      analogWrite(ledPin, brightness);  // flash with pot brightness
      delay(100);
      analogWrite(ledPin, 0);           // turn off after flash
    }
  }

  delay(30); // loop stability
}

Schematic + Circuit

IMG_9469