Week 12: Final Project Proposal

Smart House System

For this project, I am designing a Smart House System using Arduino UNO and p5.js.
The idea was to automate key parts of a house and parking lot, and to create a more interactive experience using voice announcements made with p5.js.

The main features include:

  • Automatic main door that opens when a person approaches.

  • Car parking system that displays the number of available spots and automatically opens a parking barricade if spots are available.

  • Indoor lighting system that switches on when it gets dark, based on a photoresistor sensor.

  • Real-time voice announcements generated in p5.js based on Arduino sensor inputs, to make the system feel alive and responsive during an exhibition demo.

Design and Description of Arduino Program

The Arduino is responsible for all hardware sensor readings, actuator controls, and sending/receiving messages to and from p5.js.

Component Type Description
Distance Sensor (Main Door) Input Measures distance to detect a visitor near the main door.
Distance Sensor (Parking Entrance) Input Detects a car approaching the parking gate (entry).
Distance Sensor (Parking Exit) Input Detects a car leaving the parking area (exit).
Photoresistor (Indoor Lighting) Input Detects ambient light levels to determine if indoor lights should be turned on.
Servo Motor (Main Door) Output Opens or closes the main entrance door based on visitor detection.
Servo Motor (Parking Gate) Output Opens or closes the parking barricade when a car is allowed entry.
LED Display Output Shows the number of parking spots left.
Indoor LEDs / Lights Output Turns indoor lights on/off based on photoresistor readings.

Design and Description of p5.js Program

The p5.js program is responsible for interaction, feedback, and visualization.

Main Tasks:

  • Connects to Arduino through Serial communication.

  • Reads messages sent from Arduino (e.g., “door_open”, “lights_on”, “parking_spots:3”).

  • Plays real-time voice announcements using the p5.speech library based on events detected.

  • Displays a virtual dashboard showing the current number of available parking spots and statuses like door open/closed, lights on/off.

Voice Announcements Based on Arduino Events:

Arduino Message p5.js Voice Announcement
door_open “Welcome! The door is opening.”
car_entry “Vehicle detected. Checking parking availability.”
car_exit “Vehicle exited. Parking spot now available.”
parking_full “Parking is full. Please wait.”
lights_on “Lights are now on for your comfort.”
lights_off “Lights are off to save energy.”

Week 12 – Final Concept – Go Ichi-Go!

Concept and Overview:

For my final project, I want to create a game called “Go Ichi-Go!”. So the game would have a character called Ichigo (strawberry), who runs and has to jump over obstacles like jumping puddles of whipped cream, and towers of chocolate, and slide under floating slices of cake. After each jump/dive, there would be randomised text giving cute strawberry themed puns. For this I’ll use an array of randomised puns. 

There would also be sound effects for each jump or dive. There would be two buttons to jump or dive, using Arduino, and a button to start/restart the game. The player wins after successfully overcoming 10 obstacles.

If they win, it would display a congratulations image and a restart option. This triggers the movement of the servo motor, which will dispense candy as the reward for winning.

If they fail to do so, then it would just go to a Game Over state with a restart button. 

Things I’ll need :

  1. Arduino Uno
  2. Breadboard
  3. Servo Motor
  4. Three arcade buttons
  5. Jumper wires
  6. Alligator clips/wires
  7. Laser print arcade box
  8. Candy box dispenser

The serial communication would be like this:

From Arduino to p5: 

Pressing the “Start” button sends an “S” to p5, to start/restart the game.

Pressing the “Jump” button sends a “J” to p5, triggering the character to jump.

Pressing the “Dive” button sends a “D” to p5, triggering the character to jump.

if (digitalRead(startBtn) == LOW) {
   Serial.println("S");
   delay(100);
 }
 if (digitalRead(jumpBtn) == LOW) {
   Serial.println("J");
   delay(100);
 }
 if (digitalRead(diveBtn) == LOW) {
   Serial.println("D");
   delay(100);
 }

From p5 to Arduino:

At the end, when they win, P5 sends a “C” to Arduino, triggering the movement of the servo motor. 

serial.write('C\n');

Schematic:

DESIGN :

I want to make this game in a very kawaii retro vibe, but also focus more on the interaction design on the game itself, something I learnt from my midterm. So this time, I used Canva to layer up the illustrations, instead of drawing them from scratch. 

I also want to laser cut a box to hold all this together and make it look like one of those retro arcade game boxes. 

So far, I’ve just started the basic outline of the code, so I haven’t gotten very far with it. 

