Session 4: Re-work an existing assignment by using functions


Source Code

I used The Constructor Function to compartmentalize my work last week, which was built by nested for loops. Every drill shape consists of 100+ different rectangles rotating in the corresponding angle. I set the column number, row number, and the width of rectangles as changeable parameters. As a result, I can quickly create different kinds of drill shapes by changing the parameters in the constructor function. What’s more, I used mouseIsPressed() to create conditionals. By default, the rectMode is CORNER, which would make the shapes like seaweeds floating in the water. If the mouse is pressed, the rectMode() will transform to CENTER, which is similar to the drill shapes I created last week.

if (mouseIsPressed) {
 rectMode(CENTER);
 }
 else {
 rectMode(CORNER); // default
 }

 

Session 5: Photocell and Servo Motor

This week, I am experimenting with the photocell sensor and servo motor. Here is what I did:

As you can see, when I used the flashlight to illuminate the installation, the sun rose; When I removed it, the sun went back to its original position. The logic behind is very simple. When the brightness is higher than the threshold, the servo starts to move gradually to a specific position and stays static. When the brightness is below to the threshold, then servo goes back to the original position and stays. Only the threshold value could trigger the behavior of the servo. In this practice, I utilized Smoothing to create stable analog input from the photocell. Besides, I created a boolean switch which allowed the servo to stay static when it goes to a specific position. The following are is the code I wrote:

#include <Servo.h>
Servo myServo;
const int numReadings = 10;

int readings[numReadings]; 
int readIndex = 0; 
int total = 0; 
int average = 0;

int inputPin = A0;
boolean lowPos = true;

void setup() {
 Serial.begin(9600);
 myServo.attach(9);
 for (int thisReading = 0; thisReading < numReadings; thisReading++) {
 readings[thisReading] = 0;
 }
}

void loop() {
 total = total - readings[readIndex];
 readings[readIndex] = analogRead(inputPin);
 total = total + readings[readIndex];
 readIndex = readIndex + 1;
 if (readIndex >= numReadings) {
 readIndex = 0;
 }
 average = total / numReadings;

Serial.println(average);
 delay(1); 
 if (lowPos == true && average > 100) {
 for (int i = 0; i < 20; i++) {
 myServo.write(90 + 3 * i);
 delay(600);
 }
 lowPos = false;
 }
 if (lowPos == false && average > 100) {
 myServo.write(150);
 }
 if (lowPos == false && average < 100) {
 for (int i = 0; i < 20; i++) {
 myServo.write(150 - 3 * i);
 delay(600);
 }
 myServo.write(90);
 lowPos = true;
 }
 if (lowPos == true && average < 100) {
 myServo.write(90);
 }
}

Session 3: Interactive artwork by using for() loop

For this assignment, we have to work in pairs. At the very beginning, we didn’t know how to collaborate in coding since we are both beginners in programming. To avoid getting lost in the ocean for coming up with an idea, we reached a consensus that we have to build something first rather than stuck in the brainstorming stage. The first step is playing with for() loop and doing experiments. Secondly, take a look at each other’s work and try to find an intersection or complement. Third, figure out how to combine it together.

Let me introduce my work first.

Idea 1: DNA


Source Code

 

Introduction:

I used a simple for loop and trigonometry functions to create this artwork. I experimented Sine, Cosine, and Tangent function and I observed that the combination of waves from Sine and Cosine looks like a DNA(double helix) structure. Hence, I start to think about how to make it more like a DNA structure. Eventually, I added lines between two circles in the same column.

//Basic Structure
var CircleNum 
var Diameter = 10
for ( i = 0; i < CircleNum; i++) {
var x = i*(width)/(CircleNum);
ellipse(x,height/2+30*sin(50*i+frameCount/100),Diameter,Diameter)
}
//Lines between the circles
line(x,height/2+30*sin(50*i+frameCount/100),
x2,height/2+30*cos(PI*(3/4)+50*i+frameCount/100))
Idea 2: Drill


