Author: Maryam Emaan Fiyaz

Concept 

An interactive game that combines physical hardware inputs with digital visuals to create a fun, engaging experience. The objective of the game is to catch falling fruits of different colors into a basket by pressing the corresponding colored buttons. Each button plays a musical note, adding an auditory layer of feedback to the gameplay. The speed of the falling fruits increases as the game progresses, making it more challenging. Players have three lives, and the game tracks both the current score and the highest score achieved, fostering a sense of competition.

Inspiration 

The concept is inspired by classic arcade-style games like “Fruit Ninja” and “Tetris,” which involve quick reflexes and colorful visuals. I wanted to create a game that not only challenges the player’s reaction time but also provides a multisensory experience by integrating music and physical interaction. The picnic theme stems from the cheerful idea of catching fruits for a basket, evoking a sense of fun and lightheartedness. The addition of musical notes tied to the button presses makes the game playful and unique, while the increasing difficulty ensures sustained engagement.

Implementation Plan 

Hardware:

1. Arduino Components:
   • Four colored buttons: Each button corresponds to a fruit color (e.g., red for apples, yellow for bananas).
   • A piezo buzzer or speaker: Plays a unique note when a button is pressed, creating a musical effect.
2. Connections:
   • Each button will be connected to a specific digital pin on the Arduino.
   • A buzzer will also be connected to a pin to generate sounds.
3. Power Supply: A USB cable will power the Arduino during gameplay.

Software:

1. Arduino Code:
   • The buttons will detect user input and send signals to the p5.js sketch via serial communication.
   • Debounce logic will be implemented to prevent multiple readings from a single press.

1. p5.js Sketch:
   • Fruit Animation:
     • Fruits of various colors will fall from random positions at the top of the screen toward a basket at the bottom.
     • The basket will automatically “catch” fruits when the correct button is pressed.
   • Game Logic:
     • The player scores points for catching fruits correctly.
     • Missing a fruit or pressing the wrong button reduces a life.
     • The game ends when the player loses all three lives.
   • Difficulty:
     • The speed of the fruits will gradually increase to challenge the player as the game progresses.
   • Scoreboard:
     • A live scoreboard will display the current score and the highest score achieved.

Interaction 

• User Inputs: The player uses physical buttons to interact with the game, linking the tactile experience of pressing buttons with the visual and auditory feedback.
• Feedback Mechanisms:
  • Musical notes for correct actions.
  • On-screen effects for catching or missing fruits.
  • A real-time display of lives and scores for progress tracking

Graham Pullin’s Design Meets Disability is an insightful exploration of how design can transcend functionality to create assistive technologies that are inclusive, aesthetically appealing, and empowering for individuals with disabilities. Pullin’s central argument—that assistive devices should prioritize both usability and desirability—challenges conventional approaches that often view disability through a purely medical or technical lens.

What stood out most to me was Pullin’s emphasis on collaboration between designers and users. This participatory approach ensures that devices are not only practical but also reflective of personal identity and style. For instance, the idea of prosthetic limbs being treated as fashion statements rather than something to be concealed feels revolutionary, turning potential stigma into an opportunity for self-expression.

Pullin also highlights a broader societal impact: designing with disability in mind benefits everyone, not just individuals with disabilities. This aligns with the concept of universal design, where solutions developed for specific needs often lead to innovations applicable to all.

The reading left me questioning why more industries don’t adopt this approach. It’s a reminder that inclusive design is not just a moral imperative but a creative opportunity to enrich lives and push the boundaries of innovation.

The following are the p5 codes and the Arduino code for the  exercises that we had done in class. I have used a potentiometer as my sensor.

Exercise 1 :
P5 Code

let serial;
let xPos = 0;

function setup() {
  createCanvas(800, 400);

  // Initialize serial
  serial = new p5.WebSerial();
  serial.open(); // Opens serial connection

  // Listen for incoming data
  serial.on("data", serialEvent);
}

