Week 14-FINAL PROJECT BLOGPOST

1.Concept

This project is a fast reaction game where the user controls a spacecraft without seeing the controls directly. The screen gives instructions like “press red, “flip switch,” or actions using Arduino sensors like “cover the light sensor” or “move closer.” The user has to read the command and quickly do the action on a physical console. It’s timed, so you need to react fast and accurately. If you’re right, the game continues, and if not, you lose. The idea is to make simple actions feel intense and engaging using both physical controls and sensor based interaction.

The idea for this project came from two places. First, Project Hail Mary inspired the feeling of controlling something important without fully seeing or understanding the whole system, just like how the main character has to react quickly and solve problems using limited tools. Second, the game Bop It influenced the fast‑reaction style of the gameplay. I liked how Bop It gives quick commands and forces the player to respond immediately, and I wanted to bring that same energy into a physical console using Arduino sensors and buttons.

2. Images/videos of project

 

3. A clear and well labeled schematic

4. User Testing videos (I need to see the whole experience/interaction in documented videos)

User testing

During user testing, I focused on watching how people actually interacted with the console. Most testers understood the button tasks immediately, but the light sensor and keypad made them pause for a second, which helped me confirm that the timing and difficulty were working as intended. I also noticed that some players pressed the buttons too lightly or at an angle, which made me reinforce the button mounts and secure the wiring so every press registered cleanly. This made the console feel more reliable and confident to use. Overall, the testing helped me refine the physical build.

5. How does the implementation work?

• Description of interaction design

The system works in a loop. First, the screen shows a command. Then the user reacts using the console or sensors. Arduino reads that input and sends it to p5. p5 checks if it’s correct and responds with the next step or a fail. This repeats quickly, so the user is always reacting and the system is always responding.The interaction design focuses on making the player react fast while switching between different types of physical actions. The player looks at the laptop for the command, but all the actual actions happen on the console, so there’s this constant back‑and‑forth between reading and doing. Each input feels different on purpose: buttons give a quick click, the light sensor needs a hand movement, and the keypad needs a press. This mix keeps the player alert because they never know what type of action is coming next. The Arduino keeps sending all the sensor and button data to the laptop, and the laptop checks if the player did the right thing. If they did, the game continues; if not, it stops. The LEDs give simple feedback so the player knows what’s happening without needing extra text. Overall, the interaction is meant to feel fast, physical, and a little stressful in a fun way, similar to the quick‑reaction style of Bop It but with the more “mission‑like” feeling inspired by Project Hail Mary.

• Description of Arduino code + code snippets + add link to Github full code

The Arduino code handles all the physical inputs and sends them to the laptop so the game can check if the player reacted correctly. It reads the buttons, the light sensor, and the keypad, then sends everything in one line over serial. I also remap the keypad using a small function so the keys match the layout I want. The Arduino listens for simple commands from the laptop to turn the LEDs on or off, which gives quick feedback to the player.

char fixKey(char key) {
  if (key == '1') return '1';
  if (key == '4') return '2';
  if (key == '7') return '3';
  if (key == 'A') return '4';
  if (key == 'B') return '5';
  if (key == 'C') return '6';
  if (key == '3') return '7';
  if (key == '6') return '8';
  if (key == '9') return '9';
  return 'N';
}

Code snippet I’m proud of

This was actually the part of the code I struggled with the most. My keypad didn’t match the number layout I wanted, and the values it was giving me felt completely random at first. I kept getting letters like A, B, C instead of the numbers I needed for the game. I tried rewiring and changing the library settings, but nothing fixed the layout. In the end, I realized the simplest solution was to write my own mapping function. So I made fixKey(), which basically translates the raw keypad output into the numbers I want. It looks simple now, but it took a lot of trial and error to figure out which key was actually sending what value.

Serial.print(ldrValue);
Serial.print(",");
Serial.print(greenState);
Serial.print(",");
Serial.print(blueState);
Serial.print(",");
Serial.print(yellowState);
Serial.print(",");
Serial.print(whiteState);
Serial.print(",");
Serial.println(lastKey);

