Category: S2026 – Aya

Concept

This project is a fast reaction game where the user controls a spacecraft without seeing the controls directly. The screen gives instructions like “press red, “flip switch,” or actions using Arduino sensors like “cover the light sensor” or”move closer.” The user has to read the command and quickly do the action on a physical console. It’s timed, so you need to react fast and accurately I might add more elements like once you get over 10 points youll have to start memorizing three tasks at the same time or have new rules added. If you’re right, the game continues, and if not, you lose. The idea is to make simple actions feel intense and engaging using both physical controls and sensor based interaction.

How it uses Arduino

Arduino handles all the physical interaction. It reads inputs from buttons, a switch, a knob, and sensors like a light or distance sensor. For example, if the user presses a button or covers the light sensor, Arduino detects that and sends the data to p5. It also controls LEDs to give feedback, like turning on a light when the user is correct.

How it uses p5.js

p5 is the visual and logic part of the project. It shows instructions on the screen like “PRESS RED” or “MOVE CLOSER.” It randomizes the commands so the game changes every time its still early on on the project so I might hav ethe commands show on screen or on an actual screen next to the control panel or both i’ll decide on which to go with on both depending on what works best. It also checks if the user did the correct action and controls the flow of the game, like score, timing, and game over. It can also send signals back to Arduino for feedback.

Interaction Design

The system works in a loop. First, the screen shows a command. Then the user reacts using the console or sensors. Arduino reads that input and sends it to p5. p5 checks if it’s correct and responds with the next step or a fail. This repeats quickly, so the user is always reacting and the system is always responding.

Inspiration and Originality

This idea is inspired by Bop It, where you follow quick commands like “twist it” or “Spin It” I liked how simple actions become intense when you have to react fast. It’s also inspired by Project Hail Mary, especially the scene where the character is pressing buttons and flipping switches to control the spacecraft under pressure. My project builds on this by adding different sensors, like light and motion, so the interaction is more varied and not just buttons.

Visual and Aesthetic Direction

The visuals will be simple and slightly retro, like an old spacecraft system. The screen will have big, clear text so the user can quickly read what to do. I won’t focus on complex graphics, just clean visuals that support fast interaction and make the game feel intense.

Why this project works

This project works because it combines physical interaction with fast response. The user is actively doing actions, not just watching. It uses Arduino for sensing and p5 for visuals and logic, so both are important. It also gives clear feedback and keeps the user engaged through speed and randomness.

Generated sketch :

 

Examples and tutorials found:

https://www.instructables.com/The-Task-Giving-Arduino-Machine-aka-Making-Your-Ow/

https://projecthub.arduino.cc/Jerepondumie/make-an-arduino-memory-game-c9c093

Exercise 1

Arduino GitHub File

Arduino Set-up:

Arduino Illustration:

Project Demo:

Exercise 2

Arduino GitHub File

Arduino Set-up:

 

Arduino Illustration:

Project Demo:

 

Exercise 3

Arduino GitHub File

Arduino Set-up:

Arduino Illustration:

Project Demo:

Concept

This week was all about making things communicate. Before this, everything we made stayed inside Arduino. This time, we connected Arduino to p5 so the physical and digital sides could talk to each other.

At first it sounded simple, but it ended up being one of the hardest things we’ve done so far. Not because of the ideas, but because getting everything to connect properly took a lot of trial and error.

Exercises

Across the three exercises, we explored different ways of communication.

In the first exercise, we sent data from Arduino to p5. We used the potentiometer to move a circle across the screen. This helped us understand how sensor values can control something visually.

In the second exercise, we reversed the direction. p5 controlled the LED on Arduino. This made us realize that communication goes both ways, and that sending data is just as important as receiving it.

In the third exercise, we combined both directions. The potentiometer controlled movement in p5, and when something happened on the screen, it sent a signal back to Arduino to turn on the LED. This was the most interesting part because everything was connected and reacting together.

Code Highlight

One part that really helped us was reading the sensor data correctly in p5

let str = port.readUntil("\n");

if (str.length > 0) {
  str = trim(str);
  let sensorValue = int(str);

  if (!isNaN(sensorValue)) {
    x = map(sensorValue, 0, 255, 0, width);
  }
}

 

This made sure we only used valid data and mapped it properly to the screen. Once this worked, everything became much smoother.

Problems Encountered

We had a lot of issues this week, mostly with the connection. The serial port wouldn’t open, or p5 wouldn’t receive any values. Sometimes things worked and then suddenly stopped working again.

We realized most of these problems were small things, like forgetting to close the Serial Monitor or not formatting the data correctly.

Reflection

This week helped us understand that interaction is not just about building something, but about connecting things together. Once the connection worked, everything felt more interactive and responsive.

It also made us more patient with debugging. We learned to check things step by step instead of assuming something bigger was wrong.

