Author: Noura Alhosani

CONCEPT:

The Punching Bag Game is an interactive project that combines physical activity with a digital arcade experience. The concept revolves around using a punching bag equipped with a sensor to detect punches and display real-time scores. It’s designed to bring the excitement of a classic arcade game into a physical activity, which inspired me in the first place. The game includes features like score tracking, a fuel bar, sound effects, and a visually engaging gamescreen that responds to the user’s actions. The goal is to create an immersive experience where users can engage physically while enjoying a fun and competitive game.

user testing video

Here is where I placed the sensor on the punching bag:

How Does the Implementation Work?

The project integrates hardware (Arduino) and software (p5.js) to create a seamless interactive system:

Hardware (Arduino):

• An ADXL335 accelerometer attached to the punching bag detects the magnitude of punches.
• An arcade button starts and restarts the game.
• The Arduino processes the sensor data and sends it to p5.js as a formatted packet.

Software (p5.js):

• Displays the title screen, instructions, and gameplay.
• Dynamically updates the score, best score, and fuel bar based on incoming data.
• Plays sound effects and animates the punching bag for a realistic experience.

Description of Interaction Design

1. Title Screen

Features:

• • The game title (“The Punching Bag”) in an arcade-style font.
  • An “Instructions” button leads to a detailed instruction page.
  • A prompt directs users to press the arcade button to start the game.

Design Choices:

• • •  I used bold, retro fonts and a simple overall design to mimic an actual arcade game.

2. Gameplay

• User Interaction:
  • Players punch the bag, and the accelerometer calculates the strength.
  • Scores are displayed dynamically, increasing gradually like in classic arcade games.
  • A fuel bar at the bottom fills based on the user’s performance.
  • Sound effects play after each punch.
• Visual Elements:
  • The punching bag vibrates after each punch, mimicking the actual punching bag
  • A restart button allows players to reset the game and try again.

3. Restart Button

• After the game ends, users can press the restart button to reset the game and clear all scores, unlocking the ability to punch again.

Description of Arduino Code

The Arduino is responsible for detecting punches, processing the sensor data, and communicating with p5.js.

How It Works:

1. Punch Detection:
   • The ADXL335 accelerometer calculates the acceleration magnitude of each punch.
   • If the magnitude exceeds a set threshold, it’s mapped to a score value.
2. Data Transmission:
   • The Arduino sends a data packet in the format ,:<value> to p5.js via serial communication.
3. Button Functionality:
   • The arcade button sends a “START” signal to p5.js to initiate gameplay.

void handleAccelerometer() {
  int xRaw = analogRead(xPin);
  int yRaw = analogRead(yPin);
  int zRaw = analogRead(zPin);

  float magnitudeG = calculateMagnitude(xRaw, yRaw, zRaw);

  if (magnitudeG > impactThreshold) {
    int punchValue = map(magnitudeG, impactThreshold, impactThreshold + 10, 0, 2000);
    Serial.print(",:");
    Serial.println(punchValue);
    delay(200);
  }
}

GITHUB

 

Description of p5.js Code

The p5.js sketch displays the visuals and processes incoming data from the Arduino to create a responsive and interactive experience.

Key Features:

1. Dynamic Visuals:
   • Real-time updates to the score and fuel bar.
   • Vibration animation for the punching bag.
2. Audio Feedback:
   • Plays sound effects after each punch.
3. Serial Data Handling:
   • receives incoming data and updates the game state.

function handleSerialData(data) {
  serialBuffer += data; // Add incoming data to the buffer

  // Check for complete packets
  let startMarker = serialBuffer.indexOf("<");
  let endMarker = serialBuffer.indexOf(">");
  if (startMarker !== -1 && endMarker > startMarker) {
    let packet = serialBuffer.substring(startMarker + 1, endMarker); // Extract packet
    serialBuffer = serialBuffer.substring(endMarker + 1); // Remove processed packet

    // Process the packet
    if (packet.startsWith(",:")) {
      let scoreValue = parseInt(packet.substring(2)); // Extract score value
      if (!isNaN(scoreValue)) {
        console.log("Score received:", scoreValue);
        if (!scoreLocked) {
          score = scoreValue;
          fuel = constrain(fuel + scoreValue / 10, 0, 100);
          bestScore = max(bestScore, score);
          scoreLocked = true;
           isVibrating = true; 
        vibrationTimer = 80; 

        // Play punch sound
        if (roundEndSound.isPlaying()) {
         roundEndSound.stop(); 
        }
      roundEndSound.play(); 
        }
      }
    } else if (packet === "START") {
      gameState = "game";
    }
  }
}

 