I’m also proud of this part where I send all the sensor values, button states, and the last keypad key in one clean line. It took a lot of testing to get the order right and make sure nothing broke when the laptop tried to read it. This line basically keeps the game and the Arduino in sync, and if anything here is off, the whole game stops understanding the player’s actions. Getting this to work smoothly felt like a big win for me.

Github Link:https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/Final%20Project

• Description of p5.js code + code snippets + embedded sketch

My p5.js code controls everything the player sees and interacts with. It reads the data coming from the Arduino the light sensor, the four buttons, and the keypad and turns those raw values into actual gameplay. The code constantly listens to the serial port, updates the variables, and then checks if the player did the correct action based on the current command. It also sends simple characters back to the Arduino to trigger the LEDs, so the physical console reacts instantly when the player is right or wrong. All the timing, scoring, lives, and task switching happen inside p5.js, so this file is basically where the whole game logic lives.

The rest of the code handles the visuals and the flow of the game. I built multiple screens like the home page, instructions, how to, the main game, and the lose screen, and I switch between them using a simple screen variable referencing to my midterm since it had a similar game logic. I also added a star background animation to match the space theme, and I used sounds and a custom font to make the game feel more polished. Overall, the p5.js file ties the hardware and the visuals together so the game feels smooth and responsive.

let data = port.readUntil("\n");
if (data) {
  let values = data.trim().split(",");
  if (values.length == 6) {
    ldr = int(values[0]);
    greenButton = int(values[1]);
    blueButton = int(values[2]);
    yellowButton = int(values[3]);
    whiteButton = int(values[4]);
    keypadKey = values[5].trim();
  }
}

This snippet reads one full line from the Arduino, splits it into the six values, and updates all the inputs in the game. It’s the part that makes the whole system feel connected, because every button press and keypad input shows up instantly in p5.js.I’m proud of this part because it took a while to get the serial format stable, and once I figured it out, the game finally started responding smoothly. It made the whole project feel like a real interactive system instead of random signals.

function newTask() { //resets lights and picks a new task type
  send("r");
  send("g");

  let tasks = ["GREEN", "BLUE", "YELLOW", "WHITE", "LIGHT", "KEYPAD"];
  currentTask = random(tasks); //chooses one random task
  taskStart = millis(); //records when the task started

  if (currentTask == "KEYPAD") { //special case for keypad tasks
    let keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
    targetKey = random(keys);
    taskText = "Press " + targetKey;
  } else {
    taskText = "Tap " + currentTask.toLowerCase();
  }
}

This snippet shows how the game picks a new task by choosing one option from a list. It also resets the Arduino lights, saves the start time, and updates the text on the screen. For keypad tasks, it chooses a random number the player must press. This keeps the game unpredictable and makes sure every round starts with a simple, clear instruction

function correct() { //handles the whole reward flow when the player answers correctly
  feedbackActive = true; //activates the green feedback state
  score++; //adds one point to the score
  streak++; //increases streak because the answer was correct

  if (score > highScore) { //updates high score if the new score is higher
    highScore = score;
  }

  timeLimit = max(minTime, timeLimit - timeDecrease); //speeds up the game but never below minTime which I set 

  if (warningSound && warningSound.isPlaying()) { //stops warning sound if it's still playing
    warningSound.stop();
  }

  if (correctSound && correctSound.isLoaded()) { //plays the correct-answer sound if it's ready
    correctSound.play();
  }

  send("G"); //tells Arduino to turn green light on
  send("r"); //tells Arduino to turn red light off

  setTimeout(() => { //waits before resetting lights and generating next task
    send("g"); //turns green light off on Arduino
    newTask(); //moves to the next task immediately after correct answer
    feedbackActive = false; //turns off feedback state
  }, 400); //delay for feedback animation
}

This snippet shows what happens when the player gets a task right. The game adds to the score, increases the streak, and updates the high score if needed. It also makes the game a little faster by lowering the time limit, but never below the minimum you set. The function stops any warning sound, plays the correct sound, and sends signals to the Arduino to show green feedback. After a short delay, it turns the light off, starts a new task, and ends the feedback state so the game can continue smoothly..

Screen shots from p5js:

 

