Author: Yupu Chen

Concept: A Digital Petting Zoo

For the final project, as we are required to combine both Arduino and p5js, I decided to do a digital petting zoo. I take the inspiration from an actual petting zoo, which looks like this:

In this digital petting zoo, the p5js will act like a map of the zoo and shows the information about the animals. The visitor will be able to navigate the zoo using controllers connected to Arduino. In this zoo, I plan to have three to four animals. For these animals, I plan to make physical prototypes using cardboards and other materials. These physical prototypes will be equipped with different sensors according to different animals so that the visitor can interact with them. For example, some shy animal may have a distance sensor while outgoing one might have a light sensor so that it can sense the petting of the visitor.

Additionally, to add some fun to the experience, there will be some tasks for the visitor to complete, such as feeding them, petting them, etc. This sort of imitates the famous old device, a Tamagotchi:

The user interface should represent something like this:

Therefore, this project aims at making the visitor feel like walking around a petting zoo as well taking care of the animals there using Arduino and p5js.

For this assignment, I collaborated with Shahd. We based our project on the example codes and made changes as we see appropriate. Shahd did the second exercise and I did the first exercise. We worked together to complete the third exercise.

Video:

Exercise 1:

p5 sketch:

int leftLedPin = 7;
int rightLedPin = 4;


void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);


 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);


 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);
 pinMode(rightLedPin, OUTPUT);


 // Blink them so we can check the wiring
 digitalWrite(leftLedPin, HIGH);
 digitalWrite(rightLedPin, HIGH);
 delay(200);
 digitalWrite(leftLedPin, LOW);
 digitalWrite(rightLedPin, LOW);






 // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data
    Serial.println("0,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


   if (Serial.read() == '\n') {


     int sensor = analogRead(A1);  //potentiometer
     Serial.println(sensor);
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

Exercise 2:

int leftLedPin = 6;


void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);




 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);


 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);


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




