The reading by Bret Victor describes how interactive design has shifted towards the digital world, rather than focusing on the simplicity of tools and capabilities of physical actions. Through the concept of Pictures Under Glass, he describes how there is a growing disconnect between human interaction between activities on screen and in reality. By focusing on primatial features of human hands, they allow us to perceive the world around us. Following the points he mention of human hands, I fully agree that human learn and understand the world around us through senses. We can’t completely interact with the world fully around us by using one sense  such as vision, touch, smell, taste, and hearing.

While I agree technology has benefited society in many ways. I do not want a completely digital world where everything is behind a glass screen or through Victor concept of picture behind glass. I think it’s critical for humans to understand the world us, otherwise we lose the compassion and sense of worth of whatever it is we are interacting with. Without our sense of touch, our capabilities as human diminishes because we cannot grasp or use the tools around us. Likewise, if we don’t physical see an object, it becomes increasingly difficult to learn about and becomes near impossible to appreciate it.

Concept

For this week’s assignment we spent a lot of time brainstorming ideas and developing different components of the instrument. Originally, we considered a light sensor activated lullaby machine (at night it plays a lullaby and an alarm in the morning) but weren’t sure if that actually constituted an instrument. Therefore, we decided to keep it more straightforward with an electric keyboard design that you can adjust the speed or “consistency” of the notes playing.

Materials

• Arduino Uno
• Jumper wires
• 7 button switches
• Speaker
• SPST Switch
• Potentiometer

Schematic

Design

This project’s two main components are 7 buttons to play the notes and a potentiometer to control the speed of the notes playing. The green button to the left (closest to our potentiometer) represents middle C and then each button plays the consecutive note going up that scale. In our design, we also implemented a an SPST switch to control whether or not you could play anything on it, with the intention of mimicking an electric keyboard’s power button. A unique component to our design is the fact that we used both of our Arduino breadboards in order to better organize and manage the aesthetics of the design. Additionally, by still using one actual Arduino Uno we were able to avoid any complications with synching the information which was convenient in terms of time efficiency.

On the implementation side our biggest challenge was getting the volume to change with the adjustments of the potentiometer. After a bit of troubleshooting and heading back to the drawing board we decided to switch our original play and allow the potentiometer to control the speed of the notes. We intended to recycle as much code as we could from class and ultimately ended up use components from both Arduino’s tone() and button example codes that were reviewed in class. After switching between trying to change the pitch, speed, and volume of the notes with the potentiometer we decided on speed simply because we felt that the other adjustments weren’t noticeable enough for our intended purpose.

Code

#include "pitches.h"
 
// button pins
const int B_key = 4; 
const int A_key = 5;
const int G_key = 6; 
const int F_key = 7;
const int E_key = 8;
const int D_key = 9; 
const int C_key = 10; 
 
const int SWITCH_PIN = 12;  // switch pin
const int BUZZER_PIN = 2; // buzzer pin
const int POT_PIN = A0; // potentiometer pin 
 
// notes
int melody[] = {
  NOTE_B5, NOTE_A5, NOTE_G4, NOTE_F4, NOTE_E4, NOTE_D4, NOTE_C4
};
 
// Array for button pins
int buttonPins[] = { A_key, B_key, C_key, D_key, E_key, F_key, G_key };
 
void setup() { // initalization of the buttons, buzzer, and switch pins 
  for (int i = 0; i < 7; i++) {
    pinMode(buttonPins[i], INPUT_PULLUP); // sets button pins as inputs with internal pull-up resistors
  }
 
  pinMode(BUZZER_PIN, OUTPUT); // sets the buzzer pin as an output
  pinMode(SWITCH_PIN, INPUT_PULLUP);  // sets switch as inputs with internatinoal pull-up resistors
}
 
void loop() {
  int switchState = digitalRead(SWITCH_PIN);    // reads the state of the switch
  int potValue = analogRead(POT_PIN);   // reads the potentiometer value (0-1023)
 
  int speedDelay = map(potValue, 0, 1023, 50, 500);  // maps potentiometer value to speed delay range (50-500 ms)
 
  // if the switch is HIGH the button functionality is enabled
  if (switchState == HIGH) {
    // continously checks each button state
    for (int i = 0; i < 7; i++) {
      int buttonState = digitalRead(buttonPins[i]);
        
      // if the button is pressed,  play the corresponding note
      if (buttonState == LOW) {
        tone(BUZZER_PIN, melody[i], 200); // play note for 200ms
        delay(speedDelay); // speed delay based on the position/ value of the potentiometer 
      }
    }
  }
  delay(50);
}

 