Collaboration

We worked on this together, which made a big difference. When one of us got stuck, the other could help figure out what went wrong. It also made debugging less frustrating because we weren’t trying to solve everything alone.

Working together helped us understand the system better and move forward faster.

References

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js and Arduino serial communication – Send a digital sensor to a p5.js sketchYouTube · Scott Fitzgerald28 Mar 2020

This reading shifted my understanding of accessible design by challenging my assumption that discretion is the ultimate goal when designing for disabilities. Previously, I always believed that successful medical devices were those that blended in, much like the “pink plastic” hearing aids the author talks about. However, the text highlights how prioritizing invisibility subtly reinforces a culture of shame. Understandably so, a lot of the texts I read during my first year writing seminar talked about how invisibility can be used to have power over certain groups of people or take away power from such groups, although not exactly the same, the negative connotation is there even with disability. I was particularly struck by the discussion of Aimee Mullin’s intricately carved wooden prosthetic legs. It led me to the realization that when designers move beyond mere clinical problem-solving, they allow users to project a bold, positive image. By treating prostheses as a canvas for self-expression rather than deficit to conceal, design becomes an empowering tool.

A pretty popular design I can think of that follows the author principles is Nike’s FlyEase sneaker line. It was originally engineered to help people with mobility disabilities put on shoes hand-free. Because the design is sleek and fashionable, it became a mainstream success desired by the public. It makes me wonder, if fashion and visibility are so crucial to de-stigmatizing disability, how do we convince competitive consumer markets to prioritize aesthetic investment in specialized products without commodifying the disability itself?

Exercise 1:

Demo:

Schematic:

Implementation:

I used an ultrasound sensor for this exercise, so the ellipse moves depending on how close or far my hand is from the sensor.

void loop() {
  // Trigger the sensor
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  // Measure the bounce back time
  long duration = pulseIn(echoPin, HIGH);
  
  // Calculate distance
  int distance = duration * 0.034 / 2;

  // Send just the number to p5.js
  Serial.println(distance); 

  delay(50);
}

The code for using the sensor is pretty standard, trigger it so often, measure the duration using the formula (speed * time), and then send that to p5js.

Speed is the speed of sound (0.034 cm per microsecond) and time is duration / 2 since it is a round trip.

// Read from serial
    let str = port.readUntil("\n");
    if (str.length > 0) {
      let val = int(str);
      // Validate value
      if (!isNaN(val)) {
        sensorValue = val;
      }
    }


    // Map the value
    let xPos = map(sensorValue, 5, 50, 0, width);
    // Constrain the ellipse to canvas
    xPos = constrain(xPos, 0, width);

    fill(0, 255, 200);
    noStroke();
    ellipse(xPos, height / 2, 50, 50);

From p5js side, we take the value, validate it, then create a mapping of the value to x position as well as constraining it, then finally draw the ellipse.

Exercise 2:

Demo:

Schematic:

Implementation:

In p5js, I have 3 sliders, 1 for R, 1 for G, and 1 for B, I am using an RGB LED, so we can switch around the sliders to get our custom color from the LED.

// Read the three integers sent from p5.js
// parseInt() looks for digits and skips non-digits
int r = Serial.parseInt();
int g = Serial.parseInt();
int b = Serial.parseInt();