function draw() {
  background(220);
  ellipse(xPos, height / 2, 50, 50);
}

function serialEvent() {
  let data = serial.readLine(); // Read data from Arduino
  if (data.length > 0) {
    xPos = map(Number(data), 0, 1023, 0, width); // Map sensor value to canvas width
  }
}

Arduino Code

int potPin = A0;

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

void loop() {
  int potValue = analogRead(potPin);
  Serial.println(potValue); // Send value to p5.js
  delay(10);
}

Exercise 2:
P5 Code

let serial;
let brightness = 0;

function setup() {
  createCanvas(400, 200);

  // Initialize serial
  serial = new p5.WebSerial();
  serial.open(); // Opens serial connection
}

function draw() {
  background(220);
  brightness = map(mouseX, 0, width, 0, 255); // Map mouse position to brightness
  serial.write(brightness + "\n"); // Send brightness to Arduino
  fill(0);
  text("Brightness: " + brightness, 10, 20);
}

Arduino Code

int ledPin = 9;

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

void loop() {
  if (Serial.available() > 0) {
    int brightness = Serial.parseInt();
    analogWrite(ledPin, brightness); // Set LED brightness
  }
}

Exercise 3:
P5 Code

let serial;
let balls = [];
let wind = 0;

function setup() {
  createCanvas(400, 400);
  serial = new p5.WebSerial();
  serial.open();

  // Initialize balls
  for (let i = 0; i < 10; i++) {
    balls.push(new Ball(random(width), random(height / 2)));
  }

  serial.on("data", serialEvent);
}

function draw() {
  background(220);
  for (let ball of balls) {
    ball.applyForce(createVector(wind, 0.1)); // Apply wind
    ball.update();
    ball.display();
    if (ball.isBouncing()) {
      serial.write("bounce\n"); // Send bounce signal to Arduino
    }
  }
}

function serialEvent() {
  let data = serial.readLine();
  if (data.length > 0) {
    wind = map(Number(data), 0, 1023, -0.2, 0.2); // Map sensor value to wind
  }
}

class Ball {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.r = 10;
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0, 0);

    // Check for bounce
    if (this.pos.y > height - this.r) {
      this.pos.y = height - this.r;
      this.vel.y *= -0.8; // Reverse and reduce velocity
    }
  }

  display() {
    ellipse(this.pos.x, this.pos.y, this.r * 2);
  }

  isBouncing() {
    return this.pos.y >= height - this.r;
  }
}

Arduino Code

int sensorPin = A0;
int ledPin = 13;

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

void loop() {
  int sensorValue = analogRead(sensorPin);
  Serial.println(sensorValue); // Send sensor value to p5.js

  // Toggle LED for bounce feedback
  digitalWrite(ledPin, HIGH);
  delay(100);
  digitalWrite(ledPin, LOW);
}

 

 

Bret Victor’s “A Brief Rant on the Future of Interaction Design” and its follow-up article present an interesting, if not particularly deep, critique of current interaction design trends. Victor’s main argument focuses on the limitations of “Pictures Under Glass” – flat touchscreen interfaces that dominate modern technology. He contends these interfaces fail to fully utilize our hands’ tactile capabilities, which are adept at feeling and manipulating objects.While not groundbreaking, Victor’s observation challenges us to think beyond the status quo of interaction design. He makes a valid point about prioritizing tactile feedback in future interfaces, arguing that our sense of touch is fundamental to how we interact with the world.Victor calls for more research into tangible interfaces, dynamic materials, and haptics, suggesting that truly revolutionary interfaces will come from long-term research efforts rather than incremental improvements to existing technology. This emphasis on pushing boundaries through research is noteworthy, even if not explored in great depth.The follow-up responses highlight that while devices like the iPad are revolutionary, they shouldn’t be the end goal of interface design. They also suggest that dynamic tactile mediums capable of physically representing almost anything are a worthy aspiration for future interfaces.Overall, Victor’s message prompts us to consider the full range of human sensory capabilities in developing new interaction models, encouraging us to imagine more intuitive and expressive interfaces.