Final Project music.mov – Google Drive

Conclusion and Reflection

All in all, we are both rather pleased with the outcome of this weeks assignment. With it being our first assignment working with another person, it was an interesting opportunity to compare techniques in regards to simpler things like breadboard organization or schematic design preferences. We were able to use both of our strengths in different ways and support each other in areas that we were weaker. In terms of future developments we had a few smaller ideas such as adding LEDs to correspond with the keys, or allowing the user to control the pitch of the notes. Looking at the bigger picture, we even discussed what it would look like to allow the user to choose what kind of electric keyboard sounds they wanted to play (going beyond the use of the speakers we have). Although our project is rather simple, we were truly tested when it came to debugging our code but really appreciated the experience of going at it together.

Overview Video Link

The production goal for this week was to understand and play with the analog and digital components in the kit. Then with the input of the components, apply the readings to at least two LED bulbs. Just for fun, I decided to use 4 because I wanted them to glow in a random pattern with varying brightness. With the potentiometer, I decided to showcase how it can be linked to multiple LEDs to control their brightness.

Difficulty and Success of the Process

I felt the most difficult part of the process was the coding and software. Alongside getting use to the IDE, I think connecting the wires to the correct input ports and then referencing the port in the code was a bit confusing to me. Since some of the input ports on the Arduino do not have Pulse Width Modulation (PWM) that converts digital inputs into analog results, I initially was connecting leads to port 13 that didn’t have PWM functionality resulting in my LED blinking when I didn’t want them to and other fault design. With a quick Google search, it seemed like pins 3,5,6,9,10,11 have PWM functionality and changing my routing to those pins resolved most of my issues. As such, my recommendation for others starting out is to use those pins when working with analog measurements while using digital components.

On the other hand, I found great success in connecting multiple LEDs on my breadboard and then connecting the various parts in the IDE. I had a lot of fun organizing and visualizing the routing and see how each of the components would work together. I really loved how the random pattern turned out, but I think in the future I would like to find a way to connect the brightness control with the pattern. With the potentiometer, I ended up connecting each individual light with the meter, but not when the pattern was being displayed. I also wished I had more buttons to play around as well. However, I am still happy with the overall design and look forward to future projects.

Schematic (TinkerCAD)

IRL Photo

 

Physical Computing’s Greatest hits and misses

Here the article describes the various projects seen from interactive media design ranging from instruments design with gloves or pads to reactive art with various sensors or computer vision. Although the author describes these project as common themes amongst physical computing courses, they do not disregard or look down upon the repetitive theme because to them each project brings with a unique idea and innovated process. For me, reading his opinion on this issue brings me comfort because I have been trying to brainstorm ideas for the final project for IM and with each idea, I fear it isn’t original or creative enough. Of course, I would not copy another’s work, however I feel the art I have seen and interacted with has shaped my ideas and influenced my creative thinking process. I believe everyone is shaped by the world around them, so I think it is cool to see how people can reimagine a concept and build upon past works.

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

The following articles writes about how interactive artist should design their works a degree of intention that allows the users to explore their art, but also leaving room for the user to decide on the art’s interpretation. The author mentions how interactive artist should avoid bluntly telling the user what to do and how to interpret their art. Although I do see the point the author is trying to make, I think there are exceptions where the artist should have the freedom to express themselves the way they want the user to appreciate and experience their art. For example, in activist artworks, oftentimes they shed light to forgotten/ overlooked history, and I believe in these cases, it is critical for the user to understand the concept behind the art to fully be immersed with the artwork. I don’t think the idea of simply setting up the stage and observing user is enough and there needs to be balance of artist intervenes and user appreciation. As such, I feel it okay if an artist feels the need to describe their works. I rather much learn the passion behind the work, than be completely open to interpretation.

Short Description:

The project for week 8 asks to design a switch without manually connecting the switch to the power. By looking through some online resources and reviewing the Arduino documents, I created a switch using the distance sensor that detects if there is an object in front of the circuit and two LED diodes that reflect if an object is present. When an object is present, the circuit would light the red LED, and when there isn’t an object, the circuit would light the green LED.