Description of communication between Arduino and p5.js

The Arduino and p5.js talk to each other through the serial port. The Arduino sends one line of data every loop that includes the light sensor value, all the button states, and the last keypad key. p5.js reads that line, splits it by commas, and uses each value to check if the player did the right action. When p5.js needs to give feedback, it sends a single character back to the Arduino, like “R” or “G,” and the Arduino turns the LEDs on or off. The whole game depends on this back‑and‑forth, and once the format was stable, everything stayed in sync.

6. What are some aspects of the project that you’re particularly proud of?

I’m proud of three main things in this project. The first is fixing the keypad. It gave me the most trouble because the values didn’t match the layout at all, and it took a lot of trial and error to figure out a mapping system that actually worked. It looks simple now, but getting there took patience.

The second thing is the physical design of the console. I wanted it to feel clean and easy to use, and I think the mix of buttons, the light sensor, the keypad, and the LEDs makes it feel like a real control panel. Seeing it come together physically was really satisfying.

The third thing I’m proud of is getting the communication between Arduino and p5.js to work smoothly. At first, the data kept breaking or coming in the wrong order, but once I figured out a stable format, everything synced perfectly. It made the whole game feel responsive and reliable.

7. Links to resources used

Fullscreen:

https://p5js.org/reference/p5/fullscreen/#:~:text=fullscreen,such%20as%20a%20mouse%20press.

Stars background:

https://editor.p5js.org/robert0504/sketches/srSzgJcCS

Game concept:

https://editor.p5js.org/skgmmt/sketches/Sk5VaX2yN

For Keypad:

Using a Keypad with Arduino

https://www.circuitbasics.com/how-to-set-up-a-keypad-on-an-arduino

https://www.ibm.com/docs/en/zos/2.5.0?topic=statements-return-statement

Arduino:

Analog input:https://docs.arduino.cc/built-in-examples/basics/AnalogReadSerial/

Button:https://docs.arduino.cc/built-in-examples/basics/DigitalReadSerial/

P5js:

Connecting arduino :https://editor.p5js.org/aa11972/sketches/YcwX3DgTK

Audio:https://p5js.org/reference/p5/loadSound/

Light Sensor:https://www.build-electronic-circuits.com/arduino-light-sensor/

8. Proper and detailed referencing of any use of AI tools (how were they used? Where?)

I used AI for fixing the keypad. The keypad was completely bugging, and nothing I tried was working. I rewired it, changed the rows and columns, and even tested different key pads, but the keys were still giving random values that didn’t match the layout. I used Ai to help me understand how to check each key through the Serial Monitor and see what character it was actually sending. Once I had that information, I mapped the keys myself and translated it into my official Arduino code using the fixKey() function.

9. Challenges faced and how you tried to overcome them

The biggest challenge I faced was the keypad. It was giving completely wrong values, and nothing I tried fixed it. I rewired it, flipped the rows and columns, and even tested different libraries, but the keys still didn’t match the printed layout. It was honestly really frustrating. I ended up using the Serial Monitor to check what each key was actually sending, and once I had that, I created my own mapping system in the Arduino code. That finally made the keypad usable.

Another challenge was one of the buttons breaking. It kept giving inconsistent readings, and sometimes it wouldn’t register at all. I tested the wiring, changed the resistor, and eventually replaced the button completely. After that, the input became stable again. Both issues took time, but solving them helped me understand the hardware better and made the final console more reliable.

10. What are some areas for future improvement?

For future improvement, I would like to add more diverse interactions so the game feels less predictable. Right now, the inputs work well, but adding things like sliders, switches, or buttons with built‑in LEDs would make the console more interesting to use. I also want to upgrade some of the components so they feel more solid and don’t break as easily. Overall, the system works, but adding more variety and better hardware would make the whole experience smoother and more fun.

 

 

 

User testing

User testing with no instructions:

When two users tried my project without any instructions, both were able to figure out how to navigate it. The p5.js screen made it clear what action was required, so they understood that they had to respond to what they see on the screen. One user was able to move through the interaction smoothly and quickly connected the on screen commands to the physical controls like the buttons and keypad.