Concept

Our project, Ibrahim and I, “Echoes of Light,” emerged from a shared interest in using technology to create expressive, interactive experiences. Inspired by the way sound changes with distance, we aimed to build a musical instrument that would react naturally to light and proximity. By combining a photoresistor and distance sensor, we crafted an instrument that lets users shape sound through simple gestures, turning basic interactions into an engaging sound experience. This project was not only a creative exploration but also a chance for us to refine our Arduino skills together.

Materials Used

• Arduino Uno R3
• Photoresistor: Adjusts volume based on light levels.
• Ultrasonic Distance Sensor (HC-SR04): Modifies pitch according to distance from an object.
• Piezo Buzzer/Speaker: Outputs the sound with controlled pitch and volume.
• LED: Provides an adjustable light source for the photoresistor.
• Switch: Toggles the LED light on and off.
• Resistors: For the photoresistor and LED setup.
• Breadboard and Jumper Wires
  

  Code

The code was designed to control volume and pitch through the analog and digital inputs from the photoresistor and ultrasonic sensor. The complete code, as documented in the previous sections, includes clear mappings and debugging lines for easy tracking.

// Define pins for the components
const int trigPin = 5;               // Trigger pin for distance sensor
const int echoPin = 6;              // Echo pin for distance sensor
const int speakerPin = 10;           // Speaker PWM pin (must be a PWM pin for volume control)
const int ledPin = 2;                // LED pin
const int switchPin = 3;             // Switch pin
const int photoResistorPin = A0;     // Photoresistor analog pin

// Variables for storing sensor values
int photoResistorValue = 0;
long duration;
int distance;

void setup() {
  Serial.begin(9600);                // Initialize serial communication for debugging
  pinMode(trigPin, OUTPUT);          // Set trigger pin as output
  pinMode(echoPin, INPUT);           // Set echo pin as input
  pinMode(speakerPin, OUTPUT);       // Set speaker pin as output (PWM)
  pinMode(ledPin, OUTPUT);           // Set LED pin as output
  pinMode(switchPin, INPUT_PULLUP);  // Set switch pin as input with pull-up resistor
}

void loop() {
  // Check if switch is pressed to toggle LED
  if (digitalRead(switchPin) == LOW) {
    digitalWrite(ledPin, HIGH);      // Turn LED on
  } else {
    digitalWrite(ledPin, LOW);       // Turn LED off
  }

  // Read photoresistor value to adjust volume
  photoResistorValue = analogRead(photoResistorPin);
  
  // Map photoresistor value to a range for volume control (0-255 for PWM)
  // Higher light level (LED on) -> lower photoresistor reading -> higher volume
  int volume = map(photoResistorValue, 1023, 0, 0, 255); // Adjust mapping for your setup

  // Measure distance using the ultrasonic sensor
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  
  duration = pulseIn(echoPin, HIGH);
  
  // Calculate distance in cm
  distance = duration * 0.034 / 2;

  // Set frequency based on distance in the range of 2-30 cm
  int frequency = 0;
  if (distance >= 2 && distance <= 30) {
    frequency = map(distance, 1, 100, 20000, 2000); // Closer = higher pitch, farther = lower pitch
    tone(speakerPin, frequency);
    analogWrite(speakerPin, volume);  // Apply the volume based on photoresistor reading
  } else {
    noTone(speakerPin);  // Silence the speaker if the distance is out of range
  }

  // Debugging output
  Serial.print("Photoresistor: ");
  Serial.print(photoResistorValue);
  Serial.print("\tVolume: ");
  Serial.print(volume);
  Serial.print("\tDistance: ");
  Serial.print(distance);
  Serial.print(" cm\tFrequency: ");
  Serial.println(frequency);

  delay(100); // Short delay for sensor readings
}

Video Demonstration