INITAL APPOACH

Going into the project, I knew I wanted to use the sensors that came with the kit because I wanted to learn more about the connections of the components and coding in the Arduino IDE. By searching on Youtube and Arduino documentations, I initially played around with the light senor and was able to create a switch that is dependent on the amount of light that is present in the room. If there was low visibility, the LED would turn on, and if there was high visibility, the LED would turn off. Here is the link I referenced.

However, I felt this design wasn’t creative enough and sill had other components in my kit I want to learn about, so I decided play around with the distance sensor as well.

Light Sensor LED Switch （from Arduino）

The Process

The biggest challenge in the project was understand how the distance sensor worked, but I found a useful Youtube video  that was able to explain the manual to me and walk through the process of connecting each pin to the Arduino board. I understood how to connect the GND and VCC pins, and through the Youtube video, I learned that the trig pin sends out an ultrasonic wave and the echo pin would receive the ultrasonic wave if something was in front the component — similar to bats & echolocation.

Physical Components

After understanding the component, all that was left was to connect my circuit and set up the code to run the project. Below is the photo of my circuit connections from TinkerCAD and physical circuit. Here is a short video (IMG_4697) of how the circuit would work.

TINKERCAD

GREEN LIGHT -- No Object Present

RED LIGHT -- Object Present (i.e: my hand)

The Code

Through the in-class exercise, tinkering with the light sensors, and looking through Youtube videos, I was able to write a short code in the Arduino IDE that makes the circuit function. Below is the main looping function.

void loop() {
// sets the trig pin to a low state 
digitalWrite(trigPin, LOW);
delayMicroseconds(2);

// every 10 mircoseconds sends out a pulse (based off the manual)
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);

// from the echoPin --> returns the time it took the sound wave to travel in microseconds
timeTraveled = pulseIn(echoPin, HIGH);

// calculate the distance (in micrometer)
distance= timeTraveled * 0.034/2;
onDistance = distance;
if (onDistance <= 5){
  digitalWrite(ledRedPin, HIGH);
}
else{
  digitalWrite(ledRedPin, LOW);
}

Conclusion

Overall, I am very happy with how it turned out and being creative with the hand motions of “stop” for red and “go” for green in the circuit. I liked that I was able to learn more about the components and also work in software to make the circuit function the way I wanted it. For anyone else curious or wanting to learn more about Arduino, there are numerous resources and tutorial online that are so helpful, and I recommend anyone else just starting out in Arduino to take a learn and have fun.

Her Code Got Humans on the Moon

When people bring the Apollo project, my mind always goes to Margaret Hamilton because she does not get enough credit for the work she contributed to the success of the mission. As the work of women in male-dominate fields has been systematically forgotten in history, I feel her efforts towards the development of software engineering at NASA has gone unnoticed. Knowing that she had to balance childcare while pursuing her goals (and under considerable amount of pressure), Hamilton’s story is incredibly inspiring to me because it shows that woman have the capabilities to achieve the same academic rigorous fields as men and not limited to housekeeping task.

There’s also the famous photo of Hamiliton next to the code she wrote by hand for the project that makes me realize how far technology has advance within the past decade. Just in the past 60 years, computation has reverted from manually hand punched cards and written embedded design to a completely digitalized software system. As such, for me, the complexity of physical design and software applications has influenced my curiosity to understand how computerI architectural design effects digital computation. Knowing someone like me has been able to understand and develop software before it was mainstream has helped me continue to pursue my goals when times get difficult.

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

Norman’s writing talks about the aesthetic which a product embodies affects the way the user perceive it usability and effectiveness. Depending on the circumstances, the product may be more useful, while some not as much. With the three tea pots example, I agree with the theme and that people purchase certain items because of the way it may look and how’d present to other guests or fit in into the task at hand. If the circumstances call for quick/ stress solution, the usability of the product will weigh more than the design. Similarly, if a person has time to appreciate the process, then its design can be extended and shaped uniquely.

