Category: PCOMP

This week’s project is a continuation and the final piece of my “First Year @ITP Trilogy”. The name of the project is called ITP Life, and it’s a box that depicts the norm of many first year students in their first month at ITP.

It works like this:

Ideation

I got the project idea from my observation of a rotating servo. Unlike a motor which is capable of circling round and round in one direction, a servo can usually rotate only 180 degrees (some can do 360 max). So it comes with two directions.

It gives me a feeling of the progression and regression of a movement, and a symbolization of something that can go up and down. Relating to my first month’s experience at ITP, it reminds me of the work we have to do every week – as classes go by, the amount of work gradually piles up, and we keep working on them one by one until finally someday before the next class, they’re all cleared. Then the cycle begins again throughout the semester.

To express this “catch me if you can” feeling, I think it’ll be good to line up two servos vertically and in parallel, one stands for the homework, and the other stands for myself:

• In order to enable two servos to rotate vertically, I need to build a base that can hold them both in the air;
• Both servos will rotate in the same direction;
• The homework servo will have a head start, and my servo will be the one chasing the homework;
• The homework servo will gradually rotates at a constant speed, and my servo will rotate a certain degree as long as I send it a message to the micro-controller (meaning that I’ve finished my homework for a particular class).
• To make the rotation of both servos visible, I’ll need something larger to delineate the servos’ movement. In this case, I’ll make two pieces of circular cardboard, and align their centers to those of the servos.
• LEDs and paper with drawings can be attached to the cardboard circles to indicate which one is which.
• When I finally catch up with the homework (the rotation of my servo equals to that of the homework servo), I’ll be happy. So, a joyful piece of music should be played for celebration (I put the Mario Level Complete music in it). Also the LED color would change.

Circuit Design

The circuit itself is pretty simple:

• Two servos are connected to the Arduino board in parallel;
• One red LED and one 220 ohm resistor are in series, and they’re parallel to the servos;
• Same thing for a blue LED + resistor combo, and a RGB LED + resistor combo;
• A buzzer connected parallel to the servos.

Building Process

The assembly of different parts were straight forward, as seen from the images below.

Here are a few things I found worth noting after the building:

• The stability of connectivity between different components seemed to be susceptible to the rotation of servos. This had led to the unstable lighting of LEDs particularly. Without soldering, I could only attach extra tapes to glue them together.
• With only a limited number of pins available at the Arduino board, the usage of pins should be carefully planned at the beginning. We should pay attention to components that would eat up a lot of pins (e.g. a RGB LED requires three Analog pins).
• Also, the physical layout of pins should be mapped with the physical layout of components, so that the wires connecting the board and the components would not be a mess. In this case, I connected the two servos to the analog pins at both ends (pin 3 and pin 11), and reserved the analog pins in the middle for the RGB LED.

And that’s it! 😀

Code

/* ITP Life
by Yuguang Zhang @NYU ITP, Oct 3, 2018
*/

#include <Servo.h>
#include “pitches.h”

Servo servoITP; // the ITP homework servo
Servo servoMe; // my servo

int posITP = 70; // variable to store the initial servo position
int posMe = 0; // variable to store the initial servo position

int currentPosITP = 70; // current servo position
int currentPosMe = 0; //  current servo position

//Pins Setup
int ledITP = 2;
int buzzerPin = 8;
int ledCatchRed = 5;
int ledCatchGreen = 10;
int ledCatchBlue = 6;
int ledMe = 13;

// notes in the melody:
int melody[] = {
NOTE_G4, NOTE_C5, NOTE_E5, NOTE_G5, NOTE_C6, NOTE_E6, NOTE_G7, NOTE_E7,
NOTE_GS4, NOTE_C5, NOTE_DS5, NOTE_GS5, NOTE_C6, NOTE_DS6, NOTE_GS7, NOTE_DS7,
NOTE_AS4, NOTE_D5, NOTE_F5, NOTE_AS5, NOTE_D6, NOTE_F6, NOTE_AS7, NOTE_AS7, NOTE_AS7, NOTE_AS7, NOTE_C8
};

// note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
8, 8, 8, 8, 8, 8, 9/3, 9/3,
8, 8, 8, 8, 8, 8, 9/3, 9/3,
8, 8, 8, 8, 8, 8, 9/3, 8, 8, 8, 4/3
};

void setup() {
pinMode(ledITP, OUTPUT); //ITP LED
pinMode(ledCatchRed, OUTPUT); //catchup Red LED pin
pinMode(ledCatchGreen, OUTPUT); //catchup Green LED pin
pinMode(ledCatchBlue, OUTPUT); //catchup Blue LED pin
pinMode(ledMe, OUTPUT); //my LED

Serial.begin(9600);

servoITP.attach(3);
servoMe.attach(11);
servoITP.write(posITP);
servoMe.write(posMe);
}