The other user showed some hesitation at the beginning. They got confused when instructions appeared quickly or were repeated, especially when multiple inputs were introduced at the same time. This made the experience feel slightly overwhelming in that moment. Even then, they were still able to understand the system after a short time. Both users understood the mapping between the controls and what happens in the experience, but one needed more time to adjust. This shows that the interaction is intuitive but depends on the user’s familiarity with fast paced games.

What worked well and what could be improved

Several parts of the experience worked well. The card interaction, LEDs, and overall input and output system were clear and responsive. The home page and flow of the experience helped guide the user, and the audio added an important layer by giving clear feedback for actions. These elements made the experience feel engaging and easy to follow once the user started playing.

One area that could be improved is the clarity of the instructions. Making them more specific and slightly more paced would help users who are less familiar with this type of interaction. Another important improvement is the stability of the buttons. When users started playing faster, the buttons sometimes shifted or felt less secure, which could interrupt the experience.

Reinforcing the buttons and making them more stable would make the interaction feel more reliable and comfortable. This was clear during testing and also when I disassembled and reassembled the project, which helped me better understand how to improve the physical setup.

What needed explanation and how to improve

Most parts of the project did not need explanation because users were able to understand them through interaction and feedback. The main part that needed explanation was the card. Since it is a separate component, users did not immediately understand how it works or what action triggers it.

To improve this, I could make the card interaction more clear by adding more detailed instructions or clearer visual cues. For example, showing a clearer message on the screen when the card is needed or adding simple labeling near the sensor would help users understand it faster. This would make the experience more accessible for first time users without changing the core interaction.

 

User one:

 

 

User two:

https://vimeo.com/1188956184?share=copy&fl=sv&fe=ci

Final Project Proposal

Finalized Concept

My final project is called Spacecraft Mission Control System. It is a fast paced spacecraft control game inspired by Bop It, where the player has to react quickly to different commands. The game will use different physical inputs like colored buttons, a buzzer, a keypad, a light sensor, and hopefully a distance sensor.

The player will receive tasks from the p5.js screen, such as pressing a specific button, entering a code on the keypad, covering the light sensor, or moving their hand near the distance sensor. I want the game to feel like the player is controlling a spacecraft under pressure, where every action matters. If the player gets the task correct, a green LED will light up. If they get it wrong, a red LED will light up. The buzzer will also give sound feedback so the game feels more interactive.

Arduino Program Design

The Arduino will control the physical part of the game. It will read inputs from the colored buttons, keypad, light sensor, and distance sensor. The colored buttons will act as simple commands, like pressing the red, blue, or yellow button when the screen tells the player to. The keypad will be used for code based tasks, where the player has to type a number code to complete the mission. I ordered a keypad from Amazon, and I will try to implement it. If l struggle with the keypad.

For the light sensor I plan on creating a cover, so the player can physically cover and uncover it as part of the game. The distance sensor can be used for tasks like moving the hand closer or farther away. The Arduino will also control the buzzer, red LED, and green LED. It will send the player’s actions to p5.js and receive signals back about whether the answer was correct or incorrect.

P5.js Program Design

The p5.js program will be the digital screen for the game. It will show the title screen, game instructions, current mission, timer, score, and warning messages. The visual style will be a space mission control screen, with a moving star background and a full screen option. p5.js will send the current task to Arduino, such as “press red button, “cover sensor,” or “enter code.” It will also receive information from Arduino about what the player did. For example, if the player presses the red button, Arduino sends that input to p5.js. Then p5.js checks if it matches the current task. If it is correct, the score increases and p5.js sends a correct signal to Arduino so the green LED and success sound can turn on. If it is wrong, p5.js sends an incorrect signal so the red LED and error sound can turn on.

Progress So Far

So far, I finalized the main concept and decided that the project will be a spacecraft themed reaction game. I also planned the main inputs and outputs I want to use. I ordered the keypad and other materials from Amazon, and I will test whether | can connect the keypad properly. My next step is to test each input separately first, then combine them into one working game system.

Breakdown of things I ordered