I feel all humans have a bias towards what design choice brings them joy, and so in feeling good about the product, the process of using that product would be more enjoyable and any cons are overshadowed by the joy. Whereas, if one is frustrated and disappointed with the product, it sets the expectation that the product would not work as well and one may not put as much effort to finding a solution. I think an interesting point Norman brings up is colored computer screens because if people didn’t like the colored screens modern computers would have remained black and white. Since our eyes perceive color in our everyday lives, it is unsettling to have a black and white scree. As such, I feel our experiences through our senses and experiences define the expectations we lay on the tools we use.

 

 

Groovy Derby: Link To Fullscreen

Groovy Derby: Link To P5

Concept:

The concept for my project was inspired by the co-op game It Takes Two, where two game characters set out on a journey that is filled with cooperative minigames and obstacles which they have to overcome. As such, I wanted to create a minigame where the game is only “playable” if two people are communicating and working together. Combining with themes from arcade games such as a limited number of lives and endless generative spites, I created Groovy Derby where two players have to input the correct order of key combinations in order to score points in the game.

Project Workings:

For my project, I am extremely happy with the character design and the way that they move and interact with each other. Although they don’t move from their position, the way the characters match each other movements in almost an animated way had relived me of a lot of stress. Particularly because I was really worried, I wouldn’t be able to have the characters move in a certain way and the game would look super chunky/ blocky. I think looking at animations and working frame-by-frame really helped my character movements, and in the end I had 5 frames/ designs for the characters to move. If there is anyone looking for “animated” characters, I recommend breaking down the movement into pieces and seeing how they would look on screen.

On the technical end, I am happy with the game mechanics and interactions between the user input with the creatures. I also really worried on how to connect the key pressed and possible decrement of the combination from the creature encroaching onto the characters. For that, I created player and creature class methods that checked the first combination with the input of the user, and if it matched, then the first combination would be removed. If it was the wrong input, the creature would keep moving towards the center, and if it reached a certain range within the players, a life would be lost.

As for improvement on the code, I believe the code can be more optimized as some parts were copied pasted, then the variable was changed to match what I was trying to do. I wish there were more randomization in the code because after round 6, there is a 1/3 chance for any of the creatures to be loaded in. On the game design part, I wish there were more user feedback such as when a life is lost, when a button is pressed, when the game is starting, additional sound effects, etc,. However, given we had ~1.5 to 2 weeks to complete this project, I am happy with the end result and progress that I was able to implement into my project.

Player Class

let playerHead = width / 33; // ~50 pixels
let distanceApart = width/ 26 // ~65 pixels
let player1 = new playerCharacters(player1Color, distanceApart, 0, playerHead);
let player2 = new playerCharacters(player2Color, -distanceApart, 0, playerHead);

player1.player1Moves();
player2.player2Moves();
player1.playerHitBox(player2);

Final recommendations for people on a time crunch, but want their design to look nice, I had used Canva to design a lot of my background and additional image/text that didn’t need to move. For the game sounds, I went to a free sound effect website and download clips, then looped it in p5. For custom fonts, I went to a free custom fonts website and make sure to have a .ttf file or it might not work as intended. Last, I want to mention that the heart design was generated was AI generated because I couldn’t determine the vectors/ shapes needed for my design.

 

MIDTERM IDEA

My idea midterm is to create a short game. One of my favorite (unfinished) games is It Takes Two and it involves the cooperation of two players in order to move on to the next level/ chapter of the game. Though my game will likely not be as intricate as the storyline in It Takes Two, I wanted to draw upon my experiences and create a simply two player corporation minigame.

For my project, I want to have a pattern game with one user using the WASD, one using the arrow keys, and communal SPACE key.  On the screen there will be a combination of the WASD, arrow, and space keys which the two players must work together to enter in the right order to defeat some boss. I definitely still need to work on the storyline/ goal of the game, but I wanted to figure out the basic mechanism and gameplay for my project as a starting point for my midterm project.

GREATEST FEARS 

The biggest obstacles I will face in this project is making the project simple, yet complex at the same time. I believe I will have an issue of doing more than I can in the time I am allotted along with adding an unnecessary amount of detail to my project. For example, with the graphics of the game, I want to include frame-by-frame animations and movements of two characters that represents each player. However realistically, animation takes forever, and I do not unfortunately do not have the free time to draw/ create characters for the complex movements I wish.