Source Code

 

Introduction:

This structure was built by nested for loops. Every drill shape consists of 100 different rectangles rotating in the corresponding angle. I put the frameCount to rotate() function to animate it. Besides, I used (10*i+3*j) to give every single rectangle different radian initial value. That’s why it looks orderly. The push() and translate() functions put every rectangle to the corresponding position. The pop() function bring the rectangles to the original state.

//Basic Structure
var countRow = 5; //Row x
var countCol = 100; //Column y
var rectW = 80; //Width
for ( i = 0; i < countRow; i++) {
    for ( j = 0; j < countCol; j++) {            
        var x = i*(width)/(countRow-1);      
        var y = j*(height)/(countCol-1);     
        push(); 
        translate(x, y); 
        rotate(radians(10*i+3*j+frameCount)); 
        rect(0, 0, rectW, rectW,5); 
        pop();
    }
}
 My Teammate – Alexandra’s Work


Source Code

 

Introduction

Her artwork mapped mouseY value with the green and blue value of the color of the circles. Besides, she randomized the red value from 0 to 255 to make the color more diverse.

Here is the final artwork after we combined our idea:

Final Artwork 1


Source Code

 

Final Artwork 2


Source Code

 

Session 4: Analog Output

My goal of this assignment is to create an Arduino piano with digital input and analog output. I used 7 different switches as the digital input and use a speaker as an analog output. Each switch corresponds to a pitch(C, D, E, F, G, A, B). If a switch is pressed, the speaker would make the corresponding pitch.

However, It didn’t work very well. When I pressed different switches, the pitches sound exactly the same. I’ve checked every circuit of the switch and every line of the code. I still can’t find what’s the reason lead to this situation so far. I am still debugging it. Hope I can find out in the class.

The following is the circuit:

The following is the code I used:

#include "pitches.h"

void setup() {
 Serial.begin(9600);
 pinMode(2, INPUT);
 pinMode(3, INPUT);
 pinMode(4, INPUT);
 pinMode(5, INPUT);
 pinMode(6, INPUT);
 pinMode(7, INPUT);
 pinMode(9, INPUT);
}
void loop() {

int buttonStateK1 = digitalRead(2);
 int buttonStateK2 = digitalRead(3);
 int buttonStateK3 = digitalRead(4);
 int buttonStateK4 = digitalRead(5);
 int buttonStateK5 = digitalRead(6);
 int buttonStateK6 = digitalRead(7);




if (buttonStateK1 == 1) {
 
 tone(9, NOTE_C4, 300);

} else {
 noTone(9);
 }

if (buttonStateK2 == 1) {
 
 tone(9, NOTE_D4, 300);

} else {
 noTone(9);
 }

if (buttonStateK3 == 1) {
 
 tone(9, NOTE_E4, 300);

} else {
 noTone(9);
 }

if (buttonStateK4 == 1) {
 
 tone(9, NOTE_F4, 300);

} else {
 noTone(9);
 }

if (buttonStateK5 == 1) {
 
 tone(9, NOTE_G4, 300);

} else {
 noTone(9);
 }

if (buttonStateK6 == 1) {
 
 tone(9, NOTE_A4, 300);

} else {
 noTone(9);
 }


}

Session 3: Storyboards

Sound Work Debrief

First, what I learned the most from this project is user testing. In this project, we wanted to create the perspective from a cockroach. As a result, we didn’t put any dialogue into the soundtrack. However, this led to a negative effect. Based on my observation, listeners didn’t know when to have next step even if we create a map for users. The connections between sound and environment weren’t enough to allow listeners to understand what’s happening in the sound. Secondly, even though we recorded the soundtracks from a very low angle, we didn’t really create the effect from a little creature’s perspective. We should have added more distorted effect to differentiate the audio sensor of human beings and insect.