COMMUNICATION BETWEEN ARDUINO AND P5.JS:

he communication between Arduino and p5.js is essential for the game to function properly, allowing the physical punches on the bag to reflect accurately in the digital interface. When the punching bag is hit, the ADXL335 sensor attached to it measures the force of the punch in terms of acceleration along the x, y, and z axes. The Arduino processes these raw sensor values and calculates the overall magnitude of the punch. If the punch strength exceeds a preset threshold, the Arduino sends a data packet to p5.js in the format ,:<value>, where <value> is the calculated punch strength mapped to a score range which was 2500. In addition to handling the punches, the Arduino also manages the arcade button. When the button is pressed, it sends a “START” command to p5.js. On the title screen, this command transitions the game to the gameplay state, and during gameplay, it acts as a reset function, clearing the scores and unlocking the ability to punch again. On the p5.js side, the sketch listens for incoming data through serial communication. When data is received, it first checks if it matches the  format to avoid any invalid or incomplete packets. Once validated, p5.js takes the score from the data and updates the game elements, such as the score display, fuel bar, and sound effects. To prevent multiple scores from being processed for a single punch, p5.js locks the score after the first valid data packet and ignores any further updates until the game is restarted.

CHALLENGING ASPECTS AND WHAT IM PROUD OF:
Getting the communication between Arduino and p5.js to work was one of the biggest challenges, but I got it to work in the end woohooo!. At first, the Arduino sent multiple data packets for a single punch, causing issues in p5.js, but I fixed this by adding a debounce delay and structuring the data packets. Soldering was also frustrating at first as it was my first time, and the wires kept coming loose. After several attempts, I managed to secure the connections, ensuring the sensor and button worked properly.

AREAS FOR FUTURE IMPROVEMENT:

I believe I could have maybe made the game more interactive by adding different game modes, maybe like a mode where there’s a timer and the user has to keep punching to fill up the fuel bar within that certain time. So in general, adding more features to the game would have been great.

 

IM SHOW

EXCERCISE 1: ARDUINO TO P5.JS COMMUNICATION

RESULT:

TASK 1 VIDEO

P5 CODE:

let sensorValue = 0; // Variable to store sensor data
function setup() {
  createCanvas(640, 480);
  textSize(18);
  if (!serialActive) {
    setUpSerial(); // Start serial communication with Arduino
  }
}
function draw() {
  // Set the background to dark blue and purple hues based on the sensor value
  background(map(sensorValue, 0, 1023, 50, 75), 0, map(sensorValue, 0, 1023, 100, 150));
  // Map the sensor value to control the ellipse's horizontal position
  let ellipseX = map(sensorValue, 0, 1023, 0, width);
  // Draw the ellipse in the middle of the screen
  fill(255); // White ellipse for contrast
  ellipse(ellipseX, height / 2, 50, 50);
  // Display connection status
  fill(255); // White text for readability
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Display the current sensor value
    text("Sensor Value = " + str(sensorValue), 20, 50);
  }
}
function keyPressed() {
  if (key === " ") {
    setUpSerial(); // Start the serial connection when the spacebar is pressed
  }
}
// This function is called by the web-serial library with each new line of data
function readSerial(data) {
  if (data != null) {
    // Parse the sensor value from the Arduino
    sensorValue = int(trim(data));
  }
}

ARDUIN CODE:

int sensorPin = A0; // Sensor connected to A0

void setup() {
  Serial.begin(9600); // Start serial communication
}

void loop() {
  int sensorValue = analogRead(sensorPin); // Read sensor value
  Serial.println(sensorValue); // Send the value to p5.js
  delay(10); // Small delay to avoid overwhelming the serial buffer
}

EXCERCISE 2: P5 TO ARDUINO COMMUNICATION

RESULT:

TASK 2 VIDEO