// Look for the newline character to confirm the end of the message
if (Serial.read() == '\n') {
  // Apply the brightness to each pin
  analogWrite(redPin, r);
  analogWrite(greenPin, g);
  analogWrite(bluePin, b);

On the Arduino side the code is pretty simple, just read each color and write it to the LED.

// Send to Arduino
port.write(r + "," + g + "," + b + "\n");

This is really what’s doing the work, it takes the values from the slider and sends them to the Arduino in such a format that it could read it easily.

Exercise 3:

Demo:

Schematic:

Implementation:

I copied the basic implementation of the wind mechanics from the code, however instead of left and right buttons, I switched out with a potentiometer:

let windForce = map(sensorValue, 0, 1023, -0.5, 0.5);

I have 2 RGB LED’s, and each light up depending on what side of the “wall” the ball hits.

// Left Wall
if (position.x < mass/2) {
velocity.x *= -0.9;
position.x = mass/2;
sendColor("L");
}
// Right Wall
if (position.x > width - mass/2) {
velocity.x *= -0.9;
position.x = width - mass/2;
sendColor("R");
}

The code to send the colors itself to the Arduino is:

// Sending color + direction
function sendColor(side) {
  if (port.opened()) {
    let r = floor(random(255));
    let g = floor(random(255));
    let b = floor(random(255));
    // Sending: Side,R,G,B (e.g., "L,255,0,0")
    port.write(side + "," + r + "," + g + "," + b + "\n");
  }
}

We create a random number for each color and then send it to the Arduino along with the direction.

if (side == 'L' || side == 'R') {
  Serial.read(); // Skip the comma
  int r = Serial.parseInt();
  int g = Serial.parseInt();
  int b = Serial.parseInt();

  if (side == 'L') {
    flash(L_red, L_green, L_blue, r, g, b);
  } else {
    flash(R_red, R_green, R_blue, r, g, b);
  }
}

From the Arduino side, we read the colors like how we read it in exercise 2, then depending on the side we light up the left or right side.

P5js code

GitHub Code

Exercise 1

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise1

Arduino Set-up:

Arduino Illustration:

Project Demo:

Exercise 2

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise2

Arduino Set-up:

 

Arduino Illustration:

Project Demo:

Exercise 3

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise2

Arduino Set-up:

Arduino Illustration:

Project Demo:

Concept

This week was all about making things communicate. Before this, everything we made stayed inside Arduino. This time, we connected Arduino to p5 so the physical and digital sides could talk to each other.

At first it sounded simple, but it ended up being one of the hardest things we’ve done so far. Not because of the ideas, but because getting everything to connect properly took a lot of trial and error.

Exercises

Across the three exercises, we explored different ways of communication.

In the first exercise, we sent data from Arduino to p5. We used the potentiometer to move a circle across the screen. This helped us understand how sensor values can control something visually.

In the second exercise, we reversed the direction. p5 controlled the LED on Arduino. This made us realize that communication goes both ways, and that sending data is just as important as receiving it.

In the third exercise, we combined both directions. The potentiometer controlled movement in p5, and when something happened on the screen, it sent a signal back to Arduino to turn on the LED. This was the most interesting part because everything was connected and reacting together.

Code Highlight

One part that really helped us was reading the sensor data correctly in p5

let str = port.readUntil("\n");

if (str.length > 0) {

  str = trim(str);

  let sensorValue = int(str);

  if (!isNaN(sensorValue)) {

    x = map(sensorValue, 0, 255, 0, width);

  }

}

This made sure we only used valid data and mapped it properly to the screen. Once this worked, everything became much smoother.

Problems Encountered

We had a lot of issues this week, mostly with the connection. The serial port wouldn’t open, or p5 wouldn’t receive any values. Sometimes things worked and then suddenly stopped working again.

We realized most of these problems were small things, like forgetting to close the Serial Monitor or not formatting the data correctly.

Reflection

This week helped us understand that interaction is not just about building something, but about connecting things together. Once the connection worked, everything felt more interactive and responsive.

It also made us more patient with debugging. We learned to check things step by step instead of assuming something bigger was wrong.

Collaboration

We worked on this together, which made a big difference. When one of us got stuck, the other could help figure out what went wrong. It also made debugging less frustrating because we weren’t trying to solve everything alone.

Working together helped us understand the system better and move forward faster.

References

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js and Arduino serial communication – Send a digital sensor to a p5.js sketchYouTube · Scott Fitzgerald28 Mar 2020

Driving Game with a Physical Steering Wheel (Steering Beyond the Keyboard)

For my final project, I want to create a simple driving game that is controlled using a real steering wheel instead of a keyboard. The idea is to change how we normally interact with games. Instead of pressing keys, the user will physically turn a steering wheel to control the car on the screen. I am interested in how this makes the experience feel more natural and more connected to the body.

I will be using an actual steering wheel that I can buy online and then connecting it to my Arduino setup. The steering wheel will be attached to a potentiometer so that when it rotates, the Arduino can read the change in position. This value will then be sent to p5.js using serial communication. I will also include a button that can be used to start or reset the game.

On the p5.js side, I will build a simple driving game. The player will control a car that can move left and right across the screen while the road moves forward. Obstacles will appear, and the player has to steer to avoid them. The position of the car will be directly linked to how much the steering wheel is turned, so the movement should feel smooth and responsive. I plan to include basic features like a score counter, a crash state, and a reset option.

The main focus of this project is not just the game itself, but the interaction. I want the system to feel clear and easy to understand. When the user turns the wheel, the car should immediately respond on the screen. This direct connection between input and output is important. It should feel like the user is actually controlling the movement in a physical way, not just pressing buttons.

I also want to make the setup look clean and intentional. I will build a simple base to hold the steering wheel and hide the wires. This will help the project feel more like a complete system rather than just loose components. I may also add small details like labels or lights to make the interaction clearer.

For inspiration, I looked at projects that use unconventional controllers and turn the interface into part of the experience. I also looked at previous student projects where the interaction was very clear and immediate. Those projects showed that even simple inputs can feel impressive if the response is well designed and easy to understand.

To build this, I will use basic Arduino tutorials for reading a potentiometer and sending data through serial communication. For p5.js, I will use examples that show how to read serial data and map values to movement on the screen. These will help me create a stable system before I focus on improving the visuals and overall experience.

Overall, this project is about making a simple but effective interactive system. By using a real steering wheel, I want to create a more engaging and physical way to play a digital game. The final result should feel responsive, intuitive, and easy for anyone to try without needing instructions.

The Design Meets Disability reading made me rethink how I usually see design, because I realized I tend to treat accessibility as something separate from “good design,” like something added later to fix a problem instead of something considered from the start. Pullin challenges that idea by showing how assistive devices often aim to hide disability or make someone appear more “normal,” and I found myself questioning why that feels like the default goal. When I think about it, that approach says more about what society is comfortable with than what people need or want, and I had not really noticed how strong that assumption is until now.

What stayed with me is his focus on expression, because he suggests that assistive design does not have to disappear or blend in, it can reflect identity in a visible way, and that shift feels important. When I think about prosthetics designed to look exactly like a natural limb, I see how design tries to erase difference, but when I picture a prosthetic designed with color or shape or style, it changes the meaning of the object completely. It becomes something personal instead of something corrective. That made me realize how much design controls what gets seen as normal, and how easy it is to follow that without questioning it.

After reading this, I feel more aware of how I approach design decisions, even in small ways, because I see how choices about form, appearance, and function are never neutral. If you design for one type of user, you set a standard that excludes others without saying it directly, and I think that is what I will carry forward from this reading. I need to think about who is included from the beginning, not after, and I need to question why certain designs try so hard to hide difference instead of allowing it to exist openly.

The author claims that the strive toward the “discreetness” of medical devices enforces a stigma around them, sending a message that needing these devices is shameful. However, while the primary purpose of these devices is functional, on a social level, many people of determination who wear them simply want to feel included and navigate the world without drawing unwanted attention. While I certainly do not condone making people of determination feel left out, and I believe that eliminating stigma starts with changing society’s mindset rather than hiding a disability, I am also realistic. It is extremely difficult to change societal behavior and opinions overnight. Therefore, it can be highly beneficial to create devices that are discreet. Providing these options is ultimately about offering choice: it caters to those who prefer not to draw attention to themselves. Realistically, many people face intense social pressure and would rather blend in than stand out. Years down the line, I hope all medical devices can achieve a destigmatized success story like eyewear, where users have the agency to be as bold or as subtle as they wish. In the meantime, however, making discreet devices is not necessarily a negative thing; it is a necessary accommodation for the social realities people currently face.

One idea that stuck with me even after the reading is that eyewear is a space where fashion and disability overlap. The text explains how glasses are no longer seen only as medical tools but also as items people wear to express themselves. This connects to my own experience. When I was younger, I saw my friend’s glasses as more of a fashion statement than something related to vision problems. I would even try them on because I thought they looked good on me. At that time, I didn’t really understand the difference between graded glasses and fashion glasses since they looked similar and came in many styles and colors. It was only later, when I developed farsightedness myself, that I realized their actual purpose. Looking back, I see that my experience reflects what the text describes, that glasses can function both as a medical tool and as a form of self-expression. I also noticed that, as mentioned in the reading, glasses are often visible and even desired, unlike many assistive devices that are designed to be hidden. This shows how eyewear challenges the idea that disability-related products should always be discreet.

On the other hand, I liked how the author pointed out that invisibility is not always the best approach for disability design. Instead of hiding, creating a positive and confident image can change how people see disability. This made me think that trying to make assistive devices invisible can make them seem like something to be embarrassed about. This also made me realize that design doesn’t just solve a problem, it also affects how people feel about themselves and how they are seen by others. A good example of this from the text is Aimee Mullins, who embraces her prosthetic legs and uses them to express herself, similar to how people choose different outfits. Through this example, I realized that design for disability goes beyond just function. It also plays an important role in someone’s confidence, identity, and how people choose to express themselves.

One idea that really stood out to me from Design Meets Disability was the concept of the “golden hand,” especially in the contrast between traditional prosthetics and more expressive designs like Jacques Monestier’s.

What I found interesting is how this shifts prosthetics from something purely functional into something aesthetic and personal. It shows that design doesn’t have to choose between function and beauty it can combine both. As someone with a background in art, this made me think about how designers can transform assistive devices into something meaningful, almost like a canvas for self expression rather than just a medical tool.

Another thing that stood out to me was how the reading emphasizes that artists bring a different perspective to engineering. They focus not just on how something works, but on how it feels and what it represents. This made me reflect on our current Arduino project, where it’s easy to focus only on the technical side, but there’s also potential to incorporate materials and design to make it more visually and personally expressive. The reading also highlights that these designs shouldn’t just be treated as objects, but as personal belongings especially in the case of prosthetics, which are part of someone’s identity. That idea really shifted my thinking, because it suggests design should allow for individuality and expression, rather than trying to hide difference.