Storyboards
ADOLLS Dolls for Adults

Do you ever just want/need your own time and space? Do you look attractive and non-threatening? Do you always find yourself in situations where people insist on invading your personal space? Whether it’s on public transportation or in public restrooms, the library, movie theaters etc., we want to help you solve this problem. Introducing ADOLLS: Dolls for Adults to help you get out of awkward and uncomfortable situations. This portable and collapsible mannequin will deter those who choose to ignore social norms and courtesies by sitting/standing next to someone when there are clearly other options available to them.

1 (Medium Shot)
2 (Zoom Out)
3 (Medium Shot)
4 (Medium shot)
5 (Over-The-Shoulder Shot)
6 (Medium Shot)
7 (Long Shot)
8 (Medium Shot)
9 (Close Up)
10 (Medium Shot)
11 (Medium Shot)
12 (POV Shot)
13 (Close Up)
14 (POV Shot)
15 (Close Up)
16 (Medium Shot)
17 (Tilt)
18 (Tilt)
19 (Zoom In and Pan)
20 (Medium Shot)
21 (Medium Shot)
22 (Medium Shot)
23 (Medium Shot)
24 (Zoom In)
25 (Medium Shot)
26 (Close Up)
27 (Medium Shot)
28 (Zoom In)

 

Session 3: Observation of interactive technology in public

Before I started my Journey in NYU ITP, I had never been to New York City before. The first night I arrived in Manhattan, I was amazed by this innovative city service.

NYC Link allows users to access city maps, directions and making video calls; two free USB charging ports for smartphones; a phone allowing free domestic calls. The Links also provide the ability to use calling cards to make international calls, and each Link has one button to call 911 directly.

Link NYC

At first glance of this interface, I noticed the 911 button first since the button is red, which is the most eye-catching color and symbolizes danger. And then I saw a phone keyboard next to it, a headphone icon and jack, and USB power source icon. So far, without any context and illustration from the screen above, I can know several affordances of this device.
1. I can call the police immediately by pressing a button.
2. I can charge my smartphone
3. I might be able to make a phone call. The reason why I was not 100% sure about it is that phone keyboard can also be used to enter passwords or commands.

I was so curious about this unique interface, so I started to use it. The landing page is very friendly, which tell users what they could do with Link NYC. After tapping it, you can see a dashboard as follows

As you can see, users can do many things with this device. However, based on my observation, people rarely use these fancy interfaces. I have only seen people do two things. First, charge their phone. Second, use the free phone call. I am pretty sure people would use the free Wifi but I can’t observe this behavior since I can’t track the pedestrians on the street. I think the reason people don’t use the function like Maps, Local weather, and the other information-oriented functions is straightforward. Everyone has their smartphone. Everyone can Google everything anytime and anywhere. Who would use Link NYC to see the weather today? As a result, these information-oriented functions seems redundant not only for local people but also for tourists. All in all, I think this is a great design even though it exists some redundancy. Free charger and free Wifi are super helpful in nowadays since smartphone had become our primary information sources. Also, for people who do not afford to use payphone or smartphone, this is a very friendly universal design in the city.

Simple application using digital or analog input and digital output

Schematic

Arduino Code
#define LED1 5
#define LED2 6
#define LED3 7

void setup() {
 Serial.begin(9600);
 pinMode(LED1, OUTPUT);
 pinMode(LED2, OUTPUT);
 pinMode(LED3, OUTPUT);

}

void loop() {
 int potState = analogRead(A0);
 Serial.println(potState);
 if (potState > 200){
 digitalWrite(LED1, HIGH);
 } else {
 digitalWrite(LED1, LOW);
 }

if (potState > 500){
 digitalWrite(LED2, HIGH);
 } else {
 digitalWrite(LED2, LOW);
 }
 if (potState > 800){
 digitalWrite(LED3, HIGH);
 } else {
 digitalWrite(LED3, LOW);
 }

}

