Week 11 – Reading Response

I find it interesting how smooth was the transition of the perspective on the eyeglasses from the ‘sign of disability’ to a fashionable item. This idea became so popular because of the unique design and style of the eyeglasses that they are bought by people with no issue with eyesight just because they are fashionable, adding to the style and creating an overall image. Hence, eyeglasses became something that we don’t hide but rather emphasize in a stylish way, changing our view on disability as something we have to hide or be ashamed of. 

While reading the article, I started questioning whether the same approach can be applied to bigger items such as wheelchairs. Although for now there is not much to do for the design of the wheelchairs, their functionality is advancing day by day. However, it is not an absolute solution as not all the facilities in the urban and rural areas are made for wheelchairs. I feel like they consider themselves as people with disabilities mostly when there is a hardship in the movement in the city as not everything is made accessible. Therefore, I believe that not only the design of the items for accessibility should be improved, but also the things all around should be designed to be accessible. 

Although the transition for other items is not as fast as with the eyeglasses, I appreciate the work of designers in trying to make other disability items through the changes in the design of the items, raising awareness about their normality in the magazines, etc.

Week 11 – Series Connection

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

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

Video: exercise_1_week_11

 

Arduino code:

#define echoPin 2
#define trigPin 3


long duration;
int distance;


void setup() {
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
Serial.begin(9600);


}


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


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


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

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

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

Video: exercise_2_week_11

Arduino code:

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

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

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

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

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

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

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

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

Video: exercise_3_week_11.mov

Arduino code:

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


void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);


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


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


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

 

Week 11 – Final Project Proposal

Jumping piano!

My concept: I would like to create a musical piano game played by jumping. When I was a child, the piano tales were very popular and every student in our had them on their phones (Fig. 1.). The instructions of the game are simple: you have to press the moving black tiles of the piano before they touch the bottom of the screen. The longer the time of playing faster the black tiles move. This game is played with the fingers and I would like to advance the game by allowing the users to play the game through jumping. They have to jump on the square, corresponding to the square on the screen on time. The same approach that the speed of the game increases will be used. Additionally, the longevity of the black tiles will correspond to the longevity of the beats on the song played in the background (if I can do that), so the users have a feeling that they are playing the piano, yet in a unique way. 

Magic Piano Tiles Play Piano Games With Real Songs APK for Android Download

Fig. 1. The game “Piano Tales” on which my idea is based on. Source: screen-0.webp

Technical side: I will cut the cardboard and stick the aluminum on one side, so when the user jumps on the cardboard, the aluminum hits the wire, sending the signal that the corresponding circuit is complete and the button is pressed. The p5.js will have a piece of music in the background and moving black tiles depending on the time of the song or the time of playing the game. I will connect the Arduino and p5.js so that every completed circuit, lamp, or button corresponds to each of the four tiles on the p5.js. 

Week 10 – Musical instrument

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

Video Demonstration: musical instrument

Implementation:

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

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

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

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