Next steps

  1. Finish game interface and troubleshoot 
  2. Laser cut arcade box pieces
  3. Make a box structure for the candy dispenser

 



Week 12 – Final Project Proposal

My final project is a bomb defusal game inspired by Keep Talking and Nobody Explodes. Just like in the original game, the player has to disarm several modules on the bomb in order to successfully defuse it. Currently I plan to include four types of modules. The first is Simon Says, using four buttons and corresponding LEDs. The second is a single larger button connected to a multicolored LED, which will be disarmed differently depending on the color. The third is an adaptation of cutting wires, where the player will have to either disconnect or rearrange the wires correctly. The last module requires the user to use a potentiometer as a tuning knob and try to hone in on the correct frequency.

The Arduino will be responsible for reading the inputs from each module, and correctly lighting the LEDs where needed. I also intend to use the display screen from our kits to show the bomb’s timer if possible, and use a buzzer/speaker to create a beeping noise. The p5.js side will be responsible for initializing a new game and managing its state. It will receive the inputs from Arduino and verify them, and send back the confirmation if a module was completed. I also want to use it to render a representation of the bomb, including the correct LED lights and countdown timer. In line with the original game, it can also work to provide the information needed to disarm the more complicated modules. In terms of interaction, p5.js will be used to start the game and will display a win/loss screen after it ends.

I have started writing some basic code for both components:

/*
Final Project (WIP)
By Matthias Kebede
*/





// // // Global Variables
// // Inputs
const int tempIn = A1;

// // Outputs
const int tempOut = 8;
const int speakerPin = 10;

// // Communication and State Information
int sendInterval = 100;   # ms
int lastSendTime = 0;   # ms
int timer = [5, 0];   # minutes, seconds
int beepFreq = 1000;   # hz
int beepDur = 50;   # ms
int beepInterval = 100;   # ms
int lastBeepTime = 0;





// // // Main Processes
void setup() {
  Serial.begin(9600);

  // // Inputs and Outputs
  pinMode(tempIn, INPUT);
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(tempOut, OUTPUT);

  // // Check built-in LED
  digitalWrite(LED_BUILTIN, HIGH);
  delay(200);
  digitalWrite(LED_BUILTIN, LOW);

  // // Start handshake w/ p5.js
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);
    Serial.println("123"); // identifiable starting number
    delay(300);
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}

void loop() {
  // // Wait for p5.js
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH);

    int firstVal = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(tempOut, firstVal);
    }

    if (lastSendTime > sendInterval) {
      lastSendTime = 0;
      int sendVal = analogRead(tempIn);
      int mappedVal = map(sendVal, low, high, 0, 255);
      Serial.println(sendVal);
      delay(1); // stabilize ADC? check this
    } 
    else {
      lastSendTime++;
    }

    digitalWrite(LED_BUILTIN, LOW);
  }
}





// // // Helper Functions
void timerSound() {
  if (lastBeepTime > beepInterval) {
    // // Less than 30 seconds remaining
    if (timer[0] == 0 && timer[1] < 30) {
      tone(speakerPin, beepFreq + 500, beepDur);
    }
    // // Final minute but more than 30 seconds
    else if (timer[0] == 0) {
      tone(speakerPin, beepFreq + 250, beepDur + 25);
    }
    else {
      tone(speakerPin, beepFreq, beepDur + 50);
    }
  }
  else {
    lastBeepTime++;
  }
}
/*
Final Project
By Matthias Kebede
*/


// // // Global Variables
let debug = true;
let gameState = 'menu'; // menu, playing, win, lose
let game;
// // For display
let play, menuTitle;




// // // Main Processes
function preload() {
  
}

function setup() {
  createCanvas(600, 450);
  createMenu();
}

function draw() {
  background(220);
  
  switch (gameState) {
    case 'menu':
      showMenu();
      break;
    case 'playing':
      game.display();
      break;
    default:
      break;
      
  }
}



// // // Classes
class Game {
  constructor() {
    this.gameover = false;
    this.start = millis();
    this.time = 30;
    this.modules = [];
  }
  display() {
    text(`Time: ${Math.floor(this.time)}`, width/2, height/2);
    if (!this.gameover) {
      this.update();
    }
    else {
      text("Gameover", width/2, height*0.2);
    }
  }
  update() {
    for (let module in modules) {
      module.checkStatus();
    }
    // // Update timer
    if (this.time > 0 + 1/frameRate()) {
      this.time -= 1/frameRate();
    }
    else {
      this.time = 0;
      this.gameover = true;
    }
  }
}

