Week 12: Final Project proposal and design documentation

Finalized concept for the project:

I am making a “Crack The Code Safe Game” for my final project. In this game, the user will try to open a locked safe while “guessing the digits from a given hint”.

Game Interface Design:

Design and description of Arduino and P5 program:

The program will use servo motor to lock and unlock the safe box.

Arduino will receive 3 digits of random code from p5, when the game starts and the servo motor locks the safe box.

The user is able to enter the digits using potentiometer and button to enter the code for the safe. Turn the potentiometer to choose the digits from 0-9 and press the button to enter the digit. Arduino receives the user input and sends it to p5, which prints the message if the code is wrong or not. If the code is correct the safe opens – servo motor unlocks the safe.


Week 11: Exercises

Exercise 1: make something that uses only one sensor on arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on arduino is controlled by p5

Using the ultrasound sensor, the circle moves horizontally on the canvas.

Video: exercise_1_week_11

P5.js link:


Arduino code: 

#define echoPin 2
#define trigPin 3

long duration;
int distance;

void setup() {
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);


void loop() {
digitalWrite(trigPin, HIGH);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);

// Calculate distance in centimeters
distance = duration * 0.034 / 2;

Serial.println(distance); // Print distance in centimeters
delay(100); // Delay for stability

Exercise 2: make something that controls the LED brightness from p5. 

The LED brightness is controlled by the vertical distance of MouseY and the top of the screen. The higher the distance the brighter the LED. So, when the user drags the ellipse from the top to the bottom of the canvas, the brightness of the LED increases proportionally and vice versa.

Video: exercise_2_week_11

P5.js link: 

Arduino code:

//exercise 2, week 11, controlling the brightness of LED with p5.js
//Diana and Buka
// Output:
// - 5 - LED

const int ledPin = 5; //the LED pin is at 5

void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 // use the builtin LED as a status output.
 pinMode(ledPin, OUTPUT);

 // Start the handshake
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
   Serial.println("0"); // send a starting message
   delay(300); // wait 1/3 second
   digitalWrite(LED_BUILTIN, LOW);