In our video demonstration, we showcase how the instrument responds to changes in light and proximity. We toggle the LED to adjust volume and move a hand closer or farther from the ultrasonic sensor to change pitch, demonstrating the instrument’s sensitivity and interactive potential.

Week10

Reflections

The project successfully combines multiple sensors to create a reactive sound device. The integration of volume and pitch control allows for intuitive, responsive sound modulation, achieving our goal of designing an engaging, interactive instrument.

Improvements:
To improve this instrument, we would enhance the melody range, creating a more refined and versatile sound experience. This could involve using additional sensors or more sophisticated sound generation methods to provide a broader tonal range and a richer melody.

Physical Computing’s Greatest Hits (and misses)

In Physical Computing’s Greatest Hits (and Misses), the author discusses recurring themes in physical computing projects, noting that while some ideas are popular for their simplicity and aesthetic appeal, others provide deeper interactive potential. These themes offer valuable learning opportunities and room for original interpretation, encouraging students not to shy away from them despite their repeated use. The author reviews various common projects, including musical instruments, interactive gloves, video mirrors, and mechanical pixels, each presenting unique interaction possibilities.

One example that stood out to me was the drum gloves. This project is intriguing because it uses a familiar gesture—tapping—to create music, leveraging a natural human rhythm. The gloves transform finger movements into drum sounds, adding a playful and structured interaction that feels intuitive. By applying sensors to each fingertip, this project highlights how everyday gestures can be amplified through physical computing, making it accessible and engaging. The concept demonstrates how physical computing can make technology feel natural, bridging the gap between digital and physical interaction.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

In Making Interactive Art: Set the Stage, Then Shut Up and Listen, Tom Igoe argues that interactive art should let participants interpret and engage on their own terms, without over-explanation from the artist. By giving only minimal cues, artists create an environment for discovery, allowing users to shape their own experiences. I agree with Igoe; interactive media should be intuitive and self-explanatory, engaging participants in a personal way. This approach aligns with our midterm project presentations, where we were encouraged to figure out each other’s games independently before hearing the creator’s explanation, fostering genuine exploration and interaction.

Dynamic Light Play: Interactive LED Control with Potentiometer and Button

Concept

The aim of this project was to use a combination of analog and digital inputs to control two LEDs (one red, one blue) in a creative and functional way. The potentiometer serves as an analog input, allowing us to control the brightness of the red LED, while a button acts as a digital input to control the blue LED. This setup meets the assignment requirement to use at least one analog sensor and one digital sensor, with one LED controlled in an analog fashion and the other in a digital fashion.

Materials Used

• Arduino Uno board
• Breadboard
• Red LED and Blue LED
• Potentiometer (analog sensor)
• Button (digital sensor)
• Resistors:
  • 10kΩ for the button’s pull-up resistor
  • 330Ω for each LED
• Jumper Wires

Arduino Code

 

const int potPin = A0;       
const int buttonPin = 2;    
const int redLEDPin = 9;     
const int blueLEDPin = 8;    

void setup() {
  pinMode(buttonPin, INPUT_PULLUP); 
  pinMode(redLEDPin, OUTPUT);       
  pinMode(blueLEDPin, OUTPUT);      
}

void loop() {
  
  int potValue = analogRead(potPin);

  
  int redLEDIntensity = map(potValue, 0, 1023, 0, 255);

 
  analogWrite(redLEDPin, redLEDIntensity);

  
  int buttonState = digitalRead(buttonPin);

  
  if (buttonState == LOW) {
    digitalWrite(blueLEDPin, HIGH);  
  } else {
    digitalWrite(blueLEDPin, LOW);   
  }

  
  delay(10);
}

Implementation

Video Demonstration

IMG_3370

Reflections

This project was a practical way to understand the difference between analog and digital inputs and outputs. The potentiometer provided smooth, gradual control over the brightness of the red LED, giving me hands-on experience with analog input. The button provided simple on/off control for the blue LED, demonstrating digital input.

Challenges:

• Button Debouncing: Without the slight delay, the button would sometimes register multiple presses in a quick succession due to “bouncing.” Adding a delay(10); solved this issue.

Future Improvements:

• Adding more LEDs or sensors to expand the circuit’s functionality.
• Using more advanced analog sensors, such as a temperature or light sensor, to explore other applications.

Project Overview

This project is a hands-free, light-activated night light designed to automatically turn on an LED when it’s dark and turn it off when it’s light. Using a light-dependent resistor (LDR) as a sensor, the circuit detects ambient light levels and toggles the LED accordingly. This is ideal as a night light or as an indicator light in dark conditions.

Materials Used

• Arduino Uno: The microcontroller board used to control the circuit.
• Jumper Wires: For making connections between components.
• Resistors:
  • 330 Ohm resistor (for the LED, to limit current).
  • 10k Ohm resistor (as a pull-down resistor for the LDR to ensure stable readings).
• LED: Acts as the night light, illuminating when ambient light is low.
• Light-Dependent Resistor (LDR): Detects the light level in the environment and changes its resistance accordingly.
  

  Arduino Code

  The following code reads the light level from the LDR and turns the LED on when the light level drops below a specified threshold (indicating darkness) and off when the light level is above this threshold (indicating light):

int ldrPin = A0;           
int ledPin = 9;           
int threshold = 500;       

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

void loop() {
  int ldrValue = analogRead(ldrPin);  
  Serial.println(ldrValue);           
  
  // Check if the light level is below the threshold
  if (ldrValue < threshold) {
    digitalWrite(ledPin, HIGH);  
  } else {
    digitalWrite(ledPin, LOW);   
  }
  
  delay(100);  
}

Improvements

• • Automatic Brightness Adjustment: Incorporate PWM to adjust the LED brightness gradually based on light levels, creating a dimmer effect in low light.
  • Sensitivity Adjustment: Experiment with different threshold values based on the ambient light conditions in various environments. This ensures accurate and responsive behavior.

Video Demonstration

Her Code Got Humans on the Moon

Margaret Hamilton’s story is incredibly inspiring and shows the power of resilience and innovation. She didn’t just contribute to the Apollo moon landing; she redefined what software could be, pioneering a field that would become the backbone of modern technology. Her work at MIT’s Instrumentation Lab, where she developed error-detecting and recovery software for the Apollo missions, was groundbreaking. During the Apollo 11 landing, her code prevented mission failure when the guidance computer overloaded, proving the essential role of well-designed software in complex systems.

What’s especially cool is that Hamilton saw the potential of software when others didn’t. She pushed to make it a core part of the mission’s success, even coining the term “software engineering.” Her success in a male-dominated field makes her story even more remarkable, showing how powerful one person’s vision can be. Hamilton’s legacy is a reminder of how perseverance and challenging norms can lead to innovations that change the world. Her work inspires me to approach challenges with the same confidence and creativity.

Norman,“Emotion & Design: Attractive things work better”

Donald A. Norman’s “Emotion & Design: Attractive Things Work Better” presents a fascinating perspective on the link between aesthetics and functionality. Norman argues that attractive designs aren’t just visually pleasing but also improve usability and user experience. He explains that beautiful, well-designed products trigger positive emotions, which, in turn, make users more open to exploring and interacting with them. This positive emotional state even enhances cognitive abilities, helping people think more creatively and handle challenges more effectively. Norman’s insights challenge the traditional view that function alone is enough, showing that emotional responses play a vital role in how we perceive and use everyday objects.

This idea is compelling because it suggests that design impacts not only a product’s usability but also its psychological effect on users. Norman’s argument that beauty can make products “work better” reveals how critical emotional connections are in design. His work is a powerful reminder for designers to consider aesthetics as an essential part of the user experience, not just an afterthought. It’s inspiring to think of design as a bridge between function and emotion, enhancing both user satisfaction and product effectiveness.

Concept:

