Author: Alina Berikova

EXERCISE 1

Task: 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

Code for P5 and Arduino commented at the end of it:

Demonstration: 

EXERCISE 2

Task: make something that controls the LED brightness from p5

Code for P5 and Arduino commented at the end of it:

Demonstration:

EXERCISE 3

Task: 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.

This was the hardest exercise to do. I made it work, however, instead of fully turning off when the ball is fully on the ground, the LED lights up. This would be a problem to solve in the future.

Code for P5 and Arduino commented at the end of it:

Demonstration:

For the final project, I have decided to create an immersive experience where people could make their own NYUAD ID cards.

Usually, people do not like the photographs on their ID cards. This issue inspired me to program a way in which we can take our own photos for the ID. For instance, a user can press a button and take their photo live by looking at the camera. Maybe I will also mirror the final photograph so that it looks just as when you look at yourself in the mirror. According to my research, people actually think that a mirror reflection is much more attractive to you than a photograph.

Moreover, I have some friends who chose or go by a different name than the one in the passport. This will also be incorporated in this program, where a person could write their preferred name on a touch screen, which will be reflected on their ID.

Also, I believe that many students can relate to the issue that our ID cards are not unique and do not show any individuality. In my program, there will be an option to add accessories to their photos. For instance, I plan to incorporate different images of scarves, jewelry, hats, mustaches, etc.

NYU New York has already made some changes to their ID cards, where students can change their ID cards for free.

NYU community members who would like to:

• have their NYU ID card replaced to reflect their chosen/preferred name, or
• have the photo on their card replaced to better reflect their gender identity/expression

can have their card reprinted at no cost! https://t.co/na87VzR0Zg pic.twitter.com/jCsuq4waaZ

— New York University (@nyuniversity) September 27, 2021

Furthermore, as suggested by my classmates and Professor Shiloh during the class discussion, I can add an option to control lighting using a ring light (brightness through a potentiometer and color of the light by linking the remote to Arduino). In this way, people can control the setting in which they take the photo, which is also very important to the quality of your final photograph.

The ID card will resemble the NYU ID, however, incorporating all the features mentioned above should produce a fun and engaging project.

Design Meets Disability

I really liked the discussion on the tension between fashion and discretion. Specifically, Graham Pullin shows how glasses become not just an assistive medical device, but it transformed into a fashionable item of “our garderobe”. In my own experience, I have many friends who used to wear glasses without lenses or lenses without dioptri. I chose glasses according to my aesthetic tastes and only then I would think about their practicality and the medical parameters. These examples prove the point made by Pullin and point to the rightness of her arguments.

It is not the first time I have heard that disability is not solely a medical issue. Instead, it stands as a social and cultural one. In the field of disability studies, this is called a medical model.

The Medical Model views disability as resulting from an individual person’s physical or mental limitations, and is not connected to the social or geographical environments. The Medical Model focuses on finding a “cure” or making a person more “normal.”

© University of Oregon

Having taken a course in disability studies previously, this reading was not really eye-opening to me. However, I understand that the topic of discussion in this article is thought-provoking and relates to our class material a lot. Such question as to how we make designs more accessible is important. I believe we should try and pursue designs that are suitable for everyone. We, as designers, can make things accessible and take action towards building a  more inclusive society.

Concept

For this assignment, we decided to do a musical instrument that will produce music on its own. Typically, musical instruments are associated with a person playing them. However, in our project, we devised a system wherein a performer assumed the dual role of both playing the instrument and acting as the player. The servo motor symbolizes the player, while a piece of cardboard mounted on a stick symbolizes the instrument.

How music is produced:

As the servo motor moves, the attached pad also moves, causing variations in the distance detected by the ultrasonic sensor. Depending on these different distances, the speaker emits sounds with varying frequencies.

Setup

Video

 

Code and highlights of the procedure