class Module {
  constructor() {}
  checkStatus() {}
}



// // // Interaction
function mouseClicked() {}



// // // Displays
function createMenu() {
  // // Menu Title
  menuTitle = createElement('h1', "Main Menu");
  menuTitle.size(9*18, 100);
  menuTitle.position((width-menuTitle.width)/2, height*0.2);
  // // Play Button
  play = createButton("Play");
  play.size(width/5, height/15);
  play.position((width-play.width)/2, height/2);
  play.mousePressed(function() {
    game = new Game();
    gameState = 'playing';
    removeElements();
  });
}
function showMenu() {}


// // // Helper Functions


Week 12 – Finalised Concept

For my final project, I am building a 3D Music Interface that allows users to trigger both 3D visual animations and musical sounds through a physical touch-sensitive controller. The interface will be made out of cardboard and tinfoil touchpads connected to an Arduino. Each physical touch will trigger a corresponding 3D box animation in p5.js, along with a musical note generated directly in the browser using the p5.sound library. The goal is to create a playful, intuitive instrument that connects physical gestures to both sound and visual expression immediately and reliably.

Arduino Program Design

The Arduino will act as the input device, reading signals from multiple touch-sensitive pads made of tinfoil and cardboard.

  • Inputs:

    • Each touchpad will be connected to a digital input pin.

    • When the user touches a pad, it will register a HIGH signal on that pin.

  • Processing:

    • The Arduino continuously checks the state of each touchpad inside the loop() function.

    • When a touch is detected, the Arduino sends a unique identifier through Serial communication.

    • Each touchpad is mapped to a different number (e.g., 0, 1, 2, 3, up to 7).

  • Outputs:

    • The Arduino only sends data to p5.js. It does not control any external outputs like LEDs or motors.

  • Communication with p5.js:

    • Sends a single-digit number (0–7) each time a pad is touched.

    • No information is received from p5.js back to Arduino because the communication is one-way (Arduino → p5).

Example behavior:

  • Touchpad 0 is touched → Arduino sends 0 over Serial.

  • Touchpad 1 is touched → Arduino sends 1 over Serial.

    …and so on for each pad.

    The Arduino sketch will look something like this (early draft structure):

    void setup() {
      Serial.begin(9600);
      pinMode(touchPin1, INPUT);
      pinMode(touchPin2, INPUT);
      ...
    }
    
    void loop() {
      if (digitalRead(touchPin1) == HIGH) {
        Serial.println(0);
      }
      if (digitalRead(touchPin2) == HIGH) {
        Serial.println(1);
      }
      ...
    }
    

p5.js Program Design

The p5.js program will be responsible for receiving data from Arduino and producing both sound and visual feedback based on the input.

  • Receiving data:

    • p5.js listens to the Serial port using the serialEvent() function.

    • Each time it receives a number from Arduino (0–7), it triggers two actions:

      1. Visual: Activates a specific 3D box animation (e.g., spin, color change, movement).

      2. Audio: Plays a specific musical note using the p5.sound library.

  • Processing:

    • The incoming serial value is matched to the corresponding element in an array of 3D boxes.

    • A corresponding musical note (e.g., C2, D2, E2, F2…) is also mapped and played.

  • Outputs:

    • On the screen: Real-time 3D animations using WEBGL (such as spinning boxes).

    • In the browser: Sound output through the computer speakers using p5.sound.

  • Communication with Arduino:

    • p5.js only receives data from Arduino.

    • No messages are sent back

Example behavior:

  • Receive 0 → Box 0 spins and note C2 plays

  • Receive 1 → Box 1 spins and note D2 plays

  • Receive 2 → Box 2 spins and note E2 plays

    Early pseudocode for handling serial data:

function serialEvent() {
  let inData = Number(serial.read());
  if (inData >= 0 && inData < boxes.length) {
    boxes[inData].play(); // Spin box
    playNote(inData); // Play corresponding sound
  }
}

Next Steps

  1. Build a basic cardboard and tinfoil prototype for the touch-sensitive interface

  2. Test Arduino with simple touch sensor code, confirming that touchpads reliably trigger digital input signals

  3. Set up p5.serialport and confirm that Arduino can send and p5.js can receive serial data properly
  4. Prepare an initial sound mapping using the p5.sound library

  5. Create a rough version of the 3D visualizations (boxes spinning in response to input)

Week 11 – Final Project Idea