void loop() {
 // Wait for data from p5 before doing something
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH); // LED on while receiving data
   // reading the integer value, confirming that the next character is a new line and sending confirmation 1
   int brightness = Serial.parseInt();
   if (Serial.read() == '\n') {

   // LED brightness is set accordingly
   analogWrite(ledPin, brightness);
 digitalWrite(LED_BUILTIN, LOW);

Exercise 3: take the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor

The LED is on when the ball is on the ground / hits the ground when bouncing. And the ball can be controlled by the potentiometer to move left and right.

Video: exercise_3_weel11.mov

P5.js link:

Arduino code: 

const int LED_PIN = 3;
const int SENSOR_PIN = A2;

void setup() {

// Test the LED
digitalWrite(LED_PIN, HIGH);
digitalWrite(LED_PIN, LOW);

void loop() {
int p_value = analogRead(SENSOR_PIN); // read from the potentiometer
int move = map(p_value, 0, 1023, -1, 2); // map the value to -1, 0, and 1

if (Serial.available() > 0) {
// read from p5.js
int touch = Serial.parseInt();
// set the LED command
if (touch == 1) {
digitalWrite(LED_PIN, HIGH);
} else {
digitalWrite(LED_PIN, LOW);

Final Project Idea


The idea is to create a “Crack The Code Safe Game.” There will be a locked mini safe box that the user will need to open by solving a simple math problem on the computer, revealing a secret 4-digit code.

This inspiration came from watching a video about a similar project: Crack The Code Safe.


  1. Handmade safe box:
    • This box has a lock controlled by an Arduino.
    • There’s a dial on the box connected to the Arduino that the user will use to enter the secret 4-digit code.
  2. Arduino:
    • The Arduino checks if the entered code is correct.
    • It manages locking and unlocking the safe.
  3. p5.js game interface:
    • It’s a simple math game on the computer screen (p5.js). This game helps the user find the 4-digit code for the safe.

User Experience Flow:

  1. Introduction: The user will receive instructions on how to open the safe, both on the computer screen and the safe box. The safe will have different codes for each new game. The user will be able to restart game. But the user cannot see the correct code without at least making one attempt to open the safe.
  2. Gameplay: The user will start playing the game on the computer. Each correct math problem solution reveals a digit of the secret 4-digit code in order. In other words, the user will solve 4 math problems and the answer to each problem is the digits of the secret code.
  3. Code Entry: The user solve the math problem, get a digit, and enter it using the dial on the safe box. Turn the dial to select digits and push it to confirm each one.
  4. Feedback and Unlocking: The Arduino checks the entered code. If it’s right, the safe unlocks, and the user win! If not, the game starts over, and a new secret code will be created.

Week 11 – Reading Response

The reading about design and disability really got me thinking. It showed how something as simple as fashion can change how we view things like glasses or other aids for individuals with disabilities. I used to wonder how glasses became a style statement, making people proud to wear them unlike other kinds of devices such as hearing aids. However, I particularly appreciate that the author addresses these devices as earwear and bodywear. They’re just something that people wear like clothes, and those devices hold very sentimental details for the designer, which shouldn’t make the individual feel odd or unusual.

The example of Aimee Mullins is especially an inspiring example that shows how prosthetic legs can be a way to express oneself, which is pretty amazing. It further illustrates how fashion can help designers make special aid devices more normalized and less visible, reducing the stigma of disability.

The main idea that I really liked about this reading is how design can make a huge difference for people with disabilities. Design isn’t just about making things look good; it’s about making life easier and more inclusive for them. Fashion can play a role in making people feel confident about using assistive devices. And when designs are simple, they make life easier for everyone, not just those with disabilities. The idea that simple designs work better, like what Apple does, totally makes sense. Simple things are easier for everyone to use, regardless of age or abilities of individuals. The reading discussed how it’s sometimes better to make designs specifically for one person instead of trying to make something that accommodates everyone.

“Jingle Bells” Radio


We created a basic radio that switched between two channels, each playing different songs, by adjusting a potentiometer. Inspired by the upcoming festive season, even though it is too early, we decided to integrate the beloved tune “Jingle Bells” into our project.

Video Demonstration: musical instrument


We used a switch, a potentiometer, and a buzzer in our setup. The switch turns on and off the radio, and the potentiometer switches between channels. Initially, we planned to include two songs: “Jingle Bells” and “Let It Be.” However, converting “Jingle Bells” into playable chords was a bit of a challenge. Consequently, the potentiometer plays “Jingle Bells” when set in the first half and stays silent in the second half.

To achieve the authentic “Jingle Bells” melody, we discovered the chords and their timing online. These chords, when played together, compose a recognizable tune. We organized this chord information into an array named “melody” in our code. Each chord in this array was linked to a specific frequency, dictating the notes played. Assigning these frequencies to each chord enabled us to establish a precise sequence of notes within the melody array, ultimately generating the iconic “Jingle Bells” tune. Later in the loop, it iterates through the melody array. Within the loop, it retrieves each note’s frequency and plays it for a specified duration using the buzzer.

const int BUZZER_PIN = 3;
const int threshold = 512;

// Define each chord's frequency
#define C 261
#define D 294
#define E 329
#define F 349
#define G 392
#define A 440
#define B 493
#define REST 0

void setup() {

void loop() {
  int analogValue = analogRead(POTENTIOMETER_PIN);

  if (analogValue > threshold) {
  } else {
    delay(100); // Delay to reduce loop frequency

void playJingleBells() {
  // Melody and Timing
  int melody[] = {
    E, E, E, REST,
    E, E, E, REST, E, G, C, D, E, REST,
    F, F, F, F, F, E, E, E, E, D, D, E, D, REST, G, REST,
    E, E, E, REST,
    E, E, E, REST, E, G, C, D, E, REST,
    F, F, F, F, F, E, E, E, G, G, F, D, C, REST
  int noteDurations[] = {
    4, 4, 4, 4,
    4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
    4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
    4, 4, 4, 4,
    4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
    4, 4, 4, 4, 4, 4, 4

  int melodySize = sizeof(melody) / sizeof(melody[0]);

  for (int i = 0; i < melodySize; ++i) {
    int noteDuration = 1000 / noteDurations[i];

    if (melody[i] != REST) {
      tone(BUZZER_PIN, melody[i], noteDuration);
      delay(noteDuration); // Let the note play for its duration
    } else {
      delay(noteDuration); // If it's a rest, delay without tone
    noTone(BUZZER_PIN); // Stop the note
    delay(50); // Delay between notes for spacing

Reflection & Future Improvements:

As it was mentioned before, we wanted to create a radio with two channels, playing two different songs such as “Jingle Bells” and “Let It Be”, depending on the resistance of the potentiometer: the first half plays one song, and the second half another. However, we spent a lot of time working on our beloved Christmas song, finding the right chords, and frequencies, and figuring out the logic of making it play, so we didn’t have much time left to work on the second song. Because of this, we decided to make another channel of our radio empty for now, so we could add the song in the future. In addition to that, we would like to work on the aesthetics in the future by creating the painted cardboard in the form of the radio in order to create a more realistic experience. 

Week 10: Reading Response

In his reading, Bret Victor discussed the Vision of the Future, sharing his observation about the central role of hands in interactions with future technology, or as he defined them, tools. Hands in the physical world serve various activities and possess numerous senses. Through just a touch or lifting objects, we can tell so much about them, making hands our primary means of understanding the world. However, in technological contexts, especially when we envision the future, hands primarily slide across glass screens. We can only sense the glass screen and manipulate the displayed content. His main point emphasizes the need to consider other interactions beyond hands— we also have our bodies! We should start considering other forms of interaction.

As he further discussed the two main functions of our hands—feeling and manipulation—I began to wonder: If we excessively use interactions solely via the glass screen, limiting our interaction with the real world and physical objects, would we lose some of our capabilities? He defined a tool as addressing human needs by amplifying human capabilities. If this were to happen, technology would become less of a tool.

Later, his response to some of the readers’ comments, and one indeed answered my questions. Victor citing a neuroscientist’s quote about the development of “finger-blindness” caused by underutilizing hands in childhood. And it is even worse than a simple blindness that a blind person cannot locate things, but a finger blind person cannot understand the meaning and value of things. What if, just what if in the far far future maybe, we start to use only the interaction of the sliding or tapping on the screen and start to develop this kind of “finger-blindness”? Though it might seem far in the future, we’re already experiencing some changes. For instance, some people have become so accustomed to typing that they feel less comfortable writing with pen and paper. What if we no longer remember how it feels like to turn a page of a book.

What he suggests is that as we choose the future, we also choose to shape our future through our actions. For that, he suggests thinking of different types of interactions beyond just using our hands, aiming for a “dynamic medium that we can see, feel, and manipulate.” And I do think such interactions might be somewhat expensive, considering that every kind of technology has its strengths and weaknesses. Take VR, for example—indeed, we can see things in 3D, but it remains a visionary illusion where we cannot physically touch and feel things around us. What I am suggesting now aligns with what he pointed out: we need to start thinking about diverse types of interactivity to balance the excessive use of one.

Week 9: Simple Alarm System


I created an alarm system that allows users to toggle the alarm on and off using a button. When activated, signified by the green LED, the alarm, represented by a red LED, responds to the surrounding light conditions. Specifically, the red LED turns on when the environment is well-lit and remains off in darkness.

How the Alarm Works

Alarm Setting:
– The user sets the alarm by pressing the blue button.
– The green LED, confirms whether the alarm is actively set (green LED on).

Light Sensing:
– Once the alarm is set, the system relies on a Light-Dependent Resistor (LDR) to detect ambient light levels.

Alarm Activation:
– In a well-lit environment, the red LED, representing the alarm, activates,  turns on and off.

Alarm Deactivation:
– In darkness, the red LED remains turned off.

Components Used:
– LEDs: One red and one green
– Light-Dependent Resistor (LDR): Detects changes in ambient light conditions.
– Push-button Switch (Digital Sensor): Enables user interaction to set and unset the alarm.


Working on this project I better understand  the Arduino programming syntax, and analog input & output. Later when we learn to use sounds and music, I could include a sound for the alarm for better user experience.

Week 9: Reading Response

From these articles by Tom Igoe, it’s clear that physical computing offers immense creativity and excitement. The examples shared in the first article, “Physical Computing’s Greatest Hits (and misses,” introduced various creative possibilities that sensors and technologies offer in creating interactive projects. It was fascinating to see how simple touch, thermal, light, and sound sensors could be integrated into creative projects that evoke emotional responses in users. The concept of the “remote hugs” project was particularly intriguing. Although Igoe explained that the user didn’t quite feel hugged, this project succeeded in radiating positivity and satisfaction, aiming to engage users on an emotional level. I particularly appreciate the idea he raised that not everything has to be entirely original, but it can be improved upon and reimagined, which is inspiring. Therefore, I am more encouraged to explore projects that can bring positivity and emotion to users in innovative ways, even if they build on existing concepts.

The second article, “Making Interactive Art: Set the Stage, Then Shut Up and Listen,” explains interactive art’s interactivity and how it should be approached. In interactive art, the core message is to create a meaningful dialogue between the artist and the user. Allowing the user to explore and interpret the artwork without explicit guidance can lead to more satisfying experiences. I think this element of surprise and discovery is crucial in interactive art, enhancing user satisfaction. I also realized that open-ended interactive pieces are particularly suited to this approach, as users can uncover the artist’s intentions by exploring various features or come up with their interpretations. Also, one thing about interactive art is that the user feels engaged in creating something by interacting with the work, which makes the project much more fun and meaningful to the user. The article also touches upon user experience design (that we have learned from previous readings by Norman), such as providing interactivity hints. It is valuable advice as it ensures that users intuitively understand how to interact with the artwork.

Week 8: Creative Switch


The inspiration for this assignment came from a common problem: phone distractions while studying. I wanted to create a practical solution to keep my phone away during study sessions. To achieve this, I decided to make a phone stand with a built-in switch. When my phone is placed on the stand, the switch activates, turning on a red LED. This serves as a visual cue to remind me that it’s time to concentrate on my studies.

Process & Highlights:

  1. Materials Used: I gathered a few basic materials for this project, including a resistor, a red LED, foil paper and copper tape.
  2. Circuit Design: I sketched a simple circuit with a switch schema using these components. Then, I have made a simple circuit without a switch as we have done in class. And then, I have added my phone stand switch to the circuit.
  3. Switch Mechanism: To implement the switch, I used foil paper and copper tape. I used foil paper on the phone stand, connecting it to the circuit board. Copper tape was used to connect arduino UNO board and my phone. When I set my phone on the stand, the foil paper came into contact with the copper tape, effectively closing the circuit.


This assignment was a practical learning experience that reinforced my understanding of circuit and switch mechanisms. I think my implementation provided an effective solution to the issue of phone distractions during study sessions by using a simple LED cue.


Week 8: Reading Response

In the first reading by Norman, “Emotion & Design: Attractive things work better,” I found his exploration of the emotional aspect of design very interesting. Indeed, good design isn’t just about aesthetics or functionality; it’s also about how we feel when interacting with the product. Norman’s emphasis on the importance of considering users’ emotions and needs, particularly in high-stress situations, highlighted the human-centered nature of design. I particularly appreciated his vision for the future: “Let the future of everyday things be ones that do their job, that are easy to use, and that provide enjoyment and pleasure”. This statement is a good reminder of how important the design itself is depending on the emotion and the situation in which the user is under and what kind of experience we, as developers, want to give the users.

The second reading, “Her Code Got Humans on the Moon,” further illustrated the idea that “we should not solely rely on users when designing technology.” Users can sometimes behave unpredictably, especially in high-pressure contexts like space missions. The story of Margaret Hamilton serves as a compelling example of how careful and well-planned design is vital for the success and reliability of complex systems. This reading reinforced my belief in the importance of meticulous design and efficient code to create technology that is not only robust but also user-friendly. It also highlights the need for proactive problem-solving and consideration of user behavior to achieve success in complex projects.