1. We have used the example in the kit’s documentation (you can find it here) to code the distance sensor, adjusting some aspects of it.
2. We manipulated the position of the servo motor by using myservo.write() and delay(). Here, we played with degrees and set up the delay to be 50ms for the servo to reach the position.
3. We used the function of a map() and constrain() together, as learned in class, to match the distance values to the frequency values.
4. We also added a button, which when pressed can change the frequency range, so that all the melody’s frequencies are higher.

// assign the variables for distance and button
#define trigPin 13
#define echoPin 12
#define buttonPin 2

// include library for Servo motor
#include <Servo.h>

Servo myservo;  // create servo object to control a servo
// twelve servo objects can be created on most boards

// assign the first position
// variable to store the servo position
int pos = 0;


void setup() {
  Serial.begin(9600);
  pinMode(trigPin, OUTPUT);  //distance
  pinMode(echoPin, INPUT);
  myservo.attach(9);  // attaches the servo on pin 9 to the servo object

  pinMode(buttonPin, INPUT);  // switch
}

int frequency;  // assign the frequency variable

void loop() {
  // from distance sensor example
  long duration, distance;
  digitalWrite(trigPin, LOW);  // Added this line
  delayMicroseconds(2);        // Added this line
  digitalWrite(trigPin, HIGH);
  //  delayMicroseconds(1000); - Removed this line
  delayMicroseconds(10);  // Added this line
  digitalWrite(trigPin, LOW);
  duration = pulseIn(echoPin, HIGH);
  distance = (duration / 2) / 29.1;


  if (distance >= 200 || distance <= 0) {
    Serial.println("Out of range");
  } else {
    Serial.print(distance);
    Serial.println(" cm");
  }


  // we contrain the distance to be from 0 to 50 and map the distance values to the frequency values
  // if the button is not pushed then the melody plays in low frequencies
  // if the button is pushed, then the frequency  is higher


  if (digitalRead(buttonPin) == LOW) {
    frequency = map(constrain(distance, 0, 50), 0, 50, 100, 1000);
  } else {
    frequency = map(constrain(distance, 0, 50), 0, 50, 500, 2000);
  }

  //code for SERVO position
  myservo.write(90);
  delay(50);
  myservo.write(45);
  delay(50);
  myservo.write(25);
  delay(50);
  myservo.write(70);
  delay(50);
  myservo.write(100);
  delay(50);
  myservo.write(60);
  delay(50);  // waits 50ms for the servo to reach the position

  // play the sound from pin 6
  tone(6, frequency);
}

Reflection

We faced one issue when building the setup. We wanted to use a bigger servo motor which is stronger and could hold the stick, however, it was not working the way we planned (not like a mini one in our kit). As we researched, we found out that actually, this servo motor allows for full-speed rotation at the value of 180 and a stop at the value of 0. This was not suitable for our project, so we proceeded with using a hot glue gun to connect the stick to the servo motor we had in the kit.

We could also make the appearance better by decorating the cardboard using for example an image of a robot.

Moreover, for future projects, we could actually play different melodies and control the volume using the potentiometer. Otherwise, we could use a potentiometer to manipulate the movements of the servo motor, by coding different patterns of the moves produced by the servo motor.

Overall, I think this was a fun project to do and I liked the final result a lot!

 

 

A Brief Rant on the Future of Interaction Design

From a psychological perspective, the author’s critique makes total sense because it values the sensual experience over the aesthetical and fancy way of an interactive system. For instance, in the book I once read, O’Keane (2022) suggests that “one makes sense of the world through one’s senses and this becomes the basis for one’s interpretation of the world and for one’s memory.” There is actually one type of memory which is called haptic memory which is the form of sensory memory specific to touch stimuli. So, I believe the author’s argument is very clear and in touch with the specific research in psychology.

However, the article did not offer clear and specific solutions to what can we do as an alternative. I think the author could have provided some options that are available today and that focus somehow on the haptic aspect. For example, Humane™ just launched its much-awaited #hardware device, which has been purpose-built for the new AI era from the ground up: here is the video. It is more human-centered design in technology and it gives an option for manipulating the technology with our hands.

A follow-up article