void setup() {
  pinMode(BUZZER_PIN, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  int analogValue = analogRead(POTENTIOMETER_PIN);
  Serial.println(analogValue);

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

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

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

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

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

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

Week 10 – Reading Reflection

When I started reading the text “Hands”, I felt like the author was telling the obvious things. However, recalling how my little sister was born during the pandemic time with an iPad and iPhone at home, his words have value. My sister knows everything about the screens and how to manipulate them, but she might not know the basic things such as how to tie the shoes, hold the pen properly, etc. Because of this, I understand that pictures under glass are affecting the skills and reducing the capabilities of the hands, thus, reducing the real-life experience. What I mean by experience is that we are replacing the papers with screens, or table games such as chess and ping-pong with screen ‘dynamics’, but they don’t create the same tactile feeling… it is just a screen. 

Furthermore, the picture in the glass puts a huge emphasis on the vision, assuming that it might compensate for the tactile feelings. However, I think that this might be not the best inclusive solution for people with visual impairments. Hands give enough intuitive information for us to understand the material we are touching, how thick it is, how to manipulate it, etc, which cannot be replaced by the glass screen unless we look at it. As the author said, this is a good temporary solution, but not in the long term. So, he gave good ideas about the issues we have and now it is time to start thinking about the solutions for this issue. 

Overall, I think that our desire to touch, feel, and move cannot be replaced with visual aesthetics. 

Week 9 – Arduino: analog and digital inputs & outputs

My Concept: I wanted to create a circuit in which the push button turns LED1  on and off and the photoresistor regulates the LED2 by turning on, making it blink and turning off based on the value of the photoresistor.

The video of the work: arduino_video

The code on Arduino:

The example with three push buttons controlling three LEDs on the website https://microdigisoft.com/controlling-leds-with-multiple-push-button-using-arduino/ was used in creating a circuit with one push button and one photoresistor with two LEDs.

//initializing the pins to push button and photoresistor 
const int BUTTON1 = 2; 
const int PHOTOSENSOR = A0;
//initializing the pins to LED1 and LED2
const int LED1 = 8;
const int LED2 = 12;

int BUTTONstate1 = 0;
int PHOTOSENSORvalue = 0; 

void setup()
{
//defining the button (digital) and photoresistor (analog) as input pins
  pinMode(BUTTON1, INPUT); 
  pinMode(PHOTOSENSOR, INPUT);
//defining LEDs as output pins
  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);
}

void loop()
{
//the conditional to turn on the LED1 if the button is pushed
  BUTTONstate1 = digitalRead(BUTTON1); 
  if (BUTTONstate1 == LOW)
  {
    digitalWrite(LED1, HIGH);
  }
  else
  {
    digitalWrite(LED1, LOW);
  }

//the conditional to turn on the LED2, make it blink and turn off based on the value on photoresistor
  PHOTOSENSORvalue = analogRead(PHOTOSENSOR);
  if (PHOTOSENSORvalue < 500)
  {
    // Low light condition which turns LED2 on
    digitalWrite(LED2, HIGH);
  }
  else if (PHOTOSENSORvalue >= 500 && PHOTOSENSORvalue < 1000)
  {
    // Medium light condition which makes the LED2 blink
    digitalWrite(LED2, HIGH); 
    delay(500); 
    digitalWrite(LED2, LOW); 
    delay(500); 
  }
  else
  {
    // High light condition which turns LED2 off
    digitalWrite(LED2, LOW);
  }
}

I am particularly proud of the code with reads the value of the photoresistor and gives the LED outputs accordingly (turn on, blink, turn off).

Reflections: This work might seem easy, but took lots of research and understanding of the concept. Initially, my idea was to control the brightness of LED2 based on the resistance value on the photoresistor to show that the LED2 is an analog output. However, strangely, LED1 was affected by the value of the photoresistor and LED2 did not react. Then, I changed the code to make the LED2 turn on when the value of the photoresistor is less than 500 ohms, blink when it is in the range of [500, 10000) and turn off when these conditions are not met. As this one worked well, I used this code. Nevertheless, I would like to solve the mystery of the first outcome.

Week 9 – Reading Reflection

I would like to start with “Making Interactive Art: Set the Stage, Then Shut Up and Listen” because it points out an idea I was not very comfortable with. Yesterday we had a presentation of our sound project for another IM class. Before giving the presentation, I raised the question of what would be better: first, give a chance for an audience to listen to the song and then give a presentation of what the project is actually about, or, vice versa. One of the senior IM students in my group said that it is much better to give them the freedom to interpret, and have their idea of the project rather than forcing our interpretation to them. The idea was the same as it was conveyed in the text because the interactive media project is not a research work with a clear thesis and arguments, it is a more exploratory object that needs to be interacted with. I liked the idea that the project created is “just the beginning of a conversation with the people who experience your work”. We have our idea about the project and we can make a short remark about what the project is about but nothing more because the audience should explore and understand its meaning themselves. Coming back to our sound project, I was worried that the audience wouldn’t understand the point of the project and what exactly we wanted to convey with that. This happened. Some of the audience didn’t get the point of our sound project, but because of the text, I understood that it is fine because not all conversations make sense either. 

“Physical Computing’s Greatest Hits” felt like a selective collection of the simple, yet interesting physical computing project ideas. Starting from the musical instruments, and ending up with the interaction with the body, the article provides many ideas to get inspired from. Particularly, I loved the idea of floor pads as a space for dancing. As a child, I loved that kind of game in the gaming rooms of huge malls. It would be very interesting and exciting to create that by myself and give my little sisters to play with. I am not sure whether they would be as excited as I was with so much technological development nowadays. Although the article gives the basic idea about how each project is created, there are still many grey areas. It would be better if the author provided more technical elaboration on that.

Week 8- Creative Switch

DO YOUR EXERCISE CORRECTLY!

My Concept: When I was in the gym, the couch always would tell me to do the exercises to the fullest extent because I used to do only half of them. For instance, my pushups would be twice the distance from the ground than the right pushups. I wanted to create a tool that helps the user to control the right way of doing the exercise. Specifically, by sticking the aluminum folds at the right distance on each side of the arm, the user can control the way he is pulling the equipment by bending the arm. When the arms are completely bent, the foils touch each other and the bulb lights up. Hence, the user knows that he is correctly doing the exercise (he is fully bending his arm) when the bulb lights up. 

The video of my creative switch in work: testing creative switch

Process & Highlights: I have created a simple circuit with one resistor and one light bulb as we practiced in class. Then, I added the connecting wires which would be used as a switch, breaking and completing the circuit. First, I checked whether they worked by connecting the wires. When I was certain that my circuit was complete and the switch worked, I extended the wires by adding additional ones with the foil to make them wearable. After that, I added the aluminum foil to the ends of the wires and stuck the wires on my hands. 

Reflections: To be honest, this was the quickest assignment of Intro to IM because of my physics background in high school. Additionally, because I already had an idea, the implementation wasn’t a big issue. This project can be developed further by replacing the multiple wires with one long wire because these wires can easily be disconnected from one another, breaking the circuit. Additionally, I would replace the Arduino board with a more flexible, thus, wearable one. Furthermore, I would improve the aesthetics of the product, so it can be implemented and used in the market.

Week 8- Reading Reflection

“Emotion and Attractive” by Donald A. Norman and “Her Code Got Humans on the Moon- And Invented Software Itself” by Robert McMillan

We were assigned to read two different materials with varying ideas, but both were thought-provoking. 

I would like to start with the most influential article about the mother of software engineering- Margaret Hamilton. She is a living example of the phrase “everything is possible”. While reading the text, I immediately thought about the photo of her standing next to the tons of coded papers- Apollo code. The reading material tells more about the background of that photo, showing the first gigantic step toward software engineering. Her dedication to work and the result of her achievements impressed me the most. Imagine writing the code to the system, which gets the humans on the moon and back when no one even had an idea what the software engineering was. Her biography leaves me astonished every time I read it. 

Scene at MIT: Margaret Hamilton's Apollo code | MIT News | Massachusetts  Institute of TechnologyFig. 1. Scene at MIT: Margaret Hamilton’s Apollo code | MIT News | Massachusetts Institute of Technology. Source: margaret-hamilton-mit-apollo-code_0.jpg

Discussing the reading “Emotion and Attractive” by Norman, I would like to say that the reading told the basic things, which are usually overlooked by the designers. In other words, he mentioned such a foundational, yet significant aspect of the design that is neglected in the production of the goods and services. Making a connection with the previous reading “The Psychopathology of Everyday Things”, I would like to suggest that the complexity of the things is part of the “ugliness” of the goods. The point of view of the author is that the aesthetics of the product is more than its facade, including usability, understandability, and easiness along with beauty. However, I think that this focus on aesthetics may vary depending on the context because the things made for emergency situations need to be as simple and as understandable as it is possible, giving less attention to physical appearance, while the things for the occasional use in free time or for professional purposes can give the priority to the aesthetics. Furthermore, I would like to admit that his idea that the beauty of the product stimulates cognitive thinking better could convince me. We tend to put more mental effort into understanding the usage of the thing subconsciously if we find that appealing than non-attractive things. This might vary depending on the mood and the conditions. He gave a well-drawn example of that with the teapots. If you are in a mood and have free time, you would probably go with the most aesthetic teapot even if it’s not the most user-friendly, but if you are in a hurry, the most usable one, even if it’s not the most pleasurable one. Overall, it can be concluded that Norman emphasized the fundamental aspect of the design in clear terms and examples, which resonates with my perspective of the significance of the aesthetics of products.

Week 6 – Midterm Project

DiDesign – create your room design

Link to my sketchhttps://editor.p5js.org/Diannella/full/BCjYoXQdw

My Concept: “DiDesign” is a realization of my childhood dreams. As a child, I wanted to become an interior designer and was always interested in choosing and drawing the pieces of furniture and allocating them inside the room. Being inspired by the “coffee shop” game shown during the class, I also wanted to produce a calming experience with aesthetic images and pleasing sounds. The users have a chance to feel themselves as interior designers and even get imaginary payment for that. 

The explanation of how the project works: The rules of the game are simple. The game starts with the instructions section, where the character asks the user to design the room for the client and gives instructions on how to play the game. The users click on the “PLAY” button, which leads them to the room with the default most simple design. The users should click on each of the pieces of furniture and choose their favorite one from the array of six options. The users can change the sofa, the decors on the left and right sides of the sofa, and the lamp. In addition to that, the users can click on the character on the left side, who will give comments about the design process. When the users are done with the design, they can click on the button “SELL” to sell their designs to the client. This would lead to the last section, which shows the payment amount for the project. This amount is randomly chosen from the range of $2000 to $20000. If the users want to create another design, they can click on the button “RESTART” which would restart the game with the instructions section, followed by the default furniture.

The examples of the each image of sofa created by me on Canva

The areas I am proud of: Overall, I am proud of the project because the reality met my expectations of the project by around 90% and, most importantly, I have seen a huge development since the beginning of the semester. Firstly, I am very proud of the aesthetics of the game because I believe that the colors, shapes, allocation, the chosen pieces of furniture, and the sound effects are chosen great so that the users have an enjoyable experience of playing this game. Secondly, I am proud of the process of creating this game. Specifically, other than coding, the project includes the work on the design of each of the pieces of furniture. I selected each piece of an image and constructed the whole image of the room in the canvas to make sure that they looked great with each other resized every image to match the dimensions and downloaded every piece separately. Last but not least, I am most proud of the code with the mouseClicked function. It includes every conditional of the game, operating the change of each furniture and dialogue box, as well as the change over the stages with the resetting of the game and random payment. 

function mouseClicked() {
  clicking.play (); //every click is accompanied with clicking sound
// everything inside this conditional happens only in the playing state, which is the state inside the room
  if (gameState == 'playing') {
//if the mouse is clicked inside the area of piece of furniture, the next image is shown from the array of that piece of furniture
    if (mouseX >= width / 2 - sofas[0].width / 2 &&
        mouseX <= width / 2 - sofas[0].width / 2 + sofas[0].width &&
        mouseY >= height * 0.5 &&
        mouseY <= height * 0.5 + sofas[0].height) {
      currentSofa++;
      if (currentSofa >= sofas.length) {
        currentSofa = 0;
      }
}
//there are four more similar conditionals to manipulate the array of the left decor, right decor, lamp and the dialogue bubbles
  }
//one button is responsible for changing the game states. Every time the rectangle is clicked, the state of the game changes.
   if (mouseX >= width * 0.8 &&
      mouseX <= width * 0.9  &&
      mouseY >= height * 0.8 &&
      mouseY <= height * 0.9) {
    if (gameState == 'start') {
    gameState = 'playing';
    stopPayment() ; //random payment amount is generated every time the game starts
    } else if (gameState == 'playing') {
    gameState = 'end';
  } else if (gameState == 'end') {
//the design is returned back to default design of interior, which is the image in the first position of each array of images.
    currentSofa = 0;
    currentLeftDecor = 0;
    currentRightDecor = 0;
    currentLamp = 0;
    currentBubble = 0;
    restartGame();
  } 
}
    return false;
}

Areas for improvement: 

Initially, I also had an additional idea of adding the character from the sprite sheet, which could be controlled by the user. By pressing the arrow buttons, it would be possible to move that character inside the room. However, the issue was that I simply couldn’t find the sprite sheets of the character, which would match the vibe of the game. Most of the characters are made for arcade games with the jumping and falling images of little cartoon-looking characters. As there was no image that would match the style, I was thinking of drawing that character. Because of the time restrictions, the image of the girl was inserted, which talks when gets clicked by the user, but doesn’t move. As it doesn’t fully replace the initial idea, the drawing of own sprite sheet of the character would be a good improvement of the game for the future. 

Furthermore, the array of images I found might not be enough as well as the number of pieces that can be changed. In the future, room decor can be developed into house decor, so the users would have a chance to decorate every room in the house such as the bathroom, bedroom, kitchen, and living room. Each of the rooms would have at least ten changeable pieces of furniture with at least 10 options in each. This would expand the project and make it more interesting for older people because for now, only children would be engaged with the game. 

The resolved problem:

  1. I had an issue with the change of the pieces of furniture because the new image was added on top of the previous image, instead of replacing that. It was solved by adding the background image and the current image of the piece of furniture in every frame, so the old pieces of furniture would be covered by the background image and the new piece of furniture. I was not using this way initially because I thought that would lead to the freezing issues of p5.js, but everything works well with this strategy. 
  2. I had an issue that the game doesn’t go to the default design every time I restart the game, but stays in the last chosen images of the furniture. The solution was very obvious and was solved by explaining the steps of refreshing the game. I simply forgot to specify in the conditional that each element in the arrays should be in the first position, which is the default image. 

The unresolved problem: 

  1. I had a huge issue with the hover of the images, so when the mouse is on top of the image, that image would be colored white. This actually worked with single images, but couldn’t be applied to each of the images as a class. Just a hover for one image took almost 100 lines and just copy-pasting that code to each image wouldn’t be effective. The idea of using that in the class was not very successful. Because of this, I still should work on this and find a better solution. 

Reference List:

The website used for the images: canva

Sound used: 

Modern technology select. Source: https://mixkit.co/free-sound-effects/click/?page=2 

Simple Piano Melody by Daddy_s_Music. Source: https://pixabay.com/music/search/?order=ec&pagi=6