Session 2: RGB triangle

Source code

My second-week design is an extension of my first-week work. I drew an impossible triangle primarily by quad(). This week, I started to experiment the how to use variables to create something cool upon my design. My goal of this assignment is to create elements which can interact with each other and combine the shape I made last week. Hence, I started to think about what can be related to triangular shapes? Eventually, I used the idea of RGB color.

(Source: Wikipedia)

In my work, I created three circles which move over time with a static route. The three circles start from the corresponding points of the triangle and go to the inner part. They would bounce back when they reach the edge of their corresponding hexagon. As you can see, when circles go into the inner part, they will create an overlapping effect, which can demonstrate the rationale of RGB color.

Here is the precise route illustration of the three circles.

To allow users compare the overlapping effect in different brightness environment. I let the position of mouseX to control the brightness of the background. As you can see, when the background is darker, the Red, Green, Blue circles are more noticeable.

Here are the codes I used to adjust the brightness of the background. I created a canvas-size rectangle and mapped the transparency to the position of mouseX.

trans = map(mouseX,0,500,0,100);
fill(0,trans);
rect(0,0,500,500);

What’s more, in my design, every time you run the sketch, the hue of the background is different.

Here are the codes I used to execute the color theme of the environment. I used HSB as my ColorMode to control the colors. To make the whole image visually consistent, I only set the hue as variance, which changes over when restarting the sketch. Saturation and brightness are static.

hueX = random(0,255);
colorMode(HSB, 255); 
c1 = color(hueX, 70, 255, 40); 
c2 = color(hueX, 70, 225, 40); 
c3 = color(hueX, 70, 195, 40); 
c4 = color(hueX, 70, 185, 40);

The link to the p5.js code sketch

Session 2: A sonic journey throughout ITP’s 4th floor from a cockroach’s perspective

Team Members: Yuan Hau & Martin Calvino

The sonic journey described here narrates ITP’s 4th floor from a cockroach’s perspective.

The conceptual aspect of the narrative in our sound walk addressed the commonality of space and time among two different classes of organisms: insects and mammals.

Because of the disproportionate difference in the scale of their body sizes, cockroaches and humans have a different relationship with the objects that compose their environment. 

Throughout history, artists have used changes in scale as means to explore the difference in how we perceive the relationship among elements within a single artwork. Similarly, we questioned how our perception of ITP’s floor (and building in general) was affected by approaching it from the worldview of a cockroach.

Although cockroaches have been inhabiting our planet even before the time of dinosaurs (since the Carboniferous period about 320 million years ago), they are negatively perceived by us primarily because of their appearance, their nocturnal behavior and their association with careless or messy human habitats. It is estimated that about 30 species of cockroaches (from 4,600 taxonomically identified) co-inhabit spaces with humans.

Because ‘the image’ of a cockroach is intentionally excluded from the art piece, and because we focused instead on the sound of its journey through the building, the negative perception associated with this insect is not present, and thus its behavior becomes the sole narrative for the exploration of the building through sound. 

Interestingly, cockroaches are social insects and they also exhibit parental care and collective decision-making behavior. They are also omnivorous. This means that the exploration of ITP space from a reduction in size/scale from humans relative to cockroaches does not necessarily mean the obliteration of behaviors common to both species. Thus, the sound walk can be considered to have a humanized sentiment to it. 

Questions that emerge from the sound piece are:

Is the cockroach alone? Is its journey on his way to meet another member of its group and is suddenly interrupted by the daily activities of humans? Does the feeding and behavior of the cockroach as we imagine for humans to be? If this is so, why do we start from the kitchen, where food is located? There are inherent assumptions that are indeed humanized even though we focus on a cockroach as the focus for the sound piece.

The intended character for the work of sound presented here is intrigue and adventure. The narrative arc is described as follows:

1. Exposition: 

The cockroach is feeding inside the garbage can next to the sink and refrigerator. It gets to the top of the can and then drops to the ground.