void loop() {
 // wait for data from p5 before doing something
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH);  // led on while receiving data


   int brightness = Serial.parseInt();
   analogWrite(leftLedPin, brightness);
   if (Serial.read() == '\n') {
     Serial.println("0,0");
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

Exercise 3:

int leftLedPin = 7;
int rightLedPin = 4;


void setup() {
 // Start serial communication so we can send data
 // over the USB connection to our p5js sketch
 Serial.begin(9600);


 // We'll use the builtin LED as a status output.
 // We can't use the serial monitor since the serial connection is
 // used to communicate to p5js and only one application on the computer
 // can use a serial port at once.
 pinMode(LED_BUILTIN, OUTPUT);


 // Outputs on these pins
 pinMode(leftLedPin, OUTPUT);
 pinMode(rightLedPin, OUTPUT);


 // Blink them so we can check the wiring
 digitalWrite(leftLedPin, HIGH);
 digitalWrite(rightLedPin, HIGH);
 delay(200);
 digitalWrite(leftLedPin, LOW);
 digitalWrite(rightLedPin, LOW);






 // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);  // on/blink while waiting for serial data
    Serial.println("0,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


   int LED_STATE = Serial.parseInt();
   //int right = Serial.parseInt();
   if (Serial.read() == '\n') {
     digitalWrite(rightLedPin, LED_STATE);
     int sensor2 = analogRead(A1);
     delay(5);
     Serial.print(sensor2);
     Serial.print(',');
     Serial.println('Y');
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

 

Graham Pullin discusses the assistive technology with the respect of aesthetic designs as well as the functionality in the book Design Meets Disability. She talks about the intersection of design and disability, examining how design can be inclusive and accessible to individuals with disabilities.  Importantly, Graham gives a retrospect to how some assistive devices such as glasses have transformed from a mere medical devices to fashionable items and other tensions that exist between design and accessibility. With this, Graham challenges traditional notions of assistive devices and explores the idea that disability should not be viewed solely as a medical problem to be solved but rather as a social and cultural issue that design can address.

For me, this reading is thought-provoking and eye opening. It not only showed me many design examples of daily item, but also inspired me to think about them in the topic of disability. What is so special about disability? How should our designs be adapted to disability? Do they need to look good? Do they need to be simplistic? All these tensions are more complicated when considering the context of disability. Even not in the case of accessibility an disability, the tensions introduced by Graham are worth thinking when concerning good designs. This also reminds me of the previous reading “Do Attractive Things Work Better
. This reading also talks about the relation between aesthetics and functionality. And Graham’s piece seems like an extension to the scope discussed in this reading.  And more significantly, Graham’s discussion reveals an important but usually neglected goal of designs, which is advocating for a more inclusive and accessible world.

Concept:

For this assignment of designing an unusual musical instrument, instead of making an instrument that can be actually played by people, we decided to make something that produces music on its own. Among all the electronic components we have, we think that the servo motor will be the perfect choice to show the mechanical movement of the music. And we decide to use the ultrasonic distance sensor as the main part that produces music. While the servo motor moves, the pad attached to it will move as well, leading to the changes in the distance measured by the ultrasonic sensor. According to different distances, the speaker plays sounds of different frequencies.

IMG_4401

Highlight of the code

For coding this self-playing musical instrument, we used the functions like map() that match the distance to the frequencies. We used the distance sensor code from the documentation example. While manipulating the servo motor’s position, the simple codes can produce surprising music. More over, we have the button that changes the frequency range. Whenever the button is pressed, the whole melody will be played at a higher frequency.

// 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);


}

Reflections and Improvement

As for improvements, the appearance of the instrument could definitely be improved. For example, the entire device could be enclosed into a box that’s called music box. That will make the project more interesting and appealing. Moreover, we could include the function that allows the user to change melodies as they want. They can, for instance, manipulate the movement of the arm and the hand with a potentiometer. This gives more interactivity to the project.

In this reading, Bret Victor gives a problem that widely exists in the current visionary design for future interactions. He believes that all these visionary designs for the future have ignored the human capabilities and specifically omit millions of possible things our hands can do. The future interaction vision of the Picture Under Glass is, according to Bret, a retrograde of technology and interactions.

I think that Bret indeed makes a valid point in pointing out that future interaction designs do not make the use of the full potential capabilities of human bodies. And I can imagine that once we have the designs that enable us to interact with daily objects with our full capabilities, there will be so much more things that currently are not even imaginable becoming possible and accessible. However, as the question goes in the follow-up article, Bret does not provide a solution and he just can’t give a solution.  Even when reading this article, I actually nodded in agreement with Bret’s argument, but I couldn’t personally imagine what the ideal world for Bret would be. Will we be interacting with physical objects then? But it’s obviously not a progress in terms of interactions and technology. But again, I am in line with Bret and truly look forward to the day when our fully capabilities could be achieved in interaction designs.

This article makes me think of a recent invention I saw online. It was like a physical embodiment of Siri. This physical virtual assistant can be interacted with different modes and is capable of dealing daily affairs for its users. This virtual assistant could be activated via voice control or tapping and is powered by AI. Will this be the future given the fact that it does make our life easier?

Link to this machine introduction: https://www.youtube.com/watch?v=5fQHAZWOUuY

Concept

For this assignment, I imagined to simulate a kind of animals using just LEDs. It took me some time to decide on which animal to imitate because the information communicated by LEDs can be very limited. Then, suddenly an idea came to my mind: a chameleon that is sensitive to light! To do this, I used a light sensor and a RGB LED as the analog input and output. The RGB LED will change color as the sensor detects different amount of light, just like chameleon changing color with its environment. Besides this, I used a button and a normal LED as the digital input and out. This simulates the situation where the chameleon is found out by its predator and got eaten. So, if the button is pressed, the red normal LED will be on and the RGB LED will become white, regardless of the light sensor.

(Due to the quality of the video, the color change might not be so obvious in the video. But it works really well in reality.)

 

IMG_0922

Highlight of the code

The code is relatively easy. It essentially uses map() to take different ranges of RBG values and pass them to the RGB LED respectively.

#define RED_PIN 3
#define GREEN_PIN 5
#define BLUE_PIN 6
#define LED_PIN 12

void setup() {
  Serial.begin(9600);
  pinMode(RED_PIN, OUTPUT);
  pinMode(GREEN_PIN, OUTPUT);
  pinMode(BLUE_PIN, OUTPUT);
  pinMode(A0, INPUT);  //light sensor input
  pinMode(2, INPUT);   //button input
  pinMode(LED_PIN, OUTPUT);
}
int value = 0;
int buttonState = 0;
int lastButtonState = 0;
int LEDState = LOW;
void loop() {
  value = analogRead(A0);
  lastButtonState = buttonState;
  buttonState = digitalRead(2);

  // the LED is on when button is pressed, and off when button is pressed again
  if (lastButtonState == 1 && buttonState == 0) {
    LEDState = !LEDState;

    digitalWrite(LED_PIN, LEDState);
  }


  if (LEDState == HIGH) { // if the red LED is on, RGB LED is always white
    setColor(255, 255, 255);
  } else { // make the range of R, G, B different from each other
    int R = map(value, 100, 1000, 0, 255);
    int G = map(value, 100, 1000, 255, 0);
    int B = map(value, 0, 1000, 0, 100);

    setColor(R, G, B);

    Serial.println(R); // for debug
  }
}

void setColor(int R, int G, int B) {
  analogWrite(RED_PIN, R);
  analogWrite(GREEN_PIN, G);
  analogWrite(BLUE_PIN, B);

Reflection and Improvement

I think the challenge of this assignment for me is to convey meaningful messages through LEDs and their own inputs, which are relatively limited. However, the use of RGB LED gives me more flexibility and makes the project a little more interesting. If I were to improve it, I would make an actual chameleon using some materials like cardboards. This might make the concept of the assignment more visually concrete.

For the first reading, I think it is very interesting and resonates with another talk I watched for another class. In the talk, the speaker talks about that everything is a remix. He believes that there are hardly completely original works in creativity; they are somewhat based on previous works. The creativity in these works is the way different elements are interpreted, arranged, and connected. I think Tigoe refers to something similar in the field of physical computation. All the examples Tigoe gives are common things with some computational (unusual) features. Indeed, it will be perfect if we all can developed something brand-new. However, it is a more common case that we are unable to do so. So, I think Tigoe is right in pointing out that the challenge of physical computation (or the most innovative, fun part of this field) is how we can turn old, common, or non-interactive things into interactive ones, with the features that are meaningful and intuitive for users. Therefore, I think Tigoe’s writing has two takeaways for me: 1. Creativity is not equal to complete novelty. Interesting arrangements or adds-ons of old things can spark great fun and creativity; 2. These new features added to common things should have meaningful and intuitive interactions.

For the second reading, I generally with Tigoe. For interactive media work, as we discussed in previous weeks about what interaction means, the entire artwork or performance should not only include the artist, but also the audience. The audience input (interaction with the work) is what makes each interactive work interesting and unique to each experiencer. In other words, a good interactive experience should be distinct to each individual as a result of their different behavioral and emotional inputs and experiences. The openness is a significant defining feature of interactive artwork. However, I think Tigoe only touches a bit on the issue of the extent of this kind of openness. He only mentions that ” If they’re not supposed to touch something, don’t make it approachable.” But essentially, where should the expression of the artist stand? Is it always a good practice to make audience explore on their own and make their own sense of the artwork? Maybe, reflecting on my own experiences of visiting interactive exhibition/experiences, for some of the works, which are particularly difficult to comprehend on my own, I would prefer to have the artist’s narration beforehand so that at least I would get lost and think “this doesn’t make sense at all!” Therefore, I think it’s also a good question to ask: in what kind of projects should the artist reveal their own expression before the audience experiences it.

Concept

This project is inspired by the moustache switch example. In the example, the creator used conductive materials to mimic moustache and made them into a switch. Then, I think of the very first Arduino program everybody learns: Blink of the LED. A idea comes into my mind: why don’t we actually blink when the LED blinks? Therefore, I decide to follow the same manner of the moustache switch to make a blink switch.

video_blink

Highlight

I think the highlight of this little project is the attachment of the wires to the conductive materials and to the eye muscles. It is critical to decide which part of the eyes to attach the conductive pieces to so that they are sensitive enough to close the circuit when blinking.

Whenever the user blinks, the movements of the muscles will make the to conductors touch each other, making it a closed circuit. 

Reflections and Improvements

I think generally the project is interesting and can be expanded if more coding is added and more complicated sensors are used. It explores the possibilities of other parts of the body and movements as switches other than just hands. The project can be further improved by using better conductive materials that can be attached better to the skins with more compatible sizes to make the interaction more smooth and create better user experience.

I think the first and the second reading is both contradictory and complementary to each other in talking about the relationship between functionality and aesthetics.

The first reading centers around the question “Do attractive objects work better”. The author argues that it is okay for things to be aesthetically appealing even when the appearance is not necessarily related to its functionality. But he also points out that for objects people use when they are under stress and need a series of actions, the functionality outweighs aesthetics. I think his argument is true and important to keep in mind when designing everyday objects, such as the teapot example in the article. With things like teapots, even if they are not functional at all, people can just enjoy it looking at it and have a bit of fun. And in many real life cases, such as phones and furnitures, appealing things actually work better with us; people more tend to buy and use objects that look better than just function well.

However, the second reading points out the case where the argument of the first author does not hold. In the case of Apollo and related softwares, full attention to functions and details is what matters. Aesthetics is not important at all, as any error in functionality could result in irreparable harm. In this case, what works well is more significant than what looks good.

Taken together, both readings shed light on a central principle in HCD, which is the balance between aesthetics and functionality. And I think what’s more important here is the balance should be based on the essential purpose of the design, which should be the driving force of all kinds of designs.

Concept:

Link to the sketch: https://editor.p5js.org/Yupuuu/full/p-mvwnETP

This project takes its inspiration from the coffee shop example given by Professor Shiloh in class. My idea is to integrate some cultural elements into such an experience, Therefore, I decided to create an experience of a Peking Opera Village, in which users can listen to and learn about Peking Opera and hopefully can eventually appreciate it. The overall idea for this project is that the user enters the village through an arch and arrives at a traditional Peking Opera theater. Here, the users are able to see the main stage, some paintings on the wall, tables, tea and teapots, the opera information, and even play a little trivial game.

Design and Implementation:

The most significant design of the experience is the main stage. For this part, I wanted to create something like this:

Recognizing the complexities of such a sophisticated design, I decided to make a simplified version of it. The simplified version consists of the use of both online images and primitive shapes of p5js. The essential elements that constitute a Chinese style stage remain, such as the yellow dragon and phoenix  patterns, the little fences, and the color of Chinese dark red. Combing these elements, I have created this stage for my project:

Particularly, I am proud of the lanterns swinging animation. This adds a bit fun to this static display of the stage. This is realized by the following code:

lantern.resize(55, 0);
 // the left lantern
 push();
 translate(690, 0);
 rotate(angle);
 image(lantern, -25, 0);
 pop();

 // the right lantern
 push();
 translate(780, 0);
 rotate(angle);
 image(lantern, -25, 0);
 pop();

 // the swing effect of the lantern
 angle += lan_speed;
 if (angle >= 10) {
   lan_speed = -lan_speed;
 } else if (angle <= -10) {
   lan_speed = -lan_speed;
 }

Moreover, whenever the user hovers their mouse onto an interactive object, the cursor will become a hand, indicating the interactivity. This explicitly navigates the user’s interaction in the scene without disturbing the holistic aesthetics of the setting. This is realized by the following code:

if (mouseX >= 28 && mouseX <= 48) {
      // back button
      if (mouseY >= 320 && mouseY <= 348) {
        cursor(HAND);
      }
    } else if (mouseX >= 200 && mouseX <= 838) {
      if (mouseY >= 0 && mouseY <= 418) {
        // stage
        cursor(HAND);
      }
      if (mouseX >= 755 && mouseX <= 805) {
        //paper on table
        if (mouseY >= 493 && mouseY <= 545) {
          cursor(HAND);
        }
      }
    } else if (mouseX >= 45 && mouseX <= 170) {
      //painting on the left
      if (mouseY >= 0 && mouseY <= 158) {
        cursor(HAND);
      }
    } else if (mouseX >= 900 && mouseX <= 1050) {
      // opera today
      if (mouseY >= 10 && mouseY <= 105) {
        cursor(HAND);
      }
    } else {
      cursor(ARROW);
    }

Another interesting part of my project is the little trivia challenge for the user. They can click on the paper on one of the table in the main scene, and it will show them the challenge. To complete the challenge, the user will have to read the Opera Today on the wall to get some information about the opera clip I chose. Then, the user will be asked three questions about the information of the opera. Currently, there is not scoring or reward system with this challenge. This just adds some interactivity to the experience.

Reflections:

For this project, I think the overall output is satisfactory. However, it is clear that to truly replicate an experience in a Peking Opera theater need a lot work than this. Due to the limit of time, I wasn’t able to duplicate all the details. If time allows, for example, I would add some audience, waiters, ect, to make the environment more lively and realistic. Moreover, I could add more sounds, like crowd sounds, to make the soundscape of the experience more realistic. Lastly, I could improve the challenge to make it record score and have a reward system. But this indeed need a lot more efforts and time.

One problem I ran into and was not completely solved is the lagging of the character when moving. As the program progresses, the opera singer on stage’s motion will become more and more lagging. I suspect that the problem is due to the huge memory the program is taking when running for a long time. I tried remove(), but this didn’t work as expected. Then I used clear() whenever the scene changes; this works a bit, but not perfectly. So far, I am not sure how I can solve this problem.