P5 CODE:

let brightness = 0; // Brightness value to send to Arduino

function setup() {
  createCanvas(640, 480);
  textSize(18);

  // Check if serial is active and set it up if not
  if (!serialActive) {
    setUpSerial(); // Initialize serial communication
  }
}

function draw() {
  background(30); // Dark background
  fill(255); // White text
  text("Use the UP and DOWN arrows to control LED brightness", 20, 30);

  // Display the current brightness value
  text("Brightness: " + brightness, 20, 60);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    // Increase brightness
    brightness = min(brightness + 10, 255); // Max brightness is 255
    sendBrightness();
  } else if (keyCode === DOWN_ARROW) {
    // Decrease brightness
    brightness = max(brightness - 10, 0); // Min brightness is 0
    sendBrightness();
  } else if (key === " ") {
    // Start serial connection when spacebar is pressed
    setUpSerial();
  }
}

function sendBrightness() {
  if (writer) {
    // Send the brightness value to Arduino
    writer.write(brightness + "\n");
  } else {
    console.error("Writer is not available. Please connect to the serial port.");
  }
}

ARDUINO CODE:

int ledPin = 9; // LED connected to PWM pin 9
int brightness = 0; // Variable to store brightness value from p5.js

void setup() {
  Serial.begin(9600); // Start serial communication
  pinMode(ledPin, OUTPUT); // Set LED pin as an output
}

void loop() {
  // Check if data is available to read
  if (Serial.available() > 0) {
    // Read the brightness value sent from p5.js
    brightness = Serial.parseInt();

    // Constrain the brightness value to 0-255
    brightness = constrain(brightness, 0, 255);

    // Set the LED brightness
    analogWrite(ledPin, brightness);
  }
}

EXCERCISE 3: BI-DIRECTIONAL COMMUNICATION

RESULT:
TASK 3 VIDEO

P5 CODE:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let sensorValue = 0; // Variable to store wind value from Arduino
let windStrength = 0; // Wind force determined by the sensor

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);

  // Initialize serial communication
  if (!serialActive) {
    setUpSerial();
  }
}

function draw() {
  background(255);

  // Apply gravity
  applyForce(gravity);

  // Apply wind (continuously updated from sensor)
  wind.x = map(sensorValue, 0, 1023, -2, 2); // Map sensor value to a stronger wind range
  applyForce(wind);

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

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

  // Check for bounce
  if (position.y > height - mass / 2) {
    velocity.y *= -0.9; // A little dampening when hitting the bottom
    position.y = height - mass / 2;

    // Notify Arduino about the bounce
    sendBounce();
  }
}

function applyForce(force) {
  // Newton's 2nd law: F = M * A
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

// Notify Arduino when the ball bounces
function sendBounce() {
  if (writer) {
    writer.write('1\n'); // Send the bounce signal
  }
}

// Read wind control value from Arduino
function readSerial(data) {
  if (data != null) {
    // Parse the sensor value directly into a variable for wind force
    sensorValue = int(trim(data));
  }
}

// Handle serial setup (using the serial.js file)
function keyPressed() {
  if (key === " ") {
    setUpSerial();
  }
}

ARDUINO CODE:

const int ledPin = 9;      // LED connected to pin 9
const int sensorPin = A0;  // Analog sensor for wind control
int sensorValue = 0;       // Variable to store sensor value from analog pin

void setup() {
  Serial.begin(9600);  // Start serial communication
  pinMode(ledPin, OUTPUT);  // Set LED pin as output
}

void loop() {
  // Read the sensor value and send it to p5.js
  sensorValue = analogRead(sensorPin);
  Serial.println(sensorValue);

  // Check if a bounce signal is received
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      // Turn on the LED
      digitalWrite(ledPin, HIGH);
      delay(100);  // Keep the LED on briefly
      digitalWrite(ledPin, LOW);  // Turn off the LED
    }
  }
}

 

In my opinion, this reading challenges the idea that design for disability should only focus on solving problems. The prosthetic designs by Aimee Mullins show that disability can spark bold and exciting ideas, not just practical solutions. I think this mindset is what’s missing in most assistive designs today. Why settle for blending in when design can help people stand out and feel empowered? Similarly, the trend of customizing prosthetic eyes with unique designs—like intricate patterns or bold colors—proves that assistive devices can be about self-expression. These designs don’t try to look like a “normal” eye; instead, they let people proudly showcase their personalities. This is exactly the kind of creativity the design world needs.