For my final project, I am creating a 3D physical music interface that uses Arduino and p5.js to produce both sound and visual feedback in real time. The interface will be built from cardboard and tinfoil touchpads connected to an Arduino. Each physical input will trigger 3D animations on screen and simultaneously play musical notes or sound effects through p5.js’s sound library.

The goal is to design an experience where physical gestures directly generate both visual creativity and musical expression, offering a playful and intuitive interaction. Touching different areas results in unique audiovisual combinations, allowing users to “perform” across both sound and visual mediums.

Inspired by projects like Browser Synth, Interactive Soundboard with p5.js, and Visual Music Keyboards (examples attached), my final project will explore how homemade interfaces can connect physical creativity to browser-based multimedia environments.

Implementation:

  • Arduino: Detecting touch interactions

  • p5.js:

    • Processing serial input from Arduino

    • Triggering real-time 3D graphics (WEBGL)

    • Playing sound using the p5.sound library

Vision:

For this project, my vision is to create an intuitive and playful instrument that connects physical touch to both sound and visual expression. I want the final product to feel immediate and responsive so that when a user touches different parts of the physical interface (buttons/controllers), they should instantly hear a corresponding musical note and see a visual reaction on the screen. My goal is to ensure that the interaction feels clear and easy to discover, even for someone using it for the first time, while also offering enough variety for users to improvise and experiment with the music instrument. Consistency and reliability are also important: every touch should reliably trigger a specific, predictable response without delay.

Introducing p5.js - Building a Generative AI Music Visualizer with  JavaScript and React Codédex | Build an Interactive Soundboard with p5.js
Build a Web Audio Synthesizer in the Browser with p5js

Finalized Concept-week12

For my final project, I’m creating an interactive Mood Tree Visualizer—a small Christmas tree decorated with RGB LEDs that change colors based on sound  input. The physical tree will be paired with lava lamp-inspired digital visuals in P5.js, creating a cohesive, immersive experience that blends the physical with the virtual. The LEDs on the tree and the blobs on the screen will respond dynamically to sound levels (like clapping, talking, or music) and mood selections .

This playful project is about visualizing emotions in a cozy, festive, and engaging way, letting users express energy levels through both the physical glow of the tree and the flowing digital visuals.

inspiration:

Arduino : Inputs & Outputs:

sound sensor:Captures ambient sound intensity. Louder sounds trigger more active LED patterns and more dynamic P5.js animations.

  • Calm: Blues/Purples

  • Medium: Greens

  • Excited: Reds/Orange

    P5.js Program Design: Inputs & Outputs

    • Inputs from Arduino:

      • Sound Levels:
        Modulate the size, speed, and behavior of the lava blobs.

      • Mood Selection:
        Switch between color palettes and animation styles that match the LED colors.

or instead I will create My final project is a Mood House Visualizer a small interactive installation where a miniature house lights up in response to sound. Using an Arduino with a microphone sensor, I will control five RGB LEDs embedded because Arduino doesn’t have enough current for more than 5 led lights or I might just add the led lights for each colors and I will make a mini garden it will act the same way the tree should act the difference is going to be in the appearance of the project

Week 11 Project Exercises

 

 

 

Exercise 1.1

let port;
let connectBtn;
let baudrate = 9600;
let lastMessage = "";

function setup() {
  createCanvas(400, 400);
  background(220);

  port = createSerial();

  // in setup, we can open ports we have used previously
  // without user interaction

  let usedPorts = usedSerialPorts();
  if (usedPorts.length > 0) {
    port.open(usedPorts[0], baudrate);
  }

  // any other ports can be opened via a dialog after
  // user interaction (see connectBtnClick below)

  connectBtn = createButton("Connect to Arduino");
  connectBtn.position(80, 200);
  connectBtn.mousePressed(connectBtnClick);

}

function draw() {
  background("255");
  

  
  // Read from the serial port. This non-blocking function
  // returns the complete line until the character or ""
  let str = port.readUntil("\n");
  if (str.length > 0) {
    // Complete line received
    // console.log(str);
    lastMessage = str;
    
  
  }
  
      
  
  // Display the most recent message
  text("Last message: " + lastMessage, 10, height - 20);

  // change button label based on connection status
  if (!port.opened()) {
    connectBtn.html("Connect to Arduino");
  } else {
    connectBtn.html("Disconnect");
  }
  
  
  ellipse(lastMessage,10,20,20)
}

function connectBtnClick() {
  if (!port.opened()) {
    port.open("Arduino", baudrate);
  } else {
    port.close();
  }
}

 

Exercise 1.2