For my project, I bought a push button kit, keypad module, and an active buzzer to create the main game interactions and feedback. I also purchased a pre wired multicolor LED for clear visual responses, along with jumper wires and a sensor starter kit for connections and extra components. Additionally, I got a display module to show simple messages or tasks. For the physical design, I will use cardboard and colored paper to build the spacecraft control panel.

Generated image of how it would look physically:

 

 

 

 

 

Amazon links

https://amzn.eu/d/0hpevbaT 22.6USD

https://amzn.eu/d/00tJPOo5 4.9USD

https://amzn.eu/d/06RK8ekP 4.08USD

https://amzn.eu/d/03ujSIRs 12.52USD

https://amzn.eu/d/05gqbmon 6.26USD

Total 50.37USD

P5js:

I began working on the home screen and instructions page and added the full screen feature and font.

Arduino:

I began setting up the basic inputs and outputs for the Arduino focusing on reading button inputs and triggering LED and buzzer feedback for the correct or incorrect responses.

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/draft.ino

Sources so far:

Fullscreen:

https://p5js.org/reference/p5/fullscreen/#:~:text=fullscreen,such%20as%20a%20mouse%20press.

Stars background:

https://editor.p5js.org/pavly/sketches/hzCu0enCy

Game concept:

https://editor.p5js.org/skgmmt/sketches/Sk5VaX2yN

For Keypad:

Using a Keypad with Arduino

Week 11- PRELIMINARY CONCEPT BLOGPOST

Concept

This project is a fast reaction game where the user controls a spacecraft without seeing the controls directly. The screen gives instructions like “press red, “flip switch,” or actions using Arduino sensors like “cover the light sensor” or”move closer.” The user has to read the command and quickly do the action on a physical console. It’s timed, so you need to react fast and accurately I might add more elements like once you get over 10 points youll have to start memorizing three tasks at the same time or have new rules added. If you’re right, the game continues, and if not, you lose. The idea is to make simple actions feel intense and engaging using both physical controls and sensor based interaction.

How it uses Arduino

Arduino handles all the physical interaction. It reads inputs from buttons, a switch, a knob, and sensors like a light or distance sensor. For example, if the user presses a button or covers the light sensor, Arduino detects that and sends the data to p5. It also controls LEDs to give feedback, like turning on a light when the user is correct.

How it uses p5.js

p5 is the visual and logic part of the project. It shows instructions on the screen like “PRESS RED” or “MOVE CLOSER.” It randomizes the commands so the game changes every time its still early on on the project so I might hav ethe commands show on screen or on an actual screen next to the control panel or both i’ll decide on which to go with on both depending on what works best. It also checks if the user did the correct action and controls the flow of the game, like score, timing, and game over. It can also send signals back to Arduino for feedback.

Interaction Design

The system works in a loop. First, the screen shows a command. Then the user reacts using the console or sensors. Arduino reads that input and sends it to p5. p5 checks if it’s correct and responds with the next step or a fail. This repeats quickly, so the user is always reacting and the system is always responding.

Inspiration and Originality

This idea is inspired by Bop It, where you follow quick commands like “twist it” or “Spin It” I liked how simple actions become intense when you have to react fast. It’s also inspired by Project Hail Mary, especially the scene where the character is pressing buttons and flipping switches to control the spacecraft under pressure. My project builds on this by adding different sensors, like light and motion, so the interaction is more varied and not just buttons.

Visual and Aesthetic Direction

The visuals will be simple and slightly retro, like an old spacecraft system. The screen will have big, clear text so the user can quickly read what to do. I won’t focus on complex graphics, just clean visuals that support fast interaction and make the game feel intense.

Why this project works

This project works because it combines physical interaction with fast response. The user is actively doing actions, not just watching. It uses Arduino for sensing and p5 for visuals and logic, so both are important. It also gives clear feedback and keeps the user engaged through speed and randomness.

Generated sketch :

 

Examples and tutorials found:

https://www.instructables.com/The-Task-Giving-Arduino-Machine-aka-Making-Your-Ow/

https://projecthub.arduino.cc/Jerepondumie/make-an-arduino-memory-game-c9c093

Week11- Exercise 1, 2, and 3

Exercise 1

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise1

Arduino Set-up:

Arduino Illustration:

Screenshot

Project Demo:

Exercise 2

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise2

Arduino Set-up:

 

Arduino Illustration:

Project Demo:

Exercise 3

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/week11-exercise2

Arduino Set-up:

Arduino Illustration:

Project Demo:

Concept

This week was all about making things communicate. Before this, everything we made stayed inside Arduino. This time, we connected Arduino to p5 so the physical and digital sides could talk to each other.

At first it sounded simple, but it ended up being one of the hardest things we’ve done so far. Not because of the ideas, but because getting everything to connect properly took a lot of trial and error.

Exercises

Across the three exercises, we explored different ways of communication.

In the first exercise, we sent data from Arduino to p5. We used the potentiometer to move a circle across the screen. This helped us understand how sensor values can control something visually.

In the second exercise, we reversed the direction. p5 controlled the LED on Arduino. This made us realize that communication goes both ways, and that sending data is just as important as receiving it.

In the third exercise, we combined both directions. The potentiometer controlled movement in p5, and when something happened on the screen, it sent a signal back to Arduino to turn on the LED. This was the most interesting part because everything was connected and reacting together.

Code Highlight

One part that really helped us was reading the sensor data correctly in p5

let str = port.readUntil("\n");

if (str.length > 0) {

  str = trim(str);

  let sensorValue = int(str);

  if (!isNaN(sensorValue)) {

    x = map(sensorValue, 0, 255, 0, width);

  }

}

This made sure we only used valid data and mapped it properly to the screen. Once this worked, everything became much smoother.

Problems Encountered

We had a lot of issues this week, mostly with the connection. The serial port wouldn’t open, or p5 wouldn’t receive any values. Sometimes things worked and then suddenly stopped working again.

We realized most of these problems were small things, like forgetting to close the Serial Monitor or not formatting the data correctly.

Reflection

This week helped us understand that interaction is not just about building something, but about connecting things together. Once the connection worked, everything felt more interactive and responsive.

It also made us more patient with debugging. We learned to check things step by step instead of assuming something bigger was wrong.

Collaboration

We worked on this together, which made a big difference. When one of us got stuck, the other could help figure out what went wrong. It also made debugging less frustrating because we weren’t trying to solve everything alone.

Working together helped us understand the system better and move forward faster.

References

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js Web Editorhttps://editor.p5js.orgp5 to Arduino

p5.js and Arduino serial communication – Send a digital sensor to a p5.js sketchYouTube · Scott Fitzgerald28 Mar 2020

Reading Reflection- Design meets disability

One idea that really stood out to me from Design Meets Disability was the concept of the “golden hand,” especially in the contrast between traditional prosthetics and more expressive designs like Jacques Monestier’s.

What I found interesting is how this shifts prosthetics from something purely functional into something aesthetic and personal. It shows that design doesn’t have to choose between function and beauty it can combine both. As someone with a background in art, this made me think about how designers can transform assistive devices into something meaningful, almost like a canvas for self expression rather than just a medical tool.

Another thing that stood out to me was how the reading emphasizes that artists bring a different perspective to engineering. They focus not just on how something works, but on how it feels and what it represents. This made me reflect on our current Arduino project, where it’s easy to focus only on the technical side, but there’s also potential to incorporate materials and design to make it more visually and personally expressive. The reading also highlights that these designs shouldn’t just be treated as objects, but as personal belongings especially in the case of prosthetics, which are part of someone’s identity. That idea really shifted my thinking, because it suggests design should allow for individuality and expression, rather than trying to hide difference.

Reading Response-Follow Up

It was interesting to see that the author wasn’t trying to provide a solution, but instead wanted to raise awareness of the problem and push further research. He emphasizes that current tools aren’t fully taking advantage of human capabilities, and when discussing things like physical keyboards or styluses, he dismisses them as not being “dynamic mediums.” This made me think about interactive media, where we experiment with more dynamic forms of interaction by combining physical inputs, sensors, and outputs to create systems that respond in real time.