The reading also points out a major flaw in how we think about inclusivity in design. Universal design sounds great in theory, but trying to make one product fit everyone often dilutes its purpose. For example, overly adjustable furniture for kids with disabilities can end up alienating them instead of including them. Instead of trying to be “one size fits all,” designers should focus on creating multiple, simple solutions that truly meet the needs of different individuals. This isn’t about making disability invisible—it’s about making design human and the diversity that comes with it.

For my Final project, I am still unsure of what I want to do. However, something came to mind that I think is a cool concept. I want to create an Interactive mood lamp with music integration.  So basically, the lamp changes colors and plays music based on the user’s actions and mood. The project will integrate the Arduino for a sensor-based interaction and P5 for a visual interface. For now I’m thinking of having 3 modes:

1. • Mode 1: Calm (ambient sounds and soft colors).
   • Mode 2: Party (dynamic colors and upbeat music).
   • Mode 3: Focus (single-color light with lo-fi beats).

For the P5 visualization, which I’m still unsure if I’ll keep it this way, I might do a real-time visualization of soundwaves and color patterns that mirrors the lamp’s output on a screen.

A mood lamp for your reference:

mood lamp

For the design im planning to do something similar. I want to input the LEDs from the Arduino inside, like a lamp jar, to give. the aesthetic of the mood lamp, I still need to look into this more and see if there are other ways to do this.

CONCEPT:

While brainstorming project ideas with Amna, we thought about how a radio works and decided it would be fun to make a simple version. Our goal was to create an Arduino “radio” that lets you switch between different songs, similar to tuning a real radio. We used a knob as the channel switch, allowing us to choose between three different songs that we got from Github and the exercises we did in class. Each channel has its own song, and turning the knob instantly switches to the next song, giving it a real radio-like feel. We also added a button that acts as a power switch to turn the radio on and off. This way, pressing the button starts the radio, and pressing it again turns it off. We even added a feature so that any song stops playing immediately when the channel changes, so you don’t have to wait for a song to finish before switching to a new one.

HIGHIGHT:

The part Amna and I are most proud of is getting the button to work smoothly with the debounce feature. At first, the button would trigger multiple times with a single press, turning the radio on and off too quickly. By adding a debounce function, we made sure the button only registers one press at a time, making it much more reliable. A former student in IM (Shereena) helped us understand how debounce works and guided us in fixing this issue, explaining how it makes the button’s response stable and accurate.

Here’s a snippet of the debounce code we used:

// Variables for debounce
int buttonState; // Current state of the button
int lastButtonState = LOW; // Previous state of the button
unsigned long lastDebounceTime = 0; // Last time the button state changed
unsigned long debounceDelay = 50; // Debounce time in milliseconds

void loop() {
int reading = digitalRead(buttonPin);

// Check if the button state has changed
if (reading != lastButtonState) {
lastDebounceTime = millis(); // Reset debounce timer
}

// If enough time has passed, check if the button is pressed
if ((millis() - lastDebounceTime) > de

bounceDelay) {
if (reading != buttonState) {
buttonState = reading;
if (buttonState == HIGH) {
radioState = !radioState; // Toggle radio on/off
}
}
}

lastButtonState = reading;
}

 

This debounce function prevents accidental multiple triggers, making the button interaction smoother. We’re also proud of how the radio switches songs instantly when we turn the knob, making it feel real.

REFLECTION:

Working on this project with Noura was a nice experience, as we got to share our thoughts and class experience by working together. One of our main struggles was making the button work without triggering multiple times, which led us to use debounce for stability. While adding Debounce solved the problem, in the future, we’d like to explore other ways to troubleshoot and fix issues like this without relying on debugging alone.

For future improvements, we’d like to add more interactive features, such as volume control with an additional knob and possibly a small speaker for clearer sound. We could also include more “channels” with various songs or sound effects, giving users a richer experience. Another idea is to add an LED indicator that lights up when the radio is on and changes brightness with volume, making the design even more engaging. These changes would make our project more realistic for a radio and enhance.