I think that most of my own critiques and questions from the previous article were answered in this follow-up. I think that authors should respond to critique to engage with readers, gain valuable insights, improve their work, and build a supportive community. Responding to the critique fosters a connection, and enhances the collaborative nature of the creative process.

I genuinely believe that his ideas about giving up on our bodies are so important to talk about. This reminded me of a conversation that I had with my friend about what art is. Today, we tend to think that art is AI-generated images, temporary installations, etc. However, I think art is deteriorating as we rely less on hands-on craftsmanship like it was before for building sculptures and architecture (e.g. Acropolis of Athens). By embracing technology, we risk losing the tactile connection that brings authenticity and soul to artistic creations.

Concept

For this week’s assignment, I decided to show the common problem of pedestrians when crossing the road. My idea was to create a pedestrian crossing light, which would show the common problem of having “infinite” red light and only limited actual crossing green light. I believe this is a common problem in any country and anyone can relate to the idea of this project.

Video: Pedestrian Traffic Light

Diagram, Code, Highlights, and Challenges of the Project

To make this project, I decided to break it into three steps.

Firstly, I made a switch as a push button, which will turn on the green LED. For this, I built a circuit for the switch button, which I learned from the class material. I am proud of this step, as I could apply the previous knowledge (building the circuit of the light sensor) and understand how to do the same with the switch button. I used a 10K Ω resistor, a green push button (to indicate the same color as the LED color), a green wire that connects to pin 12, a red wire that connects to 5V, and a black wire for the GND connection. One challenge I faced was forgetting that the current could not jump from one place on the breadboard to another, so I added another red wire to finish the connection.

Moreover, I made a simple circuit for the green and red light, using green and red LEDs, 2 330Ω resistors, and yellow wires connected to pins 2 and 3. I didn’t have to use an additional black wire, as I intentionally had all of my components connected in a way that uses only 1 black wire connected to GND.

As I completed building this, I wrote a simple program that will turn on the green LED, and turn off the red LED, when the green button is pushed. Moreover, I made a code for the green LED blinking. For this part of the project, I used a digital sensor and controlled it in a digital fashion.

Lastly, I decided to add an analog sensor – a light sensor – which will control the brightness of the red LED. I had no problem building this part of the circuit, however, I had to decide whether I wanted to completely turn off the red LED or control the red LED in a fashion that is independent of the digital switch. If I decided to turn off the LED using a light sensor, I would need to think about 4 different options of its connection to the switch button: switch on & sensor value >400, switch on & sensor value <400, switch off & sensor value >400, switch off & sensor value <400. I decided that independent control of the light sensor would reflect my concept better. Therefore, I made a red LED to always have a dimmed brightness, and when the light sensor is covered the LED will become brighter.

Here, is the code for my program:

// assigning variables to the pins
// push button has a connection to pin 12
// green LED has a connection to pin 2
// red LED has a connection to pin 3

int pushButton = 12;
int greenLED = 2;
int redLED = 3;

