For this assignment, we wanted to go with something simple. Rashed is known for his love for music so I was excited to see what we would come up with. During our brainstorming session, Rashed was doing his hobby – which is music production- on his phone on GarageBand and he noticed how he had to click on the “arrow” button to change the pitch of the piano and we decided we wanted to do something like that but with the potentiometer.
The pitch-changing arrow I was referring to on GarageBand:
Materials used:
x11 Wires
x4 Buttons
x4 10k Resistors
x1 Buzzer
x1 Potentiometer
Production:
Writing this code was pretty challenging for us as both of us are still adapting to this new language.
We used the toneMelody example from the examples folder that we used in class to take the “pitches.h” tab from it in order to give a specific range. We collectively decided to have the buttons, by default, be the most basic notes “Do, Re, Me, Fa” also known as “NOTE_C4, NOTE_D4, NOTE_E4, NOTE_F4” which was pretty simple to implement.
However, we faced one major issue:
For some reason, the potentiometer would not cooperate at all. The buttons were working fine, but the pitch won’t budge. We, unfortunately, had to use ChatGPT to help us but it was still very helpful in helping us understand what we were doing wrong.
Here’s the code:
#include "pitches.h"
const int speakerPin = 9; // Speaker connected to pin 9
int buttonPins[] = {2, 3, 4, 5}; // Button pins for notes
int potPin = A0; // Potentiometer connected to A0
// Initialize an array of notes that will be used depending on the button press
int noteIndices[] = {NOTE_C4, NOTE_D4, NOTE_E4, NOTE_F4}; // Starting notes for each button
void setup() {
for (int i = 0; i < 4; i++) {
pinMode(buttonPins[i], INPUT_PULLUP); // Setup button pins as input with pull-up resistor
}
pinMode(speakerPin, OUTPUT); // Set speaker pin as output
}
void loop() {
int potValue = analogRead(potPin); // Read the current value from the potentiometer
int noteRange = NOTE_C6 - NOTE_C4; // Define the range of notes to span
int noteOffset = map(potValue, 0, 1023, 0, noteRange); // Map potentiometer value to note range
for (int i = 0; i < 4; i++) {
if (digitalRead(buttonPins[i]) == LOW) {
int noteToPlay = noteIndices[i] + noteOffset;
tone(speakerPin, noteToPlay); // Play the note on the speaker
delay(200); // A short delay to help debounce the button
while (digitalRead(buttonPins[i]) == LOW); // Wait for button release
noTone(speakerPin); // Stop the note
}
}
}
Here’s the video where we use it:
Reflection:
I think, despite chatGPT’s involvement in this, we did pretty well; the concept was there, the energy and effort that was put into this is there and we’re both proud of our little creation. However, we both do with we took it a step further and maybe added more buttons or tried to use the sensor instead of the potentiometer. We really hope to get used to and adapt to this language.
I am not sure how feasible is this idea. However, I want to display the silhouettes of the hand’s actions through the LED lights. As the hand moves, the lights will light up based on the changes of location of the hand. Below is an illustration of the idea:
The way the hand moves will decide on how the light will behave. I am intending to use the ML5 library from p5.js to track the hand movements. The data return from the library function will be mapped into the LED lights that will light up accordingly.
Map Drawing
I want to have p5js as a drawing tool that can decide on the path that the 4-wheel motor model can run on. However, I want this to be drawn using the hands in the air, using different libraries in p5js. Then the data can be transferred to the model to allow the motor to run. Also, the model will have distance sensor to detect any blockage in the pathway to stop accordingly.
Push the button, it screams. Turn the knob, and it screams even louder. For this week, we decided to create a sound/musical instrument that is controlled by a button and potentiometer.
Concept
We decided to call our machine “Mr.Problematico” because of the issues we encountered while building this machine. The premise is simple: We have a potentiometer that controls the pitch and a button that plays/stops the music.
Demo & Schematics
How it works
In the code, we mapped the potentiometer to 20 different notes. Then, we created an if-else statement, which plays a music function playMusic, whenever the button is pressed and does not play the music whenever it is not pressed.
In the music function, we played the note based on the value received by the potentiometer (value) and turned on the light as well.
// Map the potentiomenter values according to the list length.
int note = map(pontValue, 0, 1023, 1, 21);
// If button is pressed, then play a sound according to the potentiometer.
if (buttonState == HIGH) {
playMusic(note);
//Serial.print("HIGH \n");
}
else if (buttonState == LOW) {
//Serial.print("LOW \n");
}
}
//Play the tune, wait a specific time and light the LED according to the
//arrays of melodies and duration. In other words, the LED and the sounds generated are synchronized.
void playMusic(int value) {
int noteDuration = 1000 / noteDurations[value];
digitalWrite(13, HIGH);
tone(8, melody[value], noteDuration);
digitalWrite(13, LOW);
delay(noteDuration);
}
Closing Remarks
During our building time, we spent a lot of hours trying to figure out why our machine decided to stop very long when we executed the music function. After some consultation, the delay function delays the whole machine rather than the code line. We tried to play and go around trying to fix this weird delay. We figured out that by missing a resistor to the button that messed up the whole circuit, before eventually creating the machine above. It was not completely the code’s fault but rather our miss information.
We’re quite proud of this project. Looking forward to the final project!.
I would like to create a game inspired by popular TikTok challenges where users try to replicate the color of various objects by blending multiple colors. In this game, players will attempt to guess the RGB (Red, Green, Blue) values of a color displayed on their monitor. The interface will include three potentiometers, each dedicated to adjusting one of the RGB components. The goal is for players to match their potentiometer settings to the actual RGB values of the displayed color as closely as possible. Success in achieving a close match will result in a win.
Save the Cat
Inspired by Pou, a game I often played as a child, I would like to create a game where the user rescues an abandoned kitten from the street and helps it find a loving family. This game would consist of three stages:
Picture of Pou
Washing the Kitten: Using a potentiometer, the user must control the water temperature to find the perfect warmth for washing the kitten.
Medical Treatment for the Kitten: The user will be presented with several choices (e.g., bandages, pills, and ice packs). Based on the kitten’s condition, the user must make appropriate decisions about which items to use, facilitated by button switches.
Finding a New Family for the Kitten: The goal is to find a kind-hearted family with positive characteristics. This stage involves a game where the user uses a joystick to avoid bad qualities and collect good ones.
Steak Cooking Game
Inspired by Cooking Mama, one of my favorite games from my childhood, I aim to create a steak cooking game. This game would consist of three stages:
Buying Ingredients: This stage is similar to the dinosaur game that appears when there is no internet. Obstacles and ingredients move towards the user, who must use a button switch to dodge the obstacles and collect the necessary ingredients.
Cooking the Steak: Initially, the user must start a fire using a potentiometer, adjusting it to find the ideal heat level for the steak. The user must then cook the steak on the grill using button switch, being cautious not to burn or undercook it.
Applying Sauce to the Steak: In this final stage, the user uses a pressure sensor to apply the right amount of sauce to the steak.
Heartbeat-Based Music Player
In this project, I will use a pulse sensor to obtain the user’s heartbeat data. The system will then ask the user to select their mood from four options: happy, sad, angry, or calm. Based on these inputs, the system will recommend music to the user.
Due to the development of technology, people are having less and less contacts with the actual environment. Therefore, we are getting more familiar with the sensory of the plastics and glass screen rather the actual environment. We are more familiar with see images through a glass screen (and nowadays we have VR/AR technologies to replace that). Hence, it seems that we start to forgot how to interact with the actual objects and environment.
Take the hand as the example. The hands in the futuristic environment are used as an intermediate tool to have a visually satisfied results. However, why should the hands have only that limited functionality (only touches)? As mentioned in the reading, the hands can understand the change in patterns, change in weight. It is very sensitive to any changes. Therefore, why don’t make it to be responsible for more interactive things.
I believe that the potential for changing the ways we interact with technology is really significant. Interactivity does not necessary comes from the screen itself. It is how the user interact with it. Therefore, the technology should be the intermediate tool for any actions that will be carried out by the audiences. Physical computing seems to be a possible way to do that. While using the hardware materials as the central technologies, the actions and sensory are experienced by the users.
Finally, this is not to say that all of the current technologies of tablet and laptop are the terrible choices. My point is that those technologies shall not be the main attention of our interaction with any media and technology.
For this assignment, I was inspired by the lighting system in my car. The headlights can be turned on automatically, but my car can detect darkness/brightness to turn them off or on automatically. This means, for example, that if I enter a dark tunnel during the day, the headlights will automatically turn on.
So, I thought I’d create some sort of system where in darkness, a LED turns on, while in brightness, the LED turns off. Simultaneously, there is another LED which can be toggled on and off with a button. That would be in the case that the analog LED is not displaying the result that the user wants, and therefore the user can turn it on or off manually, replicating the headlight system in my car.
int sensorLEDPin = 11; // Photosensor LED
int buttonLEDPin = 13; // Button LED
int buttonPin = 2; // Pin connected to button
bool ledState = false; // LED state; boolean variable
bool lastButtonState = HIGH; // Last state of the button; boolean variable
void setup() {
Serial.begin(9600);
pinMode(sensorLEDPin, OUTPUT); // Setting output pins
pinMode(buttonLEDPin, OUTPUT);
pinMode(buttonPin, INPUT_PULLUP); // Setting the initial state of the button as HIGH
}
void loop() {
int sensorValue = analogRead(A3);
sensorValue = constrain(sensorValue, 390, 640); // Constraining the sensor value
int brightness = map(sensorValue, 390, 640, 255, 0); // Mapping the sensor value to brightness so that when it is dark, LED is brighter
analogWrite(sensorLEDPin, brightness); // Uses the sensor to determine brightness
int buttonState = digitalRead(buttonPin); // Reading current state of the button (HIGh or LOW)
if (buttonState == LOW && lastButtonState == HIGH) {
ledState = !ledState; // Toggling the state of Button LED
delay(50);
}
lastButtonState = buttonState; // Updating the last state to be the current state
digitalWrite(buttonLEDPin, ledState ? HIGH : LOW); // Control LED based on button
Serial.println(sensorValue);
delay(100);
}
The game itself will be a basic platform game. I’ll program a character to move left, right, and perhaps jump on the screen using the control structure. The Arduino will be the bridge between the physical controller and the digital world.
Here’s how it works: on the Arduino side, I’ll connect tactile buttons (for actions like jumping, attacking) and a joystick (for movement) to the board’s input pins. The Arduino will then read the button presses and joystick movements, interpreting them as game commands. This information is then packaged into a simple data structure and transmitted to the computer via a serial connection.
On the p5.js side, running in the web browser, the program will be set up to receive this data stream from the Arduino. It will decode the data to understand which buttons are pressed and the joystick’s position. Based on these inputs, the p5.js code will control the movement and actions of the game character on the screen.
This project combines the familiar feel of physical buttons and a joystick with the creative potential of p5.js to create a unique interactive game experience. I am also thinking of expanding on this concept by adding more buttons, different control schemes using the joystick axes, and more intricate game mechanics, along the course.
First of all, I found it very interesting that ‘A Brief Rant on the Future of Interaction Design’ and its follow-up article were written in 2011. In these readings, the author ‘rants’ about a ‘handheld device’ that ignores our hands, advocating instead for a dynamic medium that we can see, feel, and manipulate. It was intriguing how the author ranted about things that have now become a reality. When I first saw the article, I was surprised at how much the video entitled ‘Microsoft- Productivity Future Vision,’ which the author was quite skeptical about, resembles our present.
Both readings made me reflect on all my interactions with the ‘picture under the glasses.’ At the start of the article, I found myself disagreeing with the author’s argument, as I thought that all those simple interactions that the picture under the glasses offers are the ultimate form of interaction. As the author states, interactions with these devices do numb my fingers. However, I had never considered them numbing my tactile sense before reading this article.
Then, the sentence stating ‘My child can’t tie his shoelaces, but can use the iPad’ struck me. I perceived this sentence as a clear illustration of the consequences of tactile numbing while utilizing those ‘pictures under the glasses.’ While tying shoelaces isn’t a hard task, it does require tactile sensation. To young children, who are accustomed to iPads, they might not develop the tactile richness they should have. This could mean that these ‘pictures under the glasses’ might hinder people from developing the capabilities they ought to have.
As stated in one of the readings, I believe that a good tool should address human needs by amplifying human capabilities. However, in the case of those ‘pictures under the glasses,’ can we say that these are good tools in terms of interaction if they hinder us from realizing our full capabilities? Can they even be considered human-centric if they neglect the need for our hands to feel things?
These questions arose for me. Then, I came to realize that we tend to overlook the importance of considering holistic sensory engagement because of our pursuit of technological advancement and convenience. All those ‘pictures under the glasses’ technologies are indeed good tools in terms of their functionalities. They simplify and ease our lives and do amplify human capabilities. However, we have to sacrifice all the tactile richness of working with our hands, as the author said. Overall, reading this article made me realize that it is nearly impossible to have an ultimate tool which can be considered a ‘good’ tool in all aspects as there is always a drawback.
I partially agree with the author about the vision of the future of interaction. I do agree that the picture under glass interactivity narrows our capability in terms of hand usage, but it is wrong to just identify it as such. First of all, why was “picture under glass” chosen as a primary interactivity of the modern times in the first place? The main reason was because it is simple, therefore making the interactive process much more easier. Due to its simplicity, people can interact with it more efficiently, making it less time consuming. Other interactive designs that demands the user more hand capabilities may be interesting or more diversified but ultimately, they are inefficient in comparison to “picture under glass”.
Another point is inclusivity. The author talks about various capabilities of the hand, but what about those who are incapable of them? As an interactive product, they must be as inclusive as possible, otherwise it is difficult to classify it as a good design. “Picture under glass” utilizes touch and drag, which could be argued as one of the simplest actions that human can take, therefore making it much more inclusive than other interactive designs. As seen from the responses as well, the author completely dismisses this situation.
Another point in the responses section was about Dr.Seuss and Shakespeare. Maybe Shakespeare’s work is regarded as a marvel but when you think about who can understand it, Dr.Seuss has much wider range of people. Shakespeare’s works, while literary masterpieces, are certainly exclusive on who can understand and who cannot. This leads to the point of vision. The advancement of technology and the vision for interactive design always had inclusivity and ease of use in mind, which is why better tools appear in the end. Some tools will make life easier compared to other tools, therefore making it better. Making tools that requires higher level of capabilities would only encourage segregation, which is definitely unnecessary.
While brainstorming for this assignment, we decided that we would like to make a project that utilizes the photocell and the buttons. The photocell changes its resistance value depending on the light intensity. And this inspired us to explore interactions between light presence and absence. We came up with a cute project called the “Lullaby Box”, which plays nursery rhymes when the photocell is covered and a button is pressed. This project features yellow, red, and green buttons, each corresponding to different songs: ‘Mary Had a Little Lamb,’ ‘Twinkle Twinkle Little Star,’ and ‘Happy Birthday Song,’ respectively. The rationale for the songs playing only when the photocell is covered is tied to the project’s purpose: to soothe children to sleep in the dark.
Schematics and Diagram
The circuit consists of three main parts: the light sensor, the Piezo Speaker, and the buttons. The light sensor is connected to port A5 for analog reading. It acts as a button in the circuit, allowing the song to play when the photocell is covered. The buttons are the main controller of this assignment. They are connected to ports A2, A3, and A4 for digital reading. The song will only play when the photocell is covered (its value is low) and the button is pressed. Each button is responsible for a different song that will be played by the Piezo Speaker (connected to port 8 for digital output).
Arduino Code
#include "pitches.h"
//mary had a little lamb
int melody1[] = {
NOTE_E4, NOTE_D4, NOTE_C4, NOTE_D4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_D4, NOTE_D4, NOTE_D4,
NOTE_E4, NOTE_G4, NOTE_G4, NOTE_E4, NOTE_D4, NOTE_C4, NOTE_D4, NOTE_E4, NOTE_E4, NOTE_E4,
NOTE_E4, NOTE_D4, NOTE_D4, NOTE_E4, NOTE_D4, NOTE_C4
};
// twinkle twinkle little star
int melody2[]={
NOTE_C4, NOTE_C4, NOTE_G4, NOTE_G4, NOTE_A4, NOTE_A4, NOTE_G4, NOTE_F4, NOTE_F4, NOTE_E4,
NOTE_E4, NOTE_D4, NOTE_D4, NOTE_C4, NOTE_G4, NOTE_G4, NOTE_F4, NOTE_F4, NOTE_E4, NOTE_E4,
NOTE_D4, NOTE_G4, NOTE_G4, NOTE_F4, NOTE_F4, NOTE_E4, NOTE_E4, NOTE_D4, NOTE_C4, NOTE_C4,
NOTE_G4, NOTE_G4, NOTE_A4, NOTE_A4, NOTE_G4, NOTE_F4, NOTE_F4, NOTE_E4, NOTE_E4, NOTE_D4,
NOTE_D4, NOTE_C4
};
// happy birthday
int melody3[] = {
NOTE_G4, NOTE_G4, NOTE_A4, NOTE_G4, NOTE_C5, NOTE_B4,
NOTE_G4, NOTE_G4, NOTE_A4, NOTE_G4, NOTE_D5, NOTE_C5,
NOTE_G4, NOTE_G4, NOTE_G5, NOTE_E5, NOTE_C5, NOTE_B4, NOTE_A4,
NOTE_F5, NOTE_F5, NOTE_E5, NOTE_C5, NOTE_D5, NOTE_C5
};
int noteDurations[] = {
4, 4, 4, 4, 4, 4, 2, 4, 4, 2, 4, 4, 2, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1
};
int noteDurations2[] = {
4,4,4,4,4,4,2,4,4,4,4,4,4,2,4,4,4,4,4,4,2,4,4,4,4,4,4,2,4,4,4,4,4,4,2,4,4,4,4,4,4,2
};
int noteDurations3[] = {
8, 8, 4, 4, 4, 2,
8, 8, 4, 4, 4, 2,
8, 8, 4, 4, 4, 4, 4,
8, 8, 4, 4, 4, 2
};
void setup() {
Serial.begin(9600);
pinMode(A4, INPUT); // yellow switch
}
void loop() {
int sensorValue= analogRead(A5);
int yellowButtonState = digitalRead(A4);
int redButtonState = digitalRead(A3);
int greenButtonState= digitalRead(A2);
// Serial.println(sensorValue);
if (sensorValue<=800){
if (yellowButtonState == HIGH) {
// Play the melody only if the button is pressed
for (int thisNote = 0; thisNote < 26; thisNote++) {
// Check the button state inside the loop
yellowButtonState = digitalRead(A4);
if (yellowButtonState == LOW) {
noTone(8);
break; // Exit the loop if the button is released
}
int noteDuration = 1000 / noteDurations[thisNote];
tone(8, melody1[thisNote], noteDuration);
int pauseBetweenNotes = noteDuration * 1.30;
// Use non-blocking delay
int startTime = millis();
while (millis() - startTime < pauseBetweenNotes) {
// Update the button state
yellowButtonState = digitalRead(A4);
if (yellowButtonState == LOW) {
noTone(8);
break; // Stop the tone if the button is released
}
}
noTone(8); // Ensure the tone is stopped after the loop
}
}
else if (redButtonState == HIGH) {
// Play the melody only if the button is pressed
for (int thisNote = 0; thisNote < 42; thisNote++) {
// Check the button state inside the loop
redButtonState = digitalRead(A3);
if (redButtonState == LOW) {
noTone(8);
break; // Exit the loop if the button is released
}
int noteDuration = 1000 / noteDurations2[thisNote];
tone(8, melody2[thisNote], noteDuration);
int pauseBetweenNotes = noteDuration * 1.30;
// Use non-blocking delay
int startTime = millis();
while (millis() - startTime < pauseBetweenNotes) {
// Update the button state
redButtonState = digitalRead(A3);
if (redButtonState == LOW) {
noTone(8);
break; // Stop the tone if the button is released
}
}
noTone(8); // Ensure the tone is stopped after the loop
}
}
else if (greenButtonState == HIGH) {
// Play the melody only if the button is pressed
for (int thisNote = 0; thisNote < 25; thisNote++) {
// Check the button state inside the loop
greenButtonState = digitalRead(A2);
if (greenButtonState == LOW) {
noTone(8);
break; // Exit the loop if the button is released
}
int noteDuration = 1000 / noteDurations3[thisNote];
tone(8, melody3[thisNote], noteDuration);
int pauseBetweenNotes = noteDuration * 1.30;
int startTime = millis();
while (millis() - startTime < pauseBetweenNotes) {
// Update the button state
greenButtonState = digitalRead(A2);
if (greenButtonState == LOW) {
noTone(8);
break; // Stop the tone if the button is released
}
}
noTone(8); // Ensure the tone is stopped after the loop
}
}
else {
noTone(8); // Ensure the tone is stopped if not in the loop
}
}}
Firstly, we initialize the code with arrays of the melody we will play. There are 3 different songs: ‘Mary Had a Little Lamb,’ ‘Twinkle Twinkle Little Star,’ and ‘Happy Birthday Song’. Each song will have one array for the notes and another array for the note durations.
Next, we initialized all the input readings at A2, A3, A4, and A5 for the buttons and the photocell. To run the songs, we continuously check for the value of the photocell to allow the buttons to turn on the songs. If the photocell is covered (the value is low), the song will play according to the buttons. For each note that is about to play, the code will check for the state of the button whether it is pressed or not. If the button is not pressed, the song will stop playing immediately.
Built Circuit Based on the Diagram
Demonstration of the Final Outcome
Challenges and Reflection
We genuinely enjoyed tackling this assignment, despite its initial challenges. Creating the melodies was particularly tricky since neither of us is knowledgeable about musical composition and notes. Eventually, we grasped what was required and made progress.
A weird issue arose while we were constructing the circuits for this project. To determine the resistance value of the photocell, we attempted to use code and the serial monitor. However, we discovered that the photocell was malfunctioning. Initially, we suspected errors in our coding or circuit assembly. Despite repeatedly consulting past lecture slides, re-uploading the code, and rebuilding the circuit, we couldn’t pinpoint any mistakes. Then, quite mysteriously, the photocell began functioning correctly after another code upload. We still don’t understand the cause of this issue. Aside from this strange incident, we encountered no significant problems throughout the project
For improvement, we would like to add more button switches and songs for the variety of choices. In this way, the range of songs that the Lullaby box can offer would make this project more entertaining to play with during the nap time of children. Also, we think it would be nice if we could change the volume through the potentiometer. We think that this would enhance user control, allowing the sound level to be easily modified to suit the environment and preferences of the user.