2. Rising action:

The cockroach finds itself on the ground, staring at people feet’s imposing presence walk by making scary noises (footsteps and chairs moving). It turns attaches itself to a women’s clothes and travel along from the trash can towards the elevator. Just before entering the elevator, the women notice the cockroach on her pants.

3. Climax:

The women start shouting and tried to kill the cockroach

4. Falling Action:

Scared, the cockroach flies away to the ventilation system just next to the elevator and above Dan O’Sullivan’s office. There is a moment of relief and reflection as to what to do next to keep itself alive

5. Resolution

As the cockroach notices a human opening the window right behind Anna’s desk in the elevator lobby, she flies out of the building and into the outer world. The piece ends with an adventurous feeling of what might come next

Materials & Methods

Sound samples were collected and recorded using H4n Zoom audio recorder with built-in microphones and the addition of two condenser microphones. Thus, we could record 4 channel audio samples for this experiment. We used the settings and guidelines suggested in class when using the H4n recorder. Audio samples were imported into Adobe Audition CC to create an audio composition that was ultimately exported as a single piece. For the sound that emulated the flapping of cockroaches wings, we use the resource freesound.org.


Soundwalk Map

Figure 1. Schematic diagram of ITP’s 4th floor in which the starting point in the sound walk is the trash can located next to the sink and refrigerator (A.1). From there the walks continue into the corridor towards the elevator (B.2). At the entrance of the elevators, a women notice the presence of the cockroach and tries to kill it (C.3). The cockroach flies into the ventilation system right next to Dan O’Sullivan’s office (D.4), and from there into the outer world through the window (D.5).

Final thoughts

When we started the project our original idea for sampling sounds was to explore transitional spaces within the building. Our draft did not incorporate at the time a narrative that would ‘transform’ the building into a different thing through sound, as Marina Zurkow had suggested us at the time. Based on this, we explored the approximation of the building from the perspective of a cockroach as our second idea (originated from Yuan Hau). That’s how this work came to be. 

Next steps

We need to include a process by which we can synchronize the behavior of the listener to certain sound triggering events in the pieces as to ensure that each segment of audio listens at the proper location.

Session 1: Creative Switch

My goal of this assignment is to create a periodically changing switch. After I decided my goal, I start to think about what kind of things change periodically? Simple Harmonic Motion then popped up in my mind. All of a sudden, something in the high school physics class flashed through my head – Newton’s Cradle.


Newton’s Cradle (Source: Wikipedia)

Here is the rationale of the Newton’s Cradle:

When one sphere at the end is lifted and released, it strikes the stationary spheres; a force is transmitted through the stationary spheres and pushes the last sphere upward.

Typically, Newton’s Cradle has five metal balls. I simplified it to three because of two reasons. First, the contact area between two balls is very tiny. As a result, the conductivity between more than two balls drastically decreased compared to the two-balls sets. Secondly, my original cradle was not a perfect theoretical equipment; the collision didn’t work very well as ideal situation.

Here is my sketch for the circuit:

To make it more clear, I would like to use the following two graphs to illustrate. There are two LEDs in parallel. When one ball at the end is lifted, one of the LED will disconnect. Once it released, it strikes the stationary ball in the center; force is transmitted through the stationary ball and pushes the last ball upward. Then, the other LED disconnect. Ideally, the LED would switch periodically and look like a “tic-tac” effect.

Top view of my circuit

Side view of my circuit

However, I met two difficulties afterward. First, I have to replace the balls’ nylon line on the outer side with conductive materials to make the circuit work. The first material I used was copper wire, which was too elastic to let the balls swing smoothly. Second, the resistance of the metal balls is quite high, which can barely make the LED light up. Fortunately, a second-year ITPer introduced me two things which could probably make my idea come true. The first is copper tape. I pasted it to my metal ball to increase the conductivity. The second is the conductive thread, which is as soft as nylon that could make the metal balls swing smoothly.