// the setup routine
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  // make the pushbutton's pin an input
  pinMode(pushButton, INPUT);
  // make green LED and red LED pins as output
  pinMode(greenLED, OUTPUT);
  pinMode(redLED, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {

  // read the input pin of the push button:
  int buttonState = digitalRead(pushButton);
  // print out the state of the button:
  Serial.println(buttonState);
  delay(1);  // delay in between reads for stability

  // if statement for controlling the red and green LEDs through the push button (digital switch)
  // if button is pushed
  // turn off the red LED and blink the green LED with a delay in between the blinks

  if (buttonState == HIGH) {

    digitalWrite(redLED, LOW);

    digitalWrite(greenLED, HIGH);
    delay(1000);
    digitalWrite(greenLED, LOW);
    delay(1000);

    // if button is not pushed
    // green LED is always off
    // red LED is always on
    // and the red LED is controlled by the light sensor values a.k.a. the brightness
    // if the sensor value is less than or equals to 400, the brightness of the red LED is at maximum
    // if the sensor value is more than 400, the brightness of the red LED is alway dimmed at brighness of 10

  } else {
    //if the green button is not pushed,
    // the green LED is not turning on
    digitalWrite(greenLED, LOW);

    // initializing variable called sensorValue which reads the values from A2 analog pin
    int sensorValue = analogRead(A2);

    if (sensorValue <= 400) {
      analogWrite(redLED, 255);
    } else {
      analogWrite(redLED, 10);
    }
  }
}

Future Work and Reflection

Overall, I believe that I achieved all of my goals for this project. I was able to practice the knowledge I gained during class work and apply it in a new context. I am proud of the work I have done. Although I faced several challenges, which I described above, I was able to resolve them easily. For the next work, I am planning to keep up with my method of breaking the big project into smaller parts and achieving the same good results.

 

Physical Computing’s Greatest Hits (and Misses)

This article by Igoe was pretty easy to read with lots of examples that are very important for the students like us. I believe that I benefited from reading the text because it provides an overview of common themes in physical computing and offers inspiration for individuals interested in exploring this field. It encouraged me as a reader to think creatively about my own works. I especially liked how the author encourages his readers to have originality within common and recurring themes within the field of physical computing.

I think that there is no apparent bias in the article. The author presents the themes and examples objectively, providing a balanced view of each. It also makes me think about the origin of creativity, and how this concept should not be viewed as something that originates from a novel idea. In fact, even in sciences, it is common to have background literature for the “original” study, meaning that every idea is built upon preexisting ideas. Such an approach with a strong foundation is the best place for the development of new ideas.

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

I believe that the best thing about this article is that it encourages artists to think beyond traditional art forms and embrace interactive experiences. I really like how the author understands the importance of the spectatorship notion.  The emphasis on audience engagement and the value of the interpretations from the side of the spectator is definitely something that has been pursued in the field of contemporary performative art. I believe the very core of the spectatorship is the perception of the art piece by the viewer. It is not just about presence, but also it is about active recognition, understanding, and interpretation of the artwork. It of course doesn’t have to be verbalized in any way, it may even not make sense to the viewer, but the feeling that she/he/they would have was what matters.

From the perspective of students and designers, this article provides valuable insights into the approach and mindset required for designing interactive artwork, highlighting the importance of listening to feedback and adapting the artwork based on audience reaction. However, I believe that the author’s bias is towards creating interactive artwork that encourages audience participation and interpretation all the time, which is not an ideal thing to do because in that way such a working process may downplay the role of the artist’s intention. It may even create the potential for misinterpretation or lack of understanding from the audience, which is definitely not the intention of the artist.

 

 

Concept

I was talking on my phone with my friend I remember finding myself thinking about this project and not concentrating on the conversation. This immediately reminded me of the idiom “to have a light bulb moment”, therefore I decided to make a switch that would lighten the bulb when the phone touches my ear.

Circuit Diagram and Highlights 

I taped some aluminum foil to my phone case and some to my ear. If the phone case touches the ear, then the LED light will switch on because the circuit is connected.

Here is a link to the video of my project: Light bulb moment

I faced one challenge sticking the wires to the aluminum foil. I needed to make sure that the wire was not moving and tightly touched the foil. I resolved this by using the double-sided tape. I thought about alternative conductive fabrics when making this project, however, I eliminated other options, such as conducting tape, as I am aware that the sticky side of the tape is not that conducting.

Future thoughts and reflection

If I decide to revisit this task, I would enhance its visual appeal. I believe I can use a metal phone case and make some kind of metal accessory that could be worn on the ear. Moreover, to avoid holding Arduino and solderless breadboards, I would need to use longer wires.

I believe this project might function as a start for developing a detection program, which would lighten the bulb any time someone is dissociated and not focused when talking on the phone. Such a program would be helpful for everyone who is trying to stay motivated and not distracted during long calls.

 

Donald A. Norman: “Emotion & Design: Attractive things work better”

I really enjoyed reading this article, as it emphasizes the significance of both usability and aesthetics. The author also recognizes that it is crucial to have human interaction with products and a comprehensive design approach. I feel that the article is especially true in today’s context as the visual attractiveness of a product has the potential to greatly improve the user’s overall experience.  For instance, I found myself mentioning in a family conversation that an application from my home country’s bank is very useful, simple to use, and attractive, compared to other applications I have used in the past, which makes my overall experience with the bank account very pleasant. Although I really enjoyed reading this article, I am still interested in how to find the correct balance ratio between aesthetics and usability.

In my opinion, there is no indication of the author’s bias in this article. However, it is essential to note that the author explicitly states that he is a secret admirer of attractive products, which may emphasize that he leans more toward aesthetics and design than the product’s usability, which may function as a potential bias. Moreover, this article talks a lot about cognition and its effects on the user experience of the product but there is no empirical evidence or extensive research to support the claims the author makes. His arguments rely more on personal anecdotes and observations. This is not a bad thing to do considering the format of the article, but I am sure it would be useful for such readers as myself to have research-based evidence indicated in the article.

Her Code Got Humans on the Moon—And Invented Software Itself

I liked this article because it provides a historical account of Margaret Hamilton’s contributions to software development and her role in the Apollo space program. I believe it is very important to learn about people who pioneered the field of software development because it helps to understand the historical context and evolution of software engineering. This article not only provides insights into the early stages of the field and how it has progressed over time, but it can also provide inspiration and motivation to aspiring software engineers, showing that people with quick thinking, determination, and problem-solving skills, like Hamilton, can make a significant impact in the field. This article made me think that learning about the work of pioneers actually makes us feel appreciation for what has been done before us and what became the basis of our daily lives.

Moreover, I liked this article because it emphasizes that Hamilton was an outlier, as she was one of the few women working in tech and engineering. The article mentions how Hamilton’s role as a working mother and a spaceship programmer was challenging because people questioned her ability to balance her career and motherhood. I believe that by showcasing Hamilton’s accomplishments and contributions, the article challenges traditional gender roles and stereotypes. It sheds light on the importance of recognizing and celebrating the achievements of women in the field of software development, as well as the need for greater diversity and inclusion in the industry.

 

Concept

Instead of developing a game for my midterm project I decided to create a space for an emotional experience. I believe that midterms often bring about stress, and it’s essential for individuals to be able to relax and prioritize their overall well-being. Consequently, I designed a meditation program that would help unwind people’s minds and partake in self-care activities.

Approach and Code highlight

For the development of this project, I planned to have three different exercises breathing, mantras, and journaling. I have shown the code for the breathing exercises in my midterm progress blog post, where I designed a program of a bouncing ball that would be helpful for people to find a certain rhythm in their breathing. For the mantras, I was planning to show participants different affirmative quotes that would allow participants of the meditation program to focus on their selves. I planned to use the method of a .substring(). I found a sketch that would help to display a portion of the string, based on the mouse position, here. For the journaling exercise, I decided to give some space for the participant where they can think about some questions and have a space to write down their responses. I used a csv. file to store all of the prompts for the journaling exercises. I created an array of strings to hold the entire file and preloaded the text from the file into an array. because I only had one row for all of the prompts, I did not need to loop through each row in the file. I created an index of the random prompt in the prompt array, a variable for a random prompt, and the code that would choose 1 of the prompts from an array. I created an input window and a button that when pressed would erase the input and leave a thankful note to the participant. As the basis for building this little program, I found a code for creating an input on the reference page, here.

Here is the code and sketch for this program, which I am very proud of.

let input, submitButton, prompt;
let strings = [];

function preload() {
  strings = loadStrings("quotes.csv");
}

function setup() {
  if (strings == null) {
    print("failed to load the file, stopping here");
  }
  print("strings array contains this many lines: " + strings.length);

  // create canvas
  createCanvas(710, 400);

  input = createInput();
  input.position(20, 100);
  input.size(400);

  submitButton = createButton("submit");
  submitButton.position(input.x + input.width, 100);
  submitButton.mousePressed(prompting);

  // all the prompts in an array

  let allThePrompts = split(strings[1], ",");

  print(allThePrompts); //it has 5 prompts and they are all split. nice!!!

  // X is the index of the random prompt in the promt array
  let X = int(random(allThePrompts.length));
  print(X);

  // variable for a random prompt
  let randomPrompt = allThePrompts[int(random(5))];

  print(randomPrompt);
  //choosing 1 of the prompts from an array
  prompt = createElement("h2", foo);

  prompt.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

function prompting() {
  input.hide();
  // ? not working: how to hide the button: button.hide();
  prompt.html(
    "Thank you for your response ! Hopefully it made your day a little better ^^ "
  );
  input.value("");
}

Another part of the program, which I am very proud of and which ended up working perfectly is the three buttons in the choosing menu. I was able to program buttons myself using an image and not using built-in buttons. For this, I used object-orientated programming. I created a class, where I specified how buttons should be displayed and function when a mouse is over and the mouse is clicked on these buttons. Then, in setup, I created the three similar buttons that are in the array, which would use the commands specified in the class. Here is a code highlight of the class:

class ChoosingButtons {
  constructor(inX, inY, inImg, inScenery) {
    // what does this mean?
    this.x = inX;
    this.y = inY;
    this.img = inImg;
    this.scenery = inScenery; // where to go if this button is clicked
  }

  display() {
    stroke(0);

    print("in button display; scenery = " + this.scenery);

    // tint the image on mouse hover
    if (this.mouseOverImage()) {
      print("mouse over image");
      tint(254, 220, 220, 255);

      // furthermore, if the mouse is clicked,
      // set the scene
      if (this.mouseClickedOnImage()) {
        print("mouse is clicked" + this.scenery);
        scene = this.scenery;
      }
    } else {
      noTint();
    }

    image(this.img, this.x, this.y);

    noTint();

    print(this.img.width, this.img.height);
  }

  // over automatically matches the width & height of the image read from the file
  // see this.img.width and this.img.height below
  mouseOverImage() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height
    ) {
      return true;
    } else {
      return false;
    }
  }

  // over automatically matches the width & height of the image read from the file
  // see this.img.width and this.img.height below
  mouseClickedOnImage() {
    if (
      mouseIsPressed &&
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height
    ) {
      return true;
    } else {
      return false;
    }
  }
}