While I do fear the images/ shapes would not satisfy what I am looking for, I hope to minimize my fears by designing and animating simple character designs that are already available in the p5 library. I feel if I could make a self-portrait of myself, I hope I would be able to small version of that assignment. In addition, I hope to create a lot of test cases and examine online examples to gauge how others were able to create their games.

MY PROGRESS

I feel when I start projects, I always dive in without much of a plan and either end up scraping the idea because I forgot what the objectives were or scraping up ideas as I work. As such, I decided to make a mood/ idea board that laid out almost a step-by-step process for what I want to implement into my midterm project, so I don’t get overwhelmed or forget to include something I wanted. Below I have included my vision for my game project and list out the components I want (as time permits).

In the sketch, you can see there’s two players that are dancing, but the controls are bounded to the player’s control either the arrow keys or the WASD keys. Together, they’ll have to work together and coordinate which creature they are looking to target first and eliminate. Otherwise, if the creatures reach them within a certain distance a health point will be lost. I do feel I haven’t fully decided on the setup of the players, but I think once it is tested, I can then also decide if I need to make any changes.

Vision Board For My Project

In addition, I have also included the external influences that are inspiring my game. Namely again, the co-op game It Takes Two, arcade games like Space Invader, and character designs of cartoons/ Google Doodles.

External Influences/ References

The topic of computer vision has been an increasingly popular idea, and I believe in the next couple years there will continue to be big leaps in its development and applications. To think that less than a decade ago computer vision was solely for the military and for those in higher education has now turn into a readily available technology for artists and the general public is amazing. As such, I really enjoy how the author presented the paper for beginners in computer vision and provided advice on how to approach projects with computer vision. The projects on tracking and surveillance were actually some of the projects that stuck with me the most throughout the reading. The Suicide Box project I felt on one hand sort of telling the story of the individual whom society, especially when their death wasn’t accounted for, but on the other hand super demoralizing because the project relies on the death of these individual. As such, I feel the capacity for tracking and surveillance for computer vision is a sensitive and difficult issue to uncover fully. There is of course a huge capacity and room for growth in the field of computer vision, however the ethnicity needs to be checked and balance with the morality and freedoms of individuals.

Through the reading, the author mentions how computer visions programs will need to be chosen mindful in order to optimally tackle the problem at hand. With complicated terms such as background subtract and frame differencing, I believe the complexity of differentiating between objects, backgrounds, and lighting is the biggest different from computer vision to human vision. As humans, we process millions of tiny information at once without noticing it and as programmers, the little things like recognizing an object are magnified as humans attempt to describe in code what that object is in computer language. Working with interactive media and computer vision for the rest of the semester, I believe the techniques regarding background subtraction and brightness tracking will play the biggest role in our projects. I feel many of our projects will rely on clear differentiating of human movements and interactions with the project. Without these techniques, I fear our projects may fall apart or not work as the screen would act as a camera and not a program which can be interacted with.

I found this week’s reading really assuming because I could relate to a lot of the examples he gave. Specifically referencing the washing machine and glass door, I definitely have been in situations where the design of a product is aesthetically pleasing and minimalistic, but the actual usability of the product is misleading and frustrating to work with. The example I thought of was the integration of smart screens into the dashboard of cars. I grew up learning how to dial radio stations, DVDs, and cassette tapes, so when my family were able to purchase new cars, I was dumbfounded by the flat screen instead of the variety of knob and mechanism. While it was easy to figure out, I somehow found it a nuisance at times to have to tap or scroll through the interface. I also find it hypocritical because it can be super distracting and cause the driver attention to divert from the road.

I also could relate to the thinking process of engineers and having a set logical process. I agree with the author that it feel like a lot of products are designed for machines and are not user friendly. That is why clear communication, diagrams/ mappings, and symbols are so important because builds the relationship between the individual and the people that worked hard to create the product. In my own work, I find it hard to divert from my logic and fall into the pit of false confidence that led to fallacy. As such, I find great importance in the open projects and humanities because through these studies and experience can there be a bridge between hard logic and real case situations.

I hope in my interactive projects I don’t fall into the logical fallacies as an engineer. Especially because I have been trained through my college career to think logically and work efficiently, there will be times where something can less efficient but easily understood and easier to implement into my project. In addition, I hope to include aesthetic, yet mindful, signifiers in my project, so user are able to interactive and have fun with my projects rather than taking time to determine how my projects work.