let port;
let connectBtn;
let baudrate = 9600;
function setup() {
  createCanvas(255, 285);
  port = createSerial();
  let usedPorts = usedSerialPorts();
  if (usedPorts.length > 0) {
  port.open(usedPorts[0], baudrate);
 } else {
  connectBtn = createButton("Connect to Serial");
  connectBtn.mousePressed(() => port.open(baudrate));
 }
}
function draw() {
  background(225);
  circle(140,mouseY,25,25):
  let sendtoArduino = String(mouseY) + "\n"
  port.write(sendtoArduino);
}

Exercise 1.3

 

 

int led = 5;
void setup() {
  Serial.begin(9600);
}
 
void loop() {
  if (Serial.available()) {
    int ballState = Serial.parseInt(); 
    if (ballState == 1) {
      digitalWrite(led, HIGH); // ball on ground
    } else {
      digitalWrite(led, LOW); // ball in air or default
     }
  }
  // read the input pin:
  int potentiometer = analogRead(A1);                  
  int mappedPotValue = map(potentiometer, 0, 1023, 0, 900); 
  // print the value to the serial port.
  Serial.println(mappedPotValue);                                            
  
  delay(100);
}

 

 

 

 

Week 11: Design Meets Disability Reading Response

One thing I really liked about Design Meets Disability by Graham Pullin is the way it focuses on reframing disability not as a limitation, but as a creative lens through which to innovate design. Rather than treating these assistive technologies like hearing aids or prosthetic limbs as mere medical interventions meant to blend in or be hidden, Pullin instead emphasizes their potential to become expressions of identity, taste, and personal style. The idea that a prosthetic limb could be as much a fashion statement as a handbag or a pair of shoes completely challenges traditional views of medical devices. This shift from invisibility to visibility, where these aids can be beautiful, bold, and integrated into one’s sense of self, was fascinating for me because there’s often a sense of shame associated with these assistive technologies instead that is now being converted into a sense of pride. It reveals how design can be an empowering force when it treats users as people with preferences and personalities, not just as patients.

Overall, I think Pullin’s work makes a very compelling case for bringing designers and disabled individuals into a closer collaboration, arguing that inclusive design should not be about achieving an average but about expanding the range of what’s possible. By introducing examples like sculptural hearing aids or prosthetics designed with aesthetic flair, Pullin invites us to think beyond function and consider meaning, identity, and even fun. It is a very unique take that kind of steps away from more utilitarian design approaches, and it challenged my own assumptions about what disability-related products are supposed to look like. Thus, Design Meets Disability doesn’t just advocate for better products, it advocates for a broader, more human-centered vision of design itself.

Week 11: Design meets Disability

In Design Meets Disability, Graham Pullin talks about how design and disability don’t have to be separate things. He makes the point that products for people with disabilities are often made just to be functional, not stylish or personal. But he believes design should consider both usefulness and aesthetics. For example, he compares hearing aids to glasses—how glasses have become a fashion item, while hearing aids are still usually hidden. This really made me think about how much design influences how people feel about themselves and their devices.

What stood out to me is how Pullin encourages designers to think differently and challenge old assumptions. Instead of just trying to make something look “normal,” why not celebrate individuality and make things that people are proud to use? It made me realize how much power design has—not just in how things work, but in how they make people feel. Overall, the reading made me think more deeply about what inclusive design really means and how it can actually improve lives in more ways than just solving a problem.

Reading response

Design Meets Disability is a new take on how design can play a much bigger role in the world of assistive technology. Instead of treating medical devices as something to hide, it encourages us to see them as an opportunity for creativity and personal expression. One of Graham’s coolest examples is the leg splint designed by Charles and Ray Eames during World War II—originally meant to help injured soldiers, but it later inspired their famous furniture. It’s a great reminder that functional design can also be beautiful and impactful beyond its original use.

Pullin makes a strong case for reimagining everyday medical devices, like hearing aids and prosthetic limbs, as something more than just tools. Think about glasses: they used to be seen purely as medical necessities, but now they’re a full-on fashion accessory. So why not give the same design attention to other devices? By making them customizable and stylish, users could feel more confident wearing them, and society might begin to see disability in a new, more positive light.

What’s especially great is Pullin’s emphasis on involving people with disabilities in the design process. He believes that assistive tech should reflect the user’s identity, not just meet a need. That mindset leads to more thoughtful, inclusive designs, and it helps everyone, not just those with disabilities. The reading is an inspiring call to designers to be more empathetic, open-minded, and creative in how they think about ability, aesthetics, and innovation.