The code for the three buttons:

// make the three choosing buttons
  buttonsChoosing.push(new ChoosingButtons(20, 150, choosingImage, BREATHING));
  buttonsChoosing.push(new ChoosingButtons(235, 150, choosingImage, MANTRAS));
  buttonsChoosing.push(new ChoosingButtons(450, 150, choosingImage, JOURNALING));

Future Thoughts and Reflection

I haven’t finished this project in three parameters: the switching back and forth between the pages, and the implementation of the sound and shape. I would have added the sound and the shape (btw, I know how to do it) if I finished the switch code. However, because I am very new to coding and have never designed such a complex program of switching between multiple cases, I did not fully realize my project. I decided to take the risk of creating multiple cases in the switch statement, however, the back buttons did not work perfectly well and I spent a lot of time trying to debug it and make it work. Even though it works in the sense that it changes cases, it didn’t change the case to the one I intended. Moreover, as I designed the code for journaling exercises in another shorter program, I was having issues implementing it in my main code. I tried multiple ways of breaking it down, however, it still didn’t work.

Nevertheless, I learned a lot during this project. I now know how to program a switch statement and create my own buttons from images. I learned how to create an input box and display text correctly. I recapped how to use a csv. file to load the information and I learned how to randomly present information from this file. I also learned patience and that it is best to debug a long program by diving it into smaller programs even though it may not work when you are trying to paste it back into the main program. I also was able to practice object-oriented programming on a new level by creating buttons with it. So, even though I didn’t get all of my program to work as was planned, I am nevertheless very happy with the experience and knowledge I gained in the process of creating it.