USER TESTING:

user_testing

FEED BACK:

At first, creating the game was challenging because I struggled to get the buttons to function the way I wanted them to. Mapping the LED buttons to the gameplay and ensuring they triggered the correct actions was particularly difficult. However, I overcame this by refining the logic for button inputs and testing repeatedly to ensure everything worked as intended. This process required a lot of trial and error, and it was hard to troubleshoot the interactions between the controls and the game logic. Despite the difficulties, resolving these issues was rewarding and helped me improve my understanding of how to create interactions in the game.

During user testing, most users were able to figure out the game easily as the instructions were clear; however, I had to explain to some users that this is a reaction-based game where they need to react to the LED button that lights up and not to focus on the defenders on the screen. While the instructions were effective, a few players needed additional clarification about the LED mapping and corresponding button. Once users understood the concept of reacting to the LED, the gameplay became much smoother. Also, I need to fix a minor issue where when the users press start, the positions of the manequins wouldn’t be where they were supposed to be until a few seconds later, it gets fixed. However, the experience worked well overall, with the audio feedback for scoring and missing enhancing the immersion. The visual design also made the game enjoyable, and the fast-paced gameplay kept users engaged. To improve the experience, I plan to add a more detailed instruction page to eliminate the need for further explanation and slightly increase the reaction time to make the game more accessible for new players. Additionally, I was inspired by the FIFA game and would like to incorporate a shuffled playlist for background music to elevate the experience further and create a more engaging atmosphere.

Finalized Concept for the Project

For my final project, I will create Goal Rush, which is a football reaction game where the player acts as a goalkeeper in a penalty shootout. The goal is to save as many penalty shots as possible by reacting to random signals. The project uses a physical setup with three buttons and corresponding LEDs to simulate the direction of the ball (left, center, or right). Each button press simulates the goalkeeper’s dive to save the ball.

The buttons, LEDs, and game logic are connected to and managed by an Arduino. The Arduino communicates with a p5.js program, which mirrors the physical gameplay with a digital goalpost, goalkeeper, and ball animations. The LEDs light up to signal where the ball is “shot,” and the player must press the corresponding button to save the goal. The correct press sends a signal to p5.js, making the goalkeeper dive in the corresponding direction. If the player reacts too late or presses the wrong button, the ball goes into the net, and a missed goal is recorded.

Arduino Program Design

1. Buttons:
   • Button 1 (Left):
     • Connected to digital pin 2.
     • Represents the goalkeeper diving to the left.
   • Button 2 (Center):
     • Connected to digital pin 3.
     • Represents the goalkeeper staying in the center.
   • Button 3 (Right):
     • Connected to digital pin 4.
     • Represents the goalkeeper diving to the right.

What It Does:
Each button, when pressed, sends a signal to the Arduino. The program identifies which button was pressed and determines if it corresponds to the lit LED.

1. LEDs:
   • LED 1 (Left):
     • Connected to digital pin 5.
     • Lights up to indicate the ball is being “shot” to the left.
   • LED 2 (Center):
     • Connected to digital pin 6.
     • Lights up to indicate the ball is being “shot” to the center.
   • LED 3 (Right):
     • Connected to digital pin 7.
     • Lights up to indicate the ball is being “shot” to the right.

What It Does:
The LEDs are controlled by the Arduino to light up randomly, signaling where the ball is heading. This gives the player a cue for which button to press.

1. Wires:
   • Signal Wires: Connect each button and LED to their respective digital pins on the Arduino to transmit input and output signals.
   • Power Wires: Connect all components to the Arduino’s 5V and GND pins to ensure proper power supply.

Arduino Program Workflow:

1. Random LED activation:
   • The Arduino randomly selects one of the LEDs (left, center, or right) to light up, signaling the ball’s direction.
   • A small delay allows the player time to react.
2. Button Monitoring:
   • The Arduino continuously checks the state of the buttons using digitalRead.
   • If a button is pressed, the Arduino determines whether it matches the lit LED:
     • Match: Sends a success signal (-1, 0, 1 based on the button pressed) to p5.js.
     • Mismatch or No Press: Sends a failure signal to p5.js.
3. Serial Communication:
   • Sends the button state (-1, 0, or 1) and save/miss result to p5.js, where the digital game is updated accordingly.

p5.js Program Design

1. Digital Goalpost:
   • Displays three zones (left, center, right) where the ball can be shot.
2. Digital Goalkeeper:
   • Moves left, center, or right based on data received from Arduino (-1 for left, 0 for center, 1 for right).
3. Ball Animation:
   • A ball is animated to travel toward one of the three zones, matching the lit LED in the physical setup.
4. Scoreboard:
   • Tracks successful saves and missed goals.
5. Game Timer:
   • Limits the game duration and increases difficulty by speeding up the ball animations over time.

p5.js Program Workflow:

1. Input from Arduino:
   • Receives data from Arduino indicating which button was pressed and whether it was correct.
   • Updates the goalkeeper’s position (left, center, or right) based on the button data.
2. Random Shot Generation:
   • Randomly determines the ball’s trajectory (left, center, or right), mirroring the Arduino’s LED activation.
3. Collision Detection:
   • Checks whether the goalkeeper’s position matches the ball’s trajectory when the ball reaches the goal:
     • Match: Displays a save animation and increases the score.
     • Mismatch: Displays a missed goal animation.
4. Visual Outputs:
   • Updates the digital display to show the ball’s movement, the goalkeeper’s dives, and the game’s score and timer.

EXCERCISE 1: ARDUINO TO P5.JS COMMUNICATION

RESULT:

IMG_1537

P5.JS:

CODE (P5.JS):

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

CODE (ARDUINO): https://github.com/aaa10159/IntroToIM/blob/a6dc11112996470e161e0ef812409366ebd219d4/week%2011%20-%20exercise%201