How it works:

CODE:

https://github.com/nouraalhosani/Intro-to-IM/blob/426c7d58639035c7822a4508f2e62dab34db0695/Radio.ino

This rant on “Pictures Under Glass” made me realize how strange it is that we’re so comfortable reducing our interactions to something as flat and lifeless as a touchscreen. We have our hands (the most useful body part), and yet we limit them to swiping and tapping like we’re settling for the simplest form of interaction possible. It’s almost like we’re choosing numbness over true engagement, relying on a screen instead of exploring the world with our hands.

To me, this flat, touch-only future ignores a huge part of being human. While reading, I thought about how much richer experiences are when you can actually feel things. Imagine the difference between seeing a piece of pottery on a screen versus shaping it yourself. It’s a completely immersive experience that teaches you in ways a screen never could. If tech continues down this path, I feel like we’re just training ourselves to be satisfied with empty interactions that don’t ask much of us.

Furthermore, I think relying so heavily on screens is what’s making us lazy; it feels like we’re choosing convenience over truly connecting with the world. Screens limit how we explore and interact, reducing everything to a simple swipe or tap. Technology should be enhancing our natural abilities, not shrinking them down to one basic motion.

Moreover, the push for brain-computer interfaces is even worse. It takes away the real, physical experiences that make life interesting. Instead of cutting out physical interaction, I believe tech should work with our bodies, such as the Wii console or the VR, helping us connect in more meaningful, hands-on ways.

Reading Tom Igoe’s ideas in “Making Interactive Art: Set the Stage, Then Shut Up and Listen” and “Physical Computing’s Greatest Hits (and Misses)” really clicked for me, especially after experiencing “Luminous Play” by Carsten Höller at Manarat Saadiyat in Abu Dhabi, which was in 2023. Igoe’s whole perspective on stepping back and letting the audience shape their own experience feels like it could have been written about Höller’s work. The exhibition is basically a playground of light, where the audience can wander, touch, and interact with installations in a way that feels completely open to interpretation.

In the Luminous Play exhibition, you are surrounded by all these moving, colorful light displays, and there are no set directions or explanations. You just go in and feel free to explore anything you want, including standing back and seeing the patterns or walking about to see how the light changes with your movement. The whole thing allows you to experience it in your own way, and you find yourself creating your meaning from the interaction. It’s a perfect example of Igoe’s point: sometimes, the most powerful art is when the artist just sets up the space and then “shuts up,” letting the audience take over.

Moreover, both readings reminded me that, as creators, we don’t always have to control every detail or push others to see things from a specific perspective. It’s enough to create an environment that allows individuals to discover at their own pace and leave it for the audience to interpret it whichever way. Igoe’s emphasis on simplicity and openness shows us to focus less on trying to be “original” and more on creating experiences that invite others to take part. It allows everyone who interacts with the work to complete it and makes the art itself feel more alive and human.

 

CONCEPT:

For this assignment, I created an object detector using my shoes as the trigger by using the ultrasonic sensor for detection. When my shoes are within a specific range (within 20 cm), the red LED lights up, indicating that the object is close. As for the switch, it’s really simple,—an off and on switch to turn on the blue LED.

The area I’m most proud of:

Setting up the ultrasonic sensor to accurately detect when my shoes were within range wasn’t hard after all, but I didn’t realize I had to set like an accurate range because at first I set it high and it wouldn’t detect the objects accurately; it would just light up. I thought there was an error in the code or the wiring itself, but when I changed the threshold to a small number, meaning the objects had to be closer, it was more accurate. So the light lit up when my shoes were in the right spot.

Reflection:

Honestly, I received a lot of help from Amna, as at first I tried using the LDR, but I couldn’t get it right even watching YouTube videos. I still didn’t figure out where I went wrong, so hopefully I get to understand that more. Hence why I changed and used the Ultrasonic; as Amna understood it, she explained it to me, and I gave it my own twist.

 

https://github.com/nouraalhosani/Intro-to-IM/blob/c4c8dde35515a6d5f9771a0c6b308841baaeb59b/Sensor.ino

The video: (I forgot to record the switch but I promise it works!)

set up