The game is an arena-style, two-player game where each player controls a snowball. The goal is to either knock the opponent’s snowball (represented by an emoji image) out of the arena or collect three coins. Which ever player gets to three points first wins. A scoreboard is displayed on screen to show each player’s current score and coin count.

Sketch:

User Interaction: 

• The game begins with an instruction screen, requiring user input to proceed.
• Player 1 controls their snowball using the WASD keys, while Player 2 uses the arrow keys.
• Players navigate the arena, collecting coins or attempting to knock their opponent out of bounds.
• The first player to collect three coins or knock their opponent out three times wins.
• Players can choose to start a new session after completing the game.
  

  Implementation: 

• The game has several classes, each of which contributes to different aspects of the experience:

  • Game: This class manages the overall state of the game, including showing screens, handling instructions, tracking game progress, and determining when a round or the game ends.
  • Player: The Player class handles all of the attributes and behavior of each player. This includes movement (based on keyboard input), collision detection, score tracking, and boundary constraints.
  • Arena: The Arena class defines the boundary within which players compete. It is used to detect if a player has fallen out of bounds.
  • Item: The Item class is used to create collectible items (coins). When a player collects an item, it increases their coin count.

  Key features incorporated into the game:

  • Object-Oriented Programming: The game is structured using classes such as Game, Player, Arena, and Item to ensure modular and reusable code.
  • Visuals: The game uses images for players, the background, and items (coins).
  • Sound: Sounds are used for collecting coins and when the game ends.
  • User Input: Player controls are managed using keyboard inputs (WASD and arrow keys).
  • Collision and Boundary Detection: Players can collide with each other, and boundary detection is used to check if players fall out of the arena.
    

    Key Challenges Faced: 

    One of the primary challenges faced during development was handling the collision physics between the players. The snowball collisions had to feel dynamic, but it was difficult to achieve perfect elasticity. The physics calculations were complex, especially considering that each player’s position and velocity had to be updated to reflect an elastic collision.

    Another challenge was optimizing the game so that it could run smoothly in p5.js. Initially, I wanted to incorporate more images and sounds, but p5.js struggled to handle all of the resources, leading to long loading times. Ultimately, I had to simplify the assets to ensure smooth gameplay.

Code That I Am Proud Of: 

I am particularly proud of the resolveCollision() function in the Player class, which handles the collision between players. The function calculates the angle and then applies new velocities to the players to simulate the effect of a collision. This code makes the game feel more dynamic and fun, as players can push each other around the arena.

resolveCollision(other) {
  let dx = other.x - this.x;
  let dy = other.y - this.y;
  let distance = Math.sqrt(dx * dx + dy * dy);

  if (distance < this.radius + other.radius) {
    let angle = Math.atan2(dy, dx);
    let v1 = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
    let v2 = Math.sqrt(other.vx * other.vx + other.vy * other.vy);

    let newVx1 = v2 * Math.cos(angle);
    let newVy1 = v2 * Math.sin(angle);
    let newVx2 = v1 * Math.cos(angle);
    let newVy2 = v1 * Math.sin(angle);

    this.vx = newVx1;
    this.vy = newVy1;
    other.vx = newVx2;
    other.vy = newVy2;

    let overlap = (this.radius + other.radius) - distance;
    let moveX = overlap * Math.cos(angle) / 2;
    let moveY = overlap * Math.sin(angle) / 2;
    this.x = this.x - moveX;
    this.y = this.y -moveY;
    other.x = other.x + moveX;
    other.y = other.y + moveY;
  }
}

This function might not achieve perfect elasticity, but it gives a satisfying collision effect, enhancing the overall player experience.

Reflection: 

Looking back, I am mostly satisfied with how the project turned out, especially given the challenges with collision detection and resource optimization. One thing I wish I could improve is the collision physics—ideally, the collisions would be perfectly elastic, allowing for even more realistic interactions between the players. However, achieving this in a way that felt right with p5.js was more challenging than expected. Despite these challenges, the game is enjoyable and provides a satisfying experience for both players.