However, I don’t fully agree with his view on voice. While he limits it to simple commands, I think voice has potential as a more dynamic form of interaction, especially when combined with other inputs. When he talks about the three categories of gestures, it reminded me of things like voice assistants, where we use a kind of “vocabulary” to communicate with the system, similar to saying commands like “Hey Siri.” The idea of spatial gestures at a distance also connects to examples we briefly saw in class, where movement controls objects on a screen, even if it can feel indirect. The last example, directly manipulating a virtual 3D space like Iron Man, was a bit confusing to me, but it shows a more ambitious and futuristic idea of interaction. Overall, even though he critiques these methods, I think they still have potential, especially when combined together, rather than being dismissed individually.

Reading Response-The future of interaction design

What stood out to me was the idea that tools should be designed around what humans are actually capable of doing, not just what technology can do. When he said “if a tool isn’t designed to be used by a person, it can’t be a very good tool” it made me think about how often we accept interfaces that don’t fully match how we naturally interact with the world.

For example, with touchscreens, most interactions are reduced to tapping or sliding, which feels limited compared to how expressive our hands actually are.

This connects to what we’ve been doing in class with circuits and Arduino, where interaction feels more physical and responsive. When building circuits, we’re not just coding something to appear on a screen we’re creating systems where human actions, like touching foil or changes in light, directly affect outputs like LEDs. In my project, I used inputs and conditions to map real world interactions to responses, which felt more aligned with how we naturally engage with objects. This reflects the idea of amplifying human capabilities, because the system responds to touch and environmental changes rather than limiting interaction to a flat surface. It also made me realize that even simple projects like ours explore more meaningful interaction than typical touchscreen interfaces, since they involve feedback, physical input, and a closer connection between the user and the technology.

Week 10- Group Assignment

Arduino GitHub File:

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/sketch_ap12_Week10.2.ino

Arduino Set-up:

 

 

Project Demo:

Images

Concept

This project is a simple musical instrument that uses both digital and analog input at the same time.

The button acts as the digital sensor because it only has two states, either pressed or not pressed. When we press it, the sound plays, and when we release it, the sound stops.

The potentiometer acts as the analog sensor because it gives a continuous range of values instead of just two states. We used that range to select different musical notes, so turning the knob changes the pitch.

What we liked about this setup is that both inputs have completely different roles. The button controls when the instrument is played, while the potentiometer controls what sound is produced. It made the difference between digital and analog feel really clear and actually useful.

Code Snippet We’re Proud Of

int index = map(potValue, 0, 1023, 0, 7);

if (buttonState == LOW) {

  tone(buzzerPin, notes[index]);

} else {

  noTone(buzzerPin);

}

 

This part is where everything comes together. The potentiometer gives a value from 0 to 1023, and we use map() to convert that into a smaller range that matches the number of notes we have. Then we use that number to pick a note from the array.

At the same time, the button decides whether the note should actually play. So one input controls the pitch, and the other controls when the sound happens, which made it feel more like a real instrument instead of just a buzzer making random noise.

Problems Encountered

The biggest challenge was honestly the wiring. Even when everything looked right, one wire in the wrong row would break the whole circuit. We had to be really precise with the breadboard and double check every connection.

The button also gave us trouble at first. It either didn’t work or stayed on all the time, and we realized it was because of how it was placed across the gap and which rows we were using. Once we fixed that, it started behaving correctly.

Another challenge was understanding how the potentiometer connects to the sound. At first it felt random, but once we understood that the Arduino reads values from 0 to 1023 and that we needed to map that to our notes, it made a lot more sense.

Reflection

This project helped us actually understand the difference between digital and analog input instead of just memorizing it. The button made sense as something binary, while the potentiometer showed how values can change continuously.

It also made us more comfortable working with sound. Before this, the buzzer just felt like something that makes noise, but now we understand how pitch is controlled and how different inputs can affect it.

If we were to improve this project, we would probably expand the number of notes or organize them into a more structured scale so it feels more like a playable instrument.

Overall, it was a really successful assignment and working in pairs made it a lot easier to think and refine ideas and carry each other throughout the trial and error process of the entire project!

References

https://projecthub.arduino.cc/SURYATEJA/use-a-buzzer-module-piezo-speaker-using-arduino-uno-cf4191