void loop() {

for (int i = posITP; i <= 150; i += 1) {

if (currentPosMe < currentPosITP) {

digitalWrite(ledITP, HIGH);
digitalWrite(ledMe, HIGH);

digitalWrite(ledCatchRed, LOW);
digitalWrite(ledCatchBlue, LOW);

servoITP.write(i);
delay(200);
currentPosITP = i;

if (Serial.available() > 0 && posMe <=160 ) {
String message = Serial.readStringUntil(‘\n’);
Serial.print(“received:”);
Serial.println(message);

if (message == “do homework”) {
for (int j = posMe; j <= posMe + 20; j +=1){
servoMe.write(j);
delay(15);
}
posMe += 20;
currentPosMe = posMe;
}
}

} else {
digitalWrite(ledITP, LOW);
digitalWrite(ledMe, LOW);

digitalWrite(ledCatchRed, HIGH);
digitalWrite(ledCatchBlue, HIGH);

// iterate over the notes of the melody:
for (int thisNote = 0; thisNote < 27; thisNote++) {
int noteDuration = 1000 / noteDurations[thisNote];
tone(8, melody[thisNote], noteDuration);
int pauseBetweenNotes = noteDuration * 1.30;
delay(pauseBetweenNotes);
noTone(8);
}

posMe = 0;
servoMe.write(posMe);
currentPosITP = 70;
currentPosMe = 0;
}
}

posMe = 0;
servoMe.write(posMe);
currentPosITP = 70;
currentPosMe = 0;
}

On Saturday, Sep 22nd, I volunteered at the World Maker Faire hosted at the NYC Hall of Science. It was a precious and wonderful experience – I was able to see tons of interactive projects, to engage with the bigger maker community, and to learn from some of the most innovative people in NYC.

Among all projects that I got a chance to visit, one impressed me the most – an Umbrella-sized Planetarium. It looks like this:

It did not have fancy LEDs blinking all over, from top to bottom; it did not have techie-feeling AR/VR scenes through which you can peak in to the future; it did not even produce a single sound. But in my opinion, it is a brilliant project, because:

1. It cleverly adopts and integrates the conceptual model of an umbrella, where you would always hold it UP to keep the rains from falling onto you, and that of a planetarium, where you would always look UP for the stars. These shared UPWARD motions provide a clear and intuitive mapping for me to understand and use this mini-size planetarium.
2. The handle of the umbrella provides an affordance to grip and turn it around. The blue straps are tying up the wires and they somewhat work as the signifier for gripping and holding the umbrella up. The monitor attached under the face of the umbrella is turned on and emitting bright light, which serves a signifier for the eye to look at. All possible actions are clear.
3. The image on the monitor refreshes right after I pick the umbrella up. So the feedback is immediate. The star images shown on the monitor aligns with what we see in an actual planetarium. So the feedback is informative.
4. And last but not least, the pattern on the umbrella looks good 😀

My observation on how people use it somewhat resonates with my own experience:

1. When people saw this umbrella first (which is laying horizontally on the table), most of them would look straight into the monitor first (for about few seconds). Then they would put their hands around the handle, and held up the umbrella. The others would just held it up first and then looked to the screen. No one seemed to be confused about how to use it during my observation period.
2. The fun part began when people started to turn the umbrella around. As long as the monitor image was synchronized smoothly and correspondingly with the portion of sky presented under the planetarium, people would happily pointing left and right, up and down to check the different stars. But once the image got delayed and did not sync with the movement of hands, people would seemed a little confused and tried to adjust the pointing direction of the umbrella, and to figure out where to point exactly. This little mess would generally take 2-5 seconds to resolve.
3. The entire exploration of the umbrella planetarium went from 10 seconds to about a minute. Overall, I believe most people found it intuitive to use and had some fun exploring this tiny piece of starry sky.

Analog Input & Digital Output

I continued my series of reflection on my mental states this week (it’s called Fahrenheit Fright) by trying to resolve my frustration with the Fahrenheit system with a simple analog input and digital output system.

Here are the components:

With a temperature sensor and three LEDs in different color, I measured the Fahrenheit degrees in the environment, transformed them into the Celsius system, and categorized them into three discreet levels – levels that I use as guidelines for dressing up daily:

• Blue LED lighting up with any temperature under 26 C =  It’s a bit cold;
• Green LED lighting up between 26 – 32 C = It’s comfortable with one T-shirt;
• Red LED lighting up above 32 C = It’s hot! No need to bring any long-sleeves.

Here are the outputs:

And there is how it works in actual environment:

The assignment this week is to come up with a simple application for switches and LED circuits. In responding to my desperate hunt for inspirations after school begins at ITP, I made a Inspiration Charger that will (hopefully) charge inspirational power and brilliant ideas into my pen, and thereby help me survive through the first semester.

Ideation

The Inspiration Charger idea is originated from Tom’s introduction to switches in class – different from a push button, a switch will stay at one static state if no action is performed on it. So I though it might be good to make a switch that can reflect my two states at ITP recently – one is excited and full of creative impulse; the other is exhausted and needs an energy refill.

This in turns calls for a charger of inspiration. With this magical device, I can put my pen in and charge it with the craziest ideas when I’m busy running everyday errands. Once I’m ready to work, I can take my pen out from the charger, and the innovative ideas will flow immediately from its tips.

Building Process

The application itself is fairly simple and straight forward. It is a serial circuit with a resistor, an LED, and a switch. The challenge comes when I need to turn the switch into a charger that can be triggered by the insertion and removal of a pen.

After checking on the materials in the ITP Shop, I found a metal spring that seems to be good for providing both the force to hold a pen and the consistent connectivity in a circuit. So I made a simple pen stand using a piece of cardboard, attached conductive paper to its back, and glued the spring underneath.

In this way, when a pen is inserted, it’ll break the connectivity by creating a gap between the two conductive paper tiles, thereby shutting off the “Inspiration On” light and charge the pen with magical inspiration power; when the pen is taken out, the conductive paper tiles will be pushed against each other by the spring, and the “Inspiration On” light will be turned on, symbolizing that the pen is now full of imaginary power.

Final Application

This is how it works eventually:

This week’s readings include the first two chapters of Chris Crawford’s book The Art of Interactive Design and an article “A Brief Rant on the Future of Interaction Design” by Bret Victor. Both of them are insightful and thought-provoking pieces, and they led me to take an introspective look at my understanding about interaction and my working trajectories about interactivity. I’ll start with Crawford’s book first.

The Interactivity Formula

According to Crawford’s definition, interactivity is “a cyclic process in which two actors alternately listen, think, and speak”, and it has two implications: the Degrees of Interactivity, and what contributes to a high degree of interactivity.

The notion of Degrees of Interactivity reveals that it is “a continuous variable with relative measures”, rather than a “blank or white” conclusion. Upon reading about the refrigerator light example, I immediately thought about the mirror, especially the wooden mirror at the door front of ITP.

Personally, I love this mirror so much that I played with it for nearly 15 minutes on my first day at ITP. It is interactive by definition mentioned above, but at what degree? Since the quality of interactivity is gauged by the combined quality of the actors’ listening, thinking and speaking performance, is it at a somewhat lower-level interactivity since the mirror’s “thinking” was to merely reflect the my physical image regardless of however I move? And if it is, what can I do to increase its interactivity? A few things that came to my mind includes:

1. Using a camera with higher-definition CMOS to capture detailed movements of my body (i.e. to listen better)
2. Using a different algorithm to flip the wooden tiles, e.g. for ladies it would reflect a light image on top of a dark background, and for gentlemen it would do it reversely, or all tiles flip triple times if I raise my arms? (i.e. to think better)
3. Using different flipping patterns (i.e. to speak better)

In terms of the examples of dancing and performance arts, I believe AI is really a good tool to boost up the interactivity. It can be used in areas such as allowing machines to generate music according to the dance (to enhance the “think” & “speak”), or providing a generalization of a large audiences’ responses for performing artists (to enhance the “listen”).

In a word, this is indeed a good framework for us to discuss about, think of, and design around interactivity. Now, let’s turn to Bret’s article.

The Spiritual and Physical Ramification of Interaction Design

Bret’s article is centered around two utterly amazing things that we mostly ignore in our designs – “Hands feel things, and hands manipulate things.” This is true, and it had led to the prevalence of Pictures Under Glass designs nowadays.

My thinking is that although Pictures Under Glass, as a transition technology, is indeed inept for physical interaction in terms of lacking tactile responses, it is however a cornerstone in guiding our “spiritual” interaction, or in other words, the sort of interaction that functions mostly at pure information-exchange level. One of its ultimate form I believe, will be implants into our eyes so that such “pictures” are rendered real-time in our vision and the interaction is triggered by our thoughts, or brainwaves. Just image I can check tomorrow’s weather by simply reading aloud “weather tomorrow” in my mind and see the weather image right in front of my vision. This should still be easier and more efficient than getting a response from a hand-held device which vibrates one time for sunny days and two times for rainy days, right?

Hands are invaluable for physical interactions. But we shouldn’t neglect the implications of Pictures Under Glass designs in guiding our spiritual interactions as well.

And these are my thoughts of the two readings.