EXCERCISE 2: P5 TO ARDUINO COMMUNICATION

RESULT:

IMG_1541

P5.JS:

CODE (P5.JS):

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.");
  }
}

CODE (ARDUINO):

https://github.com/aaa10159/IntroToIM/blob/64b87caff1ef02ad4c3254acbd5fcd12b89e00f0/exercise%202

EXCERCISE 3: BI-DIRECTIONAL COMMUNICATION

RESULT:

EF08D8F3-8CC4-4F3D-939A-E8996AC8E21A

P5.JS:

CODE (P5.JS):

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

CODE (ARDUINO):

https://github.com/aaa10159/IntroToIM/blob/b181568724f29fd0d2bf9f290ca3b29949e18740/exercise%203

Concept

For my final project, I want to create football inspired reaction game in which the player plays the role of a goalkeeper. The idea is to replicate penalty shootouts, where split second decisions determine whether you save the ball or let it hit the net.

The project draws inspiration from classic arcade games like Whack-a-Mole, where players must react in time to hit the mole. It’s also inspired by the Strike-A-Light reaction game, which emphasizes quick reflexes and precise button presses, and the Interactive T-Wall, which uses a grid-based system to create engaging gameplay. These games inspired me to create something that combines physical action with real-time feedback while adding a personal twist to the football theme.

This project is personal because it combines my passion for football with the technical skills I’ve been learning. By adapting the ideas behind arcade games and combining them with the theme of football, I was able to create something exciting and interactive. The result is a challenging and fun game, capturing the essence of football while incorporating creative design and technical elements.

How It Works

In Goal Rush, the physical setup consists of six buttons arranged in a semi-circle, similar to how a ball might travel to different parts of a goalpost during a penalty kick. Above each button is an LED that lights up to signal where the ball is “shot.” The player, acting as the goalkeeper, must press the corresponding button to make the save. If they react quickly enough and press the right button, the Arduino sends a signal to the p5.js display, where the digital goalkeeper dives to block the ball. The ball goes into the net if the player misses or presses the wrong button.

The p5.js display mirrors the physical setup with a goalpost and a goalkeeper. It shows the outcome of each attempt, whether the shot was saved or scored. The game keeps track of the player’s score, rewarding saves and displaying a missed goal animation for failed attempts. The game starts off at a steady speed but becomes faster as it progresses, challenging the player’s reflexes and ability to stay focused.

The objective is to save as many goals as possible before the timer runs out. The combination of tactile button presses and real-time visual feedback creates an experience that captures the tension and excitement of a penalty shootout.

CONCEPT:

While brainstorming project ideas with Noura, we thought about how a radio works and decided it would be fun to make a simple version ourselves. 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.

HOW IT WORKS:

SETUP:

HIGHIGHT:

The part Noura 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) > debounceDelay) {
    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.

CODE:

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

CONCEPT:

For my project, I’ll be creating a traffic light system. I got the idea for this project while driving, and I thought it would be interesting to implement this concept in my work by creating a sensor that reacts like a traffic light. My goal is to create a system that changes based on a car’s distance from the light, just like real traffic signals. I’ll use an ultrasonic sensor to detect the car’s proximity and control two LEDs: one red and one green.

In my code, I’ll program the red LED to start dim and gradually get brighter as the car gets closer, signaling the car to slow down and stop. When the car reaches a specific point, I’ll use a switch in the code to light up the green LED, showing that it’s safe for the car to proceed. This setup uses the sensor data to adjust the brightness of the red LED, while the switch allows for an easy transition to the green light, creating a basic but effective interactive traffic light system.

SETUP:

VIDEO DEMONSTARTION:

IMG_1442

HIGHLIGHT:

The part of my code I was really proud of was when I filled out the mapping and measuring distance while setting the LED brightness and figuring out a way to debug the code as it kept getting corrupted. This code snippet measures distance using an ultrasonic sensor and adjusts an LED’s brightness based on how close an object is. First, ‘pulseIn(echoPin, HIGH);’ measures the time for a sound wave to travel to an object and return, which I convert to centimeters using ‘int distance = duration * 0.034 / 2;’. I then map this distance to an LED brightness range (0-255): ‘int brightness = map(distance, 0, 100, 255, 0);’, making the LED brighter as the object gets closer. I use ‘Constrain()’ to keep the brightness within the allowed range. Finally, ‘analogWrite sets the LED brightness based on distance, and’ Serial.print() outputs the values in the serial monitor for easy debugging. This part of the code was a struggle as it was something new; however, with a couple of tries, i got it

// Measure the time it takes for the echo to return
long duration = pulseIn(echoPin, HIGH);

// Calculate the distance in centimeters
int distance = duration * 0.034 / 2; // Speed of sound is ~0.034 cm/us

// Map the distance to LED brightness
int brightness = map(distance, 0, 100, 255, 0); // Closer = brighter, max distance = dim
brightness = constrain(brightness, 0, 255);     // Keep brightness within 0-255

// Set the brightness of the distance LED
analogWrite(distanceLedPin, brightness);

// Print switch state, distance, and brightness to the Serial Monitor for debugging
Serial.print("Distance: ");
Serial.print(distance);
Serial.print(" cm, LED Brightness: ");
Serial.println(brightness);

CODE:

arduino file

REFLECTION:

For future improvements, I would like to add a yellow LED to create a full traffic light sequence, transitioning smoothly from red to green, with a yellow warning light in between. I also noticed that the brightness adjustment could be more gradual, so tuning the mapping range would improve the overall responsiveness.

RESOURCES:

https://projecthub.arduino.cc/Isaac100/getting-started-with-the-hc-sr04-ultrasonic-sensor-7cabe1