Arduino Project | Play Melody with Passive buzzer using Arduino UnoYouTube · IoT Frontier3 Jul 2023

YouTube · Tech Explorations1.3K+ views  ·  1 year ago[240] Arduino Getting Started: Make noise and beeps with the passive buzzer

Week 9- Analog and Digital

Github link

https://github.com/MouzaAlMheiri/Intro-to-IM/blob/main/Week%209-%20Digital%20and%20Analog

Concept:

For this project, I knew I wanted to combine what we learned in class with something I could build on myself. I decided to use a light sensor to control one of the LEDs and a switch to control the other LED. This allowed me to explore both types of input in one system.

The interaction is split into two parts. One LED is controlled digitally using the switch, meaning it turns fully on or off. The second LED is controlled using the light sensor, where its brightness changes depending on the amount of light detected. This means one LED is controlled digitally, while the other is controlled in an analog way.

By combining both digital and analog inputs in the same project, I was able to create a system that shows the difference between these two types of control

Code Im proud of:

 // if statment so that the LED can be controlled digitally by switch
 if (switchState == LOW) {
   digitalWrite(digitalLED, HIGH);
 } else {
   digitalWrite(digitalLED, LOW);
 }

 // read light sensor
 sensorValue = analogRead(ldrPin);
 Serial.println(sensorValue);

 // keep readings in my range
 sensorValue = constrain(sensorValue, 330, 650);

//when its reads the light if its dark the LED will be bright and light the LED will be dimmer 
 brightness = map(sensorValue, 330, 650, 255, 0);

 // sets the analog LED brightness
 analogWrite(analogLED, brightness);

The part of the code I am most proud of is the section where I used the if statement together with the light sensor readings to control the LEDs. In this part, I was able to combine both digital and analog inputs in one system.

I used the if statement to control the digital LED based on the switch input, which helped me understand how conditional logic works in Arduino. At the same time, I used analogRead () to read values from the light sensor and store them in a variable. I then applied constrain () to keep the readings within a specific range, and used map () to convert those values into brightness levels for the LED.

This allowed me to control the second LED in an analog way, where its brightness changes depending on the light in the environment. This part of the code reflects what we learned in class, but I was able to apply it on my own and integrate it into a larger system. I am proud of this because I was able to understand how the sensor values translate into output and use that to create a smooth and responsive interaction.

Process :

I first began by deciding what I wanted to include, which I knew was a light sensor and a switch. I wanted to make sure I was using both types of inputs that we learned in class.

I then started by setting up my breadboard and making sure it had power. I connected 5V from the Arduino to the positive rail on the breadboard, and then connected a black wire from GND to the negative rail to complete the circuit.

After that, I began building the circuit itself. I started with the light sensor, making sure it was connected to the analog pin AO.I added a 10k resistor to create the voltage divider, and then added a wire to connect it to power.

Next, I connected the switch. I made sure it was connected to a digital pin on the Arduino, and I added a black wire from the switch to ground so that it could complete the circuit when activated.

Finally, I added the two LEDs. Each LED was connected with a 330 resistor to protect it. At this point, the full circuit was complete, with the light sensor controlling one LED and the switch controlling the other.

Reflection/ Future:

This project helped me better understand how to use different parts of the Arduino Uno board, especially the difference between digital and analog pins. I was able to use both types in one system, which is something I think will be very useful in future work. It made me more confident in connecting components and understanding how the hardware and code work together.

I also learned how different types of inputs can create different kinds of interactions. The digital input was simple and direct, while the analog input required more thinking and allowed for more gradual control. This helped me see how I can design more dynamic and responsive systems in the future.

In future projects, I would like to experiment with combining more sensors or creating more complex interactions between inputs and outputs. I also want to explore how I can make the system more interactive or meaningful, possibly by connecting it to a real world use case or adding more complexity to the design.

 

Photos:

Video:

https://vimeo.com/1188360854?share=copy&fl=sv&fe=ci

 

Drawn circuit

Digitalcircuit

:

Refrences:

https://electronicsclub.info/circuitsymbols.htm

https://www.pcbasic.com/blog/led_symbol.html