Copper tape(left side);Conductive Thread(Right Side)

Here is the final look of my switch.

A closer look

Unfortunately and sadly, it doesn’t work well as the video shows below. The metal ball in the middle didn’t stay static after the other balls stricken it. Eventually, three balls swang together and LED kept blinking. In my view, I attributed my failure to the things which helped the balls more conductive. First, the copper tape ruined the perfect surface of the sphere. Second, after I replaced the nylon line with conductive thread, I didn’t adjust to a perfect angle to create a proper collision.

However, this failure taught me a lot even if the outcome was far from my imagination. It’s nice to see the gap between theory and practical execution. The difficulties and failure I met have become my assets in the future. I look forward to my next project!

Session 1: My first p5.js drawing!

The link to my work

My goal of this assignment is to create 3D shapes by using 2D primitive shapes. After I set up my goal, I started to think about what would be a cool 3D shape. All of a sudden, an idea flashed through my mind. The well-known Penrose triangle, which is an impossible triangular object.


Penrose Triangle (Source: Wikipedia)

Afterwards, I started to tear down this shape into different components and research how to draw it by p5.js libraries. I found out that Penrose triangle consists of three hexagons as shown below. However, there is no function to draw a hexagon in p5.js libraries. Fortunately, it can be divided into six quadrilaterals and I there is a function called quad() which allows you to draw quads.

The Breakdown of Penrose Triangle

Let’s look at the quad() reference first.

Syntax

quad(x1,y1,x2,y2,x3,y3,x4,y4)

Parameters

x1 Number: the x-coordinate of the first point
y1 Number: the y-coordinate of the first point

As you can see, I have to find out every single points’ X and Y coordinates. Then, I move on to do the math on my sketchbook. About half an hour later, I suddenly have a voice in my mind that told me “The Penrose triangle looks like an equilateral triangle. Is it possible that the whole Penrose triangle consists of equilateral triangles?” I left my sketchbook aside and used Adobe Illustrator to test my assumption. Fortunately, the answer is yes, and this finding could let me calculate every point’s x and y coordinates easier and faster.

Math on my sketchbook

Penrose triangle consists of equilateral triangles
(Produced by Adobe Illustrator)

X, Y coordinates of every point
(Produced by Adobe Illustrator)

I was so excited after I get all the X and Y coordinates and then I entered it as soon as possible in p5 to create my very first version.

Yes, it looks so dull and 2D. To make it more like a 3D shape, I used lerpColor() to generate gradient colors and noStroke() to remove the redundant lines. Besides, I adjusted the position by manually plus 40 pixels in every X coordinate and 50 in every Y coordinate. I know there must be a clever way to do that, but so far I am not capable of doing that by writing something more advanced.

It looks way better than the first version. However, I thought I need a “finishing touch” to make this image more interesting. So, I added a simulated cylinder which consists of two rectangles and two ellipses.

It was so much fun to start from an idea, and then tearing down the problem, research how to execute it by programming and then make it real. I  learned a lot from this a bit challenging yet enjoyable process.

There are three reasons triggered me want to learn how to code. First, I was a designer before, and I worked in a tech startup as a UX designer. I used bunches of software to create wireframes, prototypes, mockups, and simulated things. In the past, I had to rely on software engineers to execute my ideas. I designed, they coded. However, I don’t want to confine myself. Instead, I want to get my hands dirty and made things happen by myself. I am so curious how the computer executes my idea and how to interpret all the analog things in the real world into code. I want to research, design, code, and make things happen.

Secondly, I believe programming is a good way to train my problem-solving skills. What l learned from this assignment is that coding is to tear down something big into something small. I think this mindset can make a complicated problem seems less intimidating than it looks.

Third, I want to do interactive data visualization, such as windy.com. Besides the practical uses and the social benefits from this website, it’s super cool and super attractive for me. I want to make something like this.