Ix Lab Recitation 3: Sensors (Antonius)

Name of the recitation: Sensors

Partner:  Thomas Tai

Professor: Professor Antonius

Goals for this recitation: 

-Meet with new sensors.

-Attach the sensor to Arduino and use the data from that sensor to turn an output (Servo-motor, LEDs, Buzzer, etc.) on and off.

-Document my work.

-Post an individual reflection.

-❤️

PART A (In Pairs)
  • New sensors

(sources credit to http://ima.nyu.sh/interaction-lab/category/recitations/)

 

  • What did you intend to assemble? Why did you choose that specific sensor and output?

Since both of us are fairly interested in sensors, Thomas and I decided to do something cool and challenging. We intended to assemble a circuit called “magic traffic lights”, which consisted of three LEDs respectively with color red, yellow and green, and when the sensor was moved differently, only the according LED would automatically be blinked while the rest would keep shut like a magic.

In order to realize this idea, we decided to utilize the sensor called 3-Axis Analog Accelerometer.(image below is a little different from the sensor we used in recitation).

(image credits to: http://wiki.seeed.cc/Grove-3-Axis_Analog_Accelerometer/)

Frankly speaking, this sensor seemed to be the most complicated one among the five sorts of sensors available. The reason why we chose it can be explained in two dimensions. On the one hand, since we wanted to manipulate the LEDs as precisely as we could, we dismissed the idea of using moisture sensor and vibration sensor because they seemed to be hard to control. On the other hand, compared with distance, acceleration is not static but quite dynamic, which is very interesting, so we decided to use this sensor.

In regard to the output, as we intended to make a “magic traffic light”, we certainly chose LEDs as output 💡 💡 💡.

 

  • Which materials did you use? Which circuit(s) did you use as a reference for them?

Materials we used, aside from LEDs and 3-Axis Analog Accelerometer, were all basic components of circuits such as wires, breadboard, Arduino, resistors and so on.

Since we needed to control each LED individually and separately, we referred to the exercise we have done before– Multiple Outputs with Multiple Inputs:

 

  • What sources did you use in order to program them? Did you have to modify them?

Given that we were both unfamiliar with this component, we first referred to the website offered in guidance for instructions. We were informed by the website that this sensor actually need a library:

 

However, when we decided to apply those schedules into practice, problems emerged– after we upload the library to the Arduino and decided to regulate the sensor, it just kept reporting a weird error which is called “calibrate error” :

 

 

We have tried many times and we even asked professor Rudi for help but we still failed to resolve this problem in the end. But professor Rudi gave us a very important advice was that we could use a more simple way by using basic examples built in Arduino instead of using some alien libraries because sensors produced by different companies could be rather different inside. So we mainly referred to two sources:

Examples/01Basics/AnalogReadSerial and Examples/06Sensors/ADXL3xx :

We kind of combine these two examples together and have also made some other commodification in order to realize our goal.

 

  • Which different steps you went through to make it work? Did it work as expected?

We first built the circuits with nine LEDs because we thought it would become even cooler if we could control each of them individually. However, this attempt was soon sentenced to death because too many LEDs messed up the input and output and that it was just too difficult for us beginners. So we then began with three LEDs.

After completing the circuit, we then turned to writing sketches. We first tested the function of reading serial and then since it is an analog sensor, we utilized “map” to transfer. We used if conditions to let each LED only sparkles when it is required to. We didn’t meet much trouble during coding but we ended up only using three LEDs which is a little bit below our expectation.

The final look is like this and the codes are attached below the post:

 

  • What conclusions can you draw over the work you did?

Sensors are of good importance for interactive design.

We should always begin with simple forms and gradually work for the complex one.

Modifications are of great significance and require a lot of wisdom.

 

  • Can you relate your experience building this circuit to any device you interact in your daily life?

I think the circuit we built is to some extent similar to maybe a part of our phones. As we all know, especially for some types of games or apps, when we shake our phone in different directions or at different rates, the phone will receive some different signals and accordingly conduct different reactions. Though it may not necessarily use accelerometer, I think the basic principles are almost the same.

 

  • If you were to continue experimenting, what would your next steps be?

As I mentioned before, I would strive to add more LEDs to the circuit and maybe let nine of them all receive individual orders and blink in different times. Or even more LEDs would be attached to this circuit and my final goal is to create a kind of “light waves”.

 

PART B (Individual) / Reflections

How is writing code similar to making dumplings?

First, they both consist of many different steps and the sequence of them really matters. You can never mess up the order or you won’t achieve either delicious dumplings or beautiful sketch.

Second, they both require innovation and experience. Though it may sound a little bit strange for making dumplings, innovation does matter because if you want to make tasty dumplings, you have to keep improve your recipes and learn from former experiences.

Third, practice makes perfect. Both activities need practices and effort. Endeavors and time should be paid in order to make progress in these two areas.

 

  • As Manovich describes in the Language of New Media, the influence of computers on new media is clear. In what ways do you believe the computer influences our human behaviors?

First and foremost, computer changes the way we think. This can be explained in three dimensions. Firstly, computer, especially with the help of Internet, makes it possible for us to communicate over a long distance. The earth becomes a global village and people’s horizons are no doubt greatly broadened. Secondly, computer’s fast pace of processing task and calculating helps people to think on the basis of proper, concise, abundant dependable datas. Thirdly, computer changes the way people view interaction and its combination with other tools is also revolutionary.

Also, computer creates a lot of convenience and entertainment for people, which is also a very meaningful and important point.

//magic traffic lights
const int groundpin = 18;             // analog input pin 4 -- ground
const int powerpin = 19;              // analog input pin 5 -- voltage
const int xpin = A0;                  // x-axis of the accelerometer
const int ypin = A1;                  // y-axis
const int zpin = A2;                  // z-axis (only on 3-axis models)

int xpos = 0;
int ypos = 0;
int zpos = 0;

int xoutput = 0;
int youtput = 0;
int zoutput = 0;

void setup() {
  // initialize the serial communications:
  Serial.begin(9600);

  // Provide ground and power by using the analog inputs as normal digital pins.
  // This makes it possible to directly connect the breakout board to the
  // Arduino. If you use the normal 5V and GND pins on the Arduino,
  // you can remove these lines.
  pinMode(groundpin, OUTPUT);
  pinMode(powerpin, OUTPUT);
  digitalWrite(groundpin, LOW);
  digitalWrite(powerpin, HIGH);

  pinMode(9, OUTPUT);
  pinMode(10, OUTPUT);
  pinMode(11, OUTPUT);
}

void loop() {
  // print the sensor values:
  if(xoutput >= -10 && xoutput < 60){
    digitalWrite(9, HIGH);   // turn the LED on (HIGH is the voltage level)
    digitalWrite(10, LOW);
    digitalWrite(11, LOW);
  }
  else if(xoutput >= 60 && xoutput < 120){
    digitalWrite(10, HIGH);   // turn the LED on (HIGH is the voltage level)
    digitalWrite(9, LOW);
    digitalWrite(11, LOW);
  }
  else if(xoutput >= 120){
    digitalWrite(11, HIGH);   // turn the LED on (HIGH is the voltage level)
    digitalWrite(9, LOW);
    digitalWrite(10, LOW);
  }
  xpos = analogRead(xpin);
  xoutput = map(xpos, 500, 600, 0, 180);
  Serial.print("nRaw X: ");
  Serial.print(xpos);
  Serial.print("t");
  //Serial.print("Mapped X:");
  Serial.print(xoutput);
  // print a tab between values:
  /*Serial.print("t");
  Serial.print("Y:");
  ypos = analogRead(ypin);
  youtput = map(ypos, 200, 300, 0, 180);
  Serial.print(youtput);
  // print a tab between values:
  Serial.print("t");
  Serial.print("Z:");
  zpos = analogRead(zpin);
  Serial.print(zpos);
  Serial.println();
  */
  // delay before next reading:
  delay(100);
}

Ix Lab Recitation 2: Arduino Basics (Antonius)

Name of the recitation: Arduino Basics

Partner:  Thomas Tai

Professor: Professor Antonius

Goals for this recitation: 

-Build circuits with Arduino to control LEDs to blink, fade or else with pushbuttons.

-Write Arduino sketch.

-Reflect and answer several questions.

-Personal assessment.

-❤️

 

PART A (individual)/Step 1:Using a Pushbutton
  • Problem 01: 

The first mistake I made was about how to properly connect the LED to the breadboard.

As you can see in the photo above (though it may be not very clear…👾👾👾), my LED is horizontally connected on the breadboard, which is parallel to the inside wires of the breadboard. As a consequence, the LED cannot work at all because according to the rule of electricity, all power will not go through the tiny LED but instead, only go through the inside wires which have almost no resistance. This should a simple mistake…but it really took me quite some time to debug it out..😭😭😭 I think the lesson it taught me is that I should pay extra attention to the different directions of those built-in wires of the breadboard next time to avoid “short circuit”.

 

  • Solution 01 & Reflection 01:

Reconnect the LED to the breadboard. In fact, after consulting one of the fellows, I began to realize that as long as the two pins of the LED is not parallel to the built-in wires, the LED would be fine. In other words, it doesn’t have to be perpendicular, the direction can be dependent on our needs. What I learnt from this mistake may seem to be too simple, but I hold a firm belief that among our confusions, there is no such thing that which is superior or inferior. All I have to do is figure out all the misunderstandings and resolve all my problems, which is supposed to be the most vital thing and I shouldn’t abandon those opportunities to ask questions merely out of my fear to be laughed at 😊.

 

  • Problem 02:

The second problem seemed to be kind of weird when it first emerged–my pushbutton had the opposite effect to the required one. When I pressed the pushbutton, rather than blinked the LED, the LED went out immediately instead. Similarly, when the pushbutton was not pressed, the LED was blinked while it should go out. Here is a short video clip of what was going on then:

 

 

  • Solution 02 & Reflection 02:

I felt quite confused, so I referred to the example codes again and ultimately, I found out the reason myself! What went wrong was the difference between my circuit and the circuit which the example sketch applies to, and I had carelessly neglected this distinction and just copied the example without giving much thought.

 

As you can see in the two sketches above, the left one was the failure and the other was tested to be successful. The only difference between these two sketches lies in the “if condition” in the last five lines–under the same condition, “buttonState==HIGH”, the left one will blink a LED while the right one will not. Accordingly, when the “buttonState==LOW”, these two codes will bring two opposite results. So the decisive factor is the relation between the button’s state and the LED’s state. After realizing this point, I corrected my sketch based on my own circuit and it finally worked  up to my expectation! Furthermore, this problem has given me some profound enlightenment–it’s incorrect to merely copy or completely imitate the example code without thinking thoroughly, what I should do is to adapt it or improve it based on my own circuit. 

Here is the real final version of my step 1 (it’s really a long process😂)

 

 

PART A (individual)/Step 2:Blinking an LED using a Pushbutton

This circuit is based on the first step,  with the addition of function “delay”. Changing the number in the parentheses respectively, I’ve got some really interesting works.

(Screenshot of one of my sketches)

👇One of my final works, with “delay(1000)”.

 

 

PART A (individual)/Step 3:Fading an LED using a Pushbutton
  • Problem 03: 

Actually I am little confused about the essence of this error because I thought my coding could work properly…but actually it was completely a failed test😭… As far as I am concerned, the error happened in the if condition, was it because of the use of “&&”, which in fact works in Javascript but not in Arduino? Or is it on account of other lines?

The LED shines like this and is not under the control of the pushbutton…It does everything “automatically”.

 

And my sketch is like this:

 

  • Solution 03 & Reflection 03:

Although I failed to discover my mistake, I decided to rewrite the sketch utilizing another method. I mainly focused on the if condition part where I broke the previous big condition into two parts and put one condition under the other like this, and it worked!!!

 

 

I also put the entire sketch in the “Source Code” which is at the end of this documentation.

PART A (individual)/Step 4:Make your own circuit!

My circuit works like this:

When the pushbutton is not pressed, the three LEDs on the righthand side will keeps fading. While when the pushbutton is pressed, those three LEDs will keeps lit and the other three LEDs on the lefthand side will take turns to blink every one second. So it is like a little light show acted by “traffic lights”.

  • Problem 04

All my codes worked well except for a red LED which should fade when the pushbutton is not pressed.

 

 

  • Solution 04 & Reflection 04

I found out that it was because I used pin 7 which is not a digital one for the INPUT of that red LED. I thought it was the cause and when I changed it to pin 3, it became “a healthy LED” again!

 

 

Schematic of the circuit:

 

PART B (in pairs)/Step 1: Fading an LED with a Potentiometer

There were no big problems for this circuit and we were so excited that we forgot to take pictures of the completed composition in the end but hurried to the next step. Here is only the sketch and there is also a complete one in the “Source Code”.

 

PART B (in pairs)/Step 2: Multiple Outputs with Multiple Inputs
  • Problem05

The first problem we met for this step was about how to make each potentiometer work specifically to its corresponding LED. As you can see in the clip below, the red one works well while the green one is what my partner called “dying”–the potentiometer can only makes it blinking and is even not stable at all. As for the yellow one, its corresponding potentiometer is a little bit “too powerful” so that it can even manipulate the red LED. In brief, I think those LEDs are no doubt struggling with a series of messy orders send from different potentiometers.

 

 

  • Solution 05 & Reflection 05:

We ended up figuring out that the error lay in the code we wrote. In regard to our solution, to be frank, the simplest way to summarize it is to “be more careful and make the sketch more organized”. Given that there are plenty of objects in this circuit, it is indubitably necessary to keep each input, output well-organized. The names are seemingly insignificant but in fact, on the contrary, they are very important. Aside from being orderly, they should be explicit as well. For example, at the beginning, we used number 123 to distinguish each LED, it may initially seem fine but in the end, we always find ourselves confused with questions such as what does “output1” effect. And this issue may become more important when we build more complicated circuits in the future.

So here is part of our organized version of sketch and the entire one is in the “Source Code”.

We have also added some more LEDs to circuit and the final one looks like this:

 

Also HD picture:

Schematic of the circuit:

 

Exercise 02/Answering Questions

1. During the assembly of the circuits, we used many electronic components as inputs and outputs. Which components do you recognize in the city?

A: Inputs examples: The scanners for our student ID card at the entrance of both AB and dorm, various kinds of touching screen such as iPads and our phones, the sensors at the entrance of FamilyMart, a part of Siri which is able to understand our request, different kinds of switches or pushbuttons, remote control and so on.

Outputs examples: The responding system of Siri, the speaker at the entrance of FamilyMart which is always ringing when people get into or out of the shop, the printer at our school which will print out our assignments, the automatic door which will open itself when people are in front of it.

2. According to Physical Computing, we can understand traditional computing as something that limits the interaction between human and computer to that of the keyboard and mouse, and screen and speakers. However, examples of physical

A: The question is not complete?

3.If you have 100000 LEDs of any brightness and color at your disposal, what would you make and where would you put it?

A: I would stick them all to a big arched ceiling to build a colorful starlit sky. Instead of only white lights, I would utilize LESs of all kinds of colors to create a special, colorful, unique starry sky. I would also build different constellations with different colors corresponding with the personalities they represent. I am always a girl who really loves starry sky, but on account of the pollution nowadays, hardly can people living in cities like me see any stars. Therefore, I want to build an artificial starlit sky so that people can still enjoy this beautiful view indoors.

4. Which reflections about the nature of interaction can you make about the Figure I.1 in the Physical Computing reading?

A: Considering the Figure I.1,  we mainly interact with the computers by using the five senses we possess. We see with our eyes mainly to accept the output shown on the screen. We listen with our ears mainly to assess the audio played by computers. We also touch the screen or press the keyboard and mouse to interact. Though it may sound weird, by sniffing, we can also find out if the computer is burning inside or not 😂.

PART1  STEP3
const int buttonPin=4;
const int ledPin= 11;
int buttonState = 0;           
int brightness = 0;    // how bright the LED is
int fadeAmount = 5;    // how many points to fade the LED by

// the setup routine runs once when you press reset:
void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);

}

// the loop routine runs over and over again forever:
void loop() {
buttonState= digitalRead(buttonPin);
if(buttonState == LOW) {
  analogWrite(ledPin, brightness);

  // change the brightness for next time through the loop:
  brightness = brightness + fadeAmount;

  // reverse the direction of the fading at the ends of the fade:
  if (brightness <= 0 || brightness >= 255) {
    fadeAmount = -fadeAmount;
  }
  // wait for 30 milliseconds to see the dimming effect
  delay(30);
}
else {
  digitalWrite(ledPin, LOW);
}
}

PART1 STEP4


const int buttonPin=4;
const int red= 11;
const int yellow=10;
const int green=9;
const int RED=3;
const int YELLOW=6;
const int GREEN=5;

int buttonState = 0;           
int brightness = 0;   // how bright the LED is
int fadeAmount = 5;    // how many points to fade the LED by

// the setup routine runs once when you press reset:
void setup() {
pinMode(red, OUTPUT);
pinMode(yellow, OUTPUT);
pinMode(green, OUTPUT);
pinMode(buttonPin, INPUT);
pinMode(RED, OUTPUT);
pinMode(YELLOW, OUTPUT);
pinMode(GREEN, OUTPUT);

}

// the loop routine runs over and over again forever:
void loop() {
buttonState= digitalRead(buttonPin);
if(buttonState == HIGH) {
  digitalWrite(red, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(red, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second

  digitalWrite(yellow, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(yellow, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second

  digitalWrite(green, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(green, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second

}else {
  digitalWrite(red, LOW);
  digitalWrite(yellow,LOW);
  digitalWrite(green,LOW);
}
analogWrite(RED,brightness);
analogWrite(YELLOW,brightness);
analogWrite(GREEN,brightness);

brightness=brightness+fadeAmount;


 if (brightness <= 0 || brightness >= 255) {
    fadeAmount = -fadeAmount;
  }
  // wait for 30 milliseconds to see the dimming effect
  delay(30);
    
  }


 


PART2  STEP1
const int analogInPin = A0;  // Analog input pin that the potentiometer is attached to
const int analogOutPin = 9; // Analog output pin that the LED is attached to

int sensorValue = 0;        // value read from the pot
int outputValue = 0;        // value output to the PWM (analog out)

void setup() {
  // initialize serial communications at 9600 bps:
  Serial.begin(9600);
}

void loop() {
  // read the analog in value:
  sensorValue = analogRead(analogInPin);
  // map it to the range of the analog out:
  outputValue = map(sensorValue-23, 0, 1023, 0, 255);
  // change the analog out value:
  analogWrite(analogOutPin, outputValue);

  // print the results to the Serial Monitor:
  Serial.print("sensor = ");
  Serial.print(sensorValue);
  Serial.print("t output = ");
  Serial.println(outputValue);

  // wait 2 milliseconds before the next loop for the analog-to-digital
  // converter to settle after the last reading:
  delay(2);
}




PART2  STEP2
const int buttonPin = 4;     // the number of the pushbutton pin
const int redledPin =  11;      // the number of the RED LED pin(s)
const int greenledPin =  9;      // the number of the GREEN LED pin(s)
const int yellowledPin =  10;      // the number of the YELLOW LED pin(s)
int brightness = 0;    // how bright the LED is
int fadeAmount = 5;    // how many points to fade the LED by

//Potentiometer variables
const int redanalogInPin = A0;  // Analog input pin that the potentiometer is attached to
const int greenanalogInPin = A2;  // Analog input pin that the potentiometer is attached to
const int yellowanalogInPin = A1;  // Analog input pin that the potentiometer is attached to

//More variables
int redsensorValue = 0;        // value read from the pot
int redoutputValue = 0;   // value output to the PWM (analog out)
int greensensorValue = 0;        // value read from the pot
int greenoutputValue = 0;        // value output to the PWM (analog out)
int yellowsensorValue = 0;        // value read from the pot
int yellowoutputValue = 0;        // value output to the PWM (analog out)


void setup() {
  // initialize the LED pin as an output:
  pinMode(redledPin, OUTPUT);
  pinMode(yellowledPin, OUTPUT);
  pinMode(greenledPin, OUTPUT);

  //Serial communication init
  Serial.begin(9600);
  
}

void loop() {
  // POTENTIONMETER ------------------------------------
  // read the analog in value:
  redsensorValue = analogRead(redanalogInPin);
  yellowsensorValue = analogRead(yellowanalogInPin);
  greensensorValue = analogRead(greenanalogInPin);
  // map it to the range of the analog out:
  redoutputValue = map(redsensorValue, 67, 1023, 0, 255);
  yellowoutputValue = map(yellowsensorValue, 67, 1023, 0, 255);
  greenoutputValue = map(greensensorValue, 67, 1023, 0, 255);
  
  // change the analog out value:
  analogWrite(redledPin, redoutputValue);
  analogWrite(yellowledPin, yellowoutputValue);
  analogWrite(greenledPin, greenoutputValue);

  // print the results to the Serial Monitor:
  Serial.print("redsensor = t");
  Serial.print(redsensorValue);
  Serial.print("tyellowsensor = ");
  Serial.print(yellowsensorValue);
  Serial.print("t greensensor = ");
  Serial.println(greensensorValue);
  
  // END POTENTIOMETER --------------------------------
  
  // wait 2 milliseconds before the next loop for the analog-to-digital
  // converter 
  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  //  digitalWrite(redledPin, HIGH);
  //  digitalWrite(greenledPin, HIGH);
  //  digitalWrite(yellowledPin, HIGH);

}

Ix Lab Recitation 1: Electronics (Antonius)

Name of the recitation: Electronics & Documentation

Partner:  Thomas Thai

Goals for this recitation: 

-Build basic circuits.

-Try to document the work.

-Reflect on this week’s readings and answer several questions.

-❤️

CIRCUIT ONE

Components used:

Breadboard – Holds and connects every component of the circuit conveniently and effectively.

12 volt Power Supply – Converts the 220v output into 12v.

LM7805 Voltage Regulator – Converts a 12v input to a consistent 5v output

100 nF (0.1uF) Capacitor – Used to charge and voltage regulation.

Push-Button Switch – Mechanical button which is used to manipulate the circuit by determining the electricity going through to flow or not.

Buzzer – Works as a speaker and can make a beep sound when the circuit functions. Needs 5v.

Barrel Jack Jumper Cables (Hook-up Wires) – Connects each component of the circuit to make sure electricity can flow properly.

Description of the process:

(image credits to ima.nyu.sh)

 

I admit that we have met a lot of problems for this first circuit and they literally popped up everywhere, making this exercise really a big challenge to our group in the beginning. We first began with reading the schematic and realized that it was basically a series circuit, so we thought it was nothing difficult and began connecting components to the breadboard without carefully reading the guidance for them. It was the first mistake we made and because of it, our “first draft” failed on account of our wrong way to connect the voltage regulator to the circuit. Thanks to one of the fellow’s “debugging”, we found out that we had connected 2 to the output and 3 to the ground, which was definitely a big mistake and made us become aware of the significance of reading necessary instructions for unfamiliar components before putting them into circuit.

 

 

Aside from this, we also made several other mistakes such as forgetting the connection rule of the breadboard: ( It was at first clear in my mind that holes on two sides are lengthwise connected while for middle part are crosswise connected but as the circuit got more and more complex, we sometimes became confused and forgot that basic rule. The result was self-evidently a mess like this and after discovering this mistake, we decided to tear everything off and restart 😭 ;((

 

(one of the many failure)

 

During the process, I admitted that I also made several mistakes that I shouldn’t have made because Professor Antonius had already emphasized them in class…(sorry for this==) For example, we sometimes forgot to cut off the power while adjusting the circuit and we also forgot to specially use wires of different color to distinguish and make our breadboard more explicit… But I really promise that I won’t make theses mistakes again after really practically making them…😂!

Also, what I learnt from this exercise was the ability to “debug“. Given that I have taken communication lab before, this word is not a stranger to me because when writing codes, debugging is both a necessary step and a vital skill. However, I now understand that it is also an important step for making circuits and we have to do it carefully and patiently when we find the circuit doesn’t work as we expected.

So here is the final look of our composition one😛:

 

How to interact with the circuit:

I guess just press the button-like switch and you will receive a wonderful beep singing beautifully~

Reflection:

Yeah! Despite a lot of problems, we finally completed the circuit! I was very happy and I also gained a lot from this practice. This is my first time to make a circuit based on breadboard and I really enjoyed this wonderful experience with my new partner! 😁

 

CIRCUIT TWO

Components used:

Breadboard – Holds and connects every component of the circuit conveniently and effectively.

12 volt Power Supply – Converts the 220v output into 12v.

LM7805 Voltage Regulator – Converts a 12v input to a consistent 5v output

100 nF (0.1uF) Capacitor – Used to charge and voltage regulation.

Push-Button Switch – Mechanical button which is used to manipulate the circuit by determining the electricity going through to flow or not.

220 ohm Resistor – Lowers the 5v output from the voltage regulator into 3v in order for the LED to work properly.

LED – Light diode that accepts 3v.

Barrel Jack Jumper Cables (Hook-up Wires) – Connects each component of the circuit to make sure electricity can flow properly.

Description of the process:

(image credits to ima.nyu.sh)

 

Due to the experiences and lessons we got in the first exercise, this circuit two became much more easier. Based on the first circuit, we only replaced the buzz with a LED and added a resistor to it so that the LED would’t bomb up or even die 😂.

So the completed circuit works like this:

 

(with the help of the “light machine”, HD pictures are now available!)

The video version:

How to interact with the circuit:

Press the button-like switch and you will encounter “a shinning star” 🌟 🌟 🌟

Reflection:

As the old saying goes, practice makes perfect. With the experiences we got from the first circuit, I was doing much more better this time and I also developed a new skill this time– taking high digital, beautiful, wonderful, fantastic, marvelous pictures of my cute circuits!

 

CIRCUIT THREE

Components used:

Breadboard – Holds and connects every component of the circuit conveniently and effectively.

12 volt Power Supply – Converts the 220v output into 12v.

LM7805 Voltage Regulator – Converts a 12v input to a consistent 5v output

100 nF (0.1uF) Capacitor – Used to charge and voltage regulation.

Push-Button Switch – Mechanical button which is used to manipulate the circuit by determining the electricity going through to flow or not.

220 ohm Resistor – Lowers the 5v output from the voltage regulator into 3v in order for the LED to work properly.

10K ohm Variable Resistor (Potentiometer) – A knob to control the amount of voltage sent to the LED in order to control its brightness.

LED – Light diode that accepts 3v.

Barrel Jack Jumper Cables (Hook-up Wires) – Connects each component of the circuit to make sure electricity can flow properly.

Description of the process:

(image credits to ima.nyu.sh).     

 

This circuit is also based on the previous examples but this time comes a new friend–variable resistor. As a new component, it also has its unique way of being connected so we again, met some trouble this time.

After reading the instructions, again, we quickly completed this circuit. But I still had some doubt about the distinctions among three different connecting points of the resistor. So out of curiosity, I asked a fellow and he told me that the middle one must be connected to LED or else, its resistance won’t change and consequently, the brightness of the LED also won’t change. Either side is OK for the LED but not the middle one. I think it is kind of interesting to figure out all the curiosity instead of leaving them there and I am really grateful to all the helpful fellows!

 

So here is a video of our work (the change may not seem so obvious though)

 

How to interact with the circuit:

Rotate the variable resistor and the brightness of the LED will consistently change. Isn’t it amazing?

Reflection:

Make friends with new components is always a lot of fun and it is also meaningful to understand how they work!

 

ANSWERS FOR EXERCISE 2

Question 1:

YES. I think the circuits we built are no doubt interactive. According to the reading, the definition of interaction is “a cyclic process in which two actors alternatively listen, think, and speak”. So under this circumstance, the user is an actor who is relatively active and the circuit is the other actor. In the first two circuits, user can command the circuit by pressing the button to let the buzz or LED work or not, while in the last circuit, user can even control the brightness of the LED by rotating the potentiometer. So it is evident that one actor can accordingly respond to the other, and it can be even considered to be a mutual process because the circuit can also influence the user’s response.

Question 2:

Sensors: Potentiometer and switch

Actuators: Speakers and LED

Question 3:

As an open-source platform, Arduino is meant to simplify the process of developing electronic devices. It makes it possible for people without knowledge of electricity also able to create their own interactive electronic devices. Various communities are also gradually formed and people can share their creations with others who are also interested in them or are in need for them. Different ideas can clash together and inspire each other, which often gives birth to some fantastic new creations and this is no doubt good for the development of interactive arts. Also, Arduino provides a interface friendly to programming and allow producer to both easily and precisely control the sensors and actuators. As a result, sensors and actuators can work perfectly with the user according to the codes. What’s more, the examples given by the speaker are also convincing evidence for the argument that Arduino is good for interactive arts.

 

Week 14: Emily’s Final Project Documentation (Cici&Alvin)

Name of the project: Food Trip

Type of the project: Internet Art Project (utilize html, css, javascript (&p5), photoshop and more)

Group members: Emily & Frances

Link of the project:http://10.208.8.141/~zq404/foodtrip/map.html

Description of the project:

This project is an internet art project based on website, applying coding like html, css, javascript and especially p5, and other techniques like photoshop. Our project is an educational mini-website targeting on kids who always love junk food and its name is Food Trip. So basically, the project is about a little journey for a little cute character the user selected. User will go to three different pages and there will be three interactions:

  1. “DIY bubble tea”
  2. “Draw a unique hamburger”
  3. “Snap as a French Fries”
The intro page of our project

Two little characters user can select from

Process: 

We first just decide to make a little website about food only for entertainment and aims at people of all age. However, we then find it hard to design a website that appeals to every body and we want to find a meaningful social benefit for it, too. Fortunately, after the class proposal, thanks to Cici and Alvin’s suggestions, we finally figure out what we really want to make–an educational website only targeting on kids. It is not a limitation but rather, an opportunity to make our project more specific and more concrete. After working out an initial plan, we then divide our work mainly into two parts–coding and photoshop, I am mainly responsible for the coding part while Frances doing the photoshop. But it does not have an absolute line, in other words, we do everything together and it is a fantastic cooperation. 😊

How our project works:

As what I mentioned before, our project will first have a page for user to select the character they like and then it will begin with the first one–“DIY a bubble tea”. This one mainly applies p5 and user can choose whatever ingredients they want, including sugar and ice. The best function is what I learnt in Jiwon’s workshop! The color bubble!

(press space to let them move!)

But after clicking on the “pack it” button, there will be a pop-up window at the side telling you that the bubble tea is actually not healthy and kids shouldn’t drink them too much. Playing this little game online is more than enough 😂.

The pop-up window and when you onmouseover, there will be another animation telling you it is actually incorrect.

(on-mouse-over will change)

And after clicking on the button next, user will go to the second page, which is “Draw a unique hamburger”. This part involves p5 again and also a tiny community. For this part, we use filter effect and also critics from our users. And user is also able to save the drawing they draw to their desktop with the filename “hamburger”.

screenshot of part of the page 2

And when user click “finish drawing”, there will be a pop-up window again and if continues, there will be page three which utilize webcam. User are able to take photos of themselves and the image will automatically become the “brand” of a cute French fries.



(of course, there will be a pop-up window again 🙈🙈🙈)

And at the end, we will have a map page again so that user can choose to play which part they like again and again ! ☺️☺️☺️

We really wrote a lot of codes this time and this is really a challenge to both Frances and I, I think in total, there are nearly one thousand lines or even more 😭 but it is really also a big break- through!

(screenshot of a little part of the coding which is about give a button a value and put it in an if condition to control)

Post-mortem: 

In general, I think our project is very successful because the final effect is very satisfying. Though there are still some regrets like we fail to figure out how to make user’s drawing appear at community which is really a pity. But in all, I really like this project and I hope that it is a perfect ending for my communication lab journey! ❤️❤️😊❤️❤️!

Week 11: Response to Web Work: A History of Net Art (Cici&Alvin)

In this article, Rachel Greene clearly illustrates the origin and development of what he calls, the “net.art”. As he depicts in his work, Internet is not only a tool like a painting brush (like what we have just read), but rather, it is a platform with abundant freedom for creation and art. As is known to all, freedom and liberty are necessary, or even indispensable for great creation of art. Therefore, with the birth and rapid further development of “net.art”, many “net.art” communities are established and developed at an amazing rate. Also, as Internet features convenient connections and communications, it’s very simple for those communities to contact and interconnect with each other. Easy access to other groups who share a similar idea is the prerequisite for cooperation and unity, while the collaboration will  generate great power which is not only in terms of art, but also many other areas like social issues, politics or even revolutions.

This is interesting for me because before, I only consider the power of art on a very limited level.  I used to hold a firm belief that art is only an elegant way for entertainment and it can at most affect issues related to art. However, after reading this article, I begin to realize that art, especially “net.art”, is not only a way to amuse, but instead, it is a crucial way to express an individual’s opinions or sometimes a community’s appealing and ideas. In this way, I think net artists are somewhat like a group of politicians with elegance and wisdom–they use graceful lines rather than cold policies to sketch the blueprints of their ideal society; they are also like gentle revolutionists, who use brilliant colors instead of violence or weapons to fight for justice, love and freedom.

(source from Web Work: A History of Net Art)

When I saw this net art, the first thing occurs to me is Modernism. Because they are not traditional style of art but kind of like an attitude, a strong belief which pursues freedom and liberation. This really impresses me because I realize that art is also an inheritance. Though medium keeps changing, the main spirit of art can be well preserved  and improved from generations to generations.

However, “net.art”, the paradise for liberal art, is also facing threat and restrictions. Greene also mentions that the freedom should be guaranteed and preserved. Yes, freedom is important, but we have to give this freedom an extent. In other words, does absolute freedom really a good thing for net art and even our society? Or shall we limit it on a scale which is both appropriate and safe? Lack of freedom is a dark prison without hope while extreme freedom is just a relative to chaos and disorder. For art, for society, for ourselves, in my opinion, freedom is like salt, yes, it is crucial and significant to life, but once taken too much, it can also cause harm or even death.

 

Week 11: Proposal for Internet Art Project (Cici&Alvin)

Project name: Little Johnny’s food trip (just temporary, very likely to be changed 😂)

Project type: Internet Art Project (utilize html, css, javascript (&p5), audio, video and more)

Group members: Emily & Frances

Description of our initial ideas of this project: 

For this project, Frances and I decide to mix all what we have learnt before and since we are all girls…we really want to do something cute and interesting. Therefore, after a long discussion, we reach an agreement on our topic–“food” and our project’s name is ” Little Johnny’s food trip” ( temporary). So in brief, our plan is to make a mini website about different food, which involves audio, video and interactions with Javascript animation. This time, we will provide our users with very detailed instructions and will design our layouts as both clear and attractive. In regard to the style, we will make it like cartoon and use a lot of drawing similar to my previous comic project.

How our project works:

We will have a home page which is like a map with several “food shops” (handmade?) and a little character named Johnny. User can click on button to decide which shop to go. And we will use animation here, when user choose a shop, the little character will automatically walk to that shop just like real shopping. And we now have designed three “shops”.

One is a dumpling shop, here is like a little game. Users can choose what they want to put in the dumpling. To add fun, we may provide some crazy material, too. Then if the combination is good, the little character will appear to be content, while if not, the little character will throw up and even die.

The second option is a hamburger shop called NYU Donald’s. User can draw their ideal hamburger through p5 animation. We will also have some images drawn by former users at the bottom of the page and new user can give them comments and mark stars to show how much they like them.

The third one is NYU cafeteria…This part is mainly a video using what we learnt about film editing. We will film the cafeteria food and students’ remarks on those food. And at the end we may have some new interactions which haven’t been decided yet.

This is only our initial draft plan. We may make some or even a lot of adjustments to them later.

 

Week 11: Response to “Computers, Pencils and Brushes” (Cici&Alvin)

Are we gradually become the loyalest willing slaves to computers? Are we lost in the coding world with illusory 0 and 1? What is our mind? What are the real ourselves? And, where is the happiness? All these questions are what came to my mind after I read this article.

As the author argues in the article, we are more and more manipulated by computers nowadays and this has become a serious social problem. With the increasing use of new techniques featuring computers, people gradually forget that computers are also tools like pencils and brushes instead of “gods”. We grow into more and more dependent on computers and in the end,  “lose the precious experience of practicing, revising and reflecting”. It is creepy that if the cost of using modern technique is sacrificing our own humanity, is it really worthwhile? (source:www.pinterest.com)

As far as I am concerned, it may sound like a cliche, but computer is indeed a double-sided sword. The key point is how we design it and how we use it. We are living humans and we should be the one who take the initiative. For designers, they should design computer towards a better way, a way that is appropriable and good for whole human beings. Computer should be improved and polished towards a better tool instead of a monster who will deprive the freedom from us. While for users, we should recognize that if we over-rely on those techniques, we will make them become “barriers to the link between mind and work”, which is definitely what we don’t want to see. We should treat those tools properly and pay more attention to our mental world. We shall practice, we shall revise and we shall reflect, using our own brain, our own mind, instead of only depending on those electric machines.

Besides, in terms with this topic, computers, I come up with one ted talk I have recently seen, that is What happens when our computers get smarter than we are? by Nick Bostrom. In this ted talk, he talks about the future of human-level machine intelligence. He argues that artificial intelligence may be a big threat to humanity if not used properly. But meanwhile, if we used them in a correct way, to let them help with what we value and help with humanity, the world will become better instead of worse. That is what he said:”We invent super-intelligent AI and have to make sure their perfect safety to humans”. It is hard, but the key point is how we design, same as the assigned reading, which is very impressive and thought-provoking.

Week 11: Response to “Hackers and Painters” (Cici&Alvin)

Hackers and Painters?

Before I read this essay, in my mind, I have to admit that they are two completely different items, or even two contradictory existences. One is scientific and rational, while the other is passionate and emotional. These two images are exactly what those two concepts like in my mind:

(hackers, resource:gettingsmart.com)

(painters, resource:google.com.hk)

However, after reading this profound and meaningful essay, something changed in my mind. I began to realize that hackers and painters are to some extent, very consistent with each other. To support this, the author first points out that “both hackers and painters are makers”, or more precisely, they are both creators. Creativity is a crucial requirement for them because of course, it’s self-evident that painting needs a lot of creativity and inspiration while only few people understand that hackers also need a lot of creativity. Hackers are not mechanical coding machine, their real value exists in creating some new, original, innovative softwares and writing some codes that are beneficial to the whole world. Secondly, another commonality shared by both hackers and painters is that both of their jobs need a lot of time and efforts in order to become perfection. And what’s more, both hackers and painters, at least the real ones, are not only willing to but also strive to achieve the best. An initial draft of coding is like a rough sketch of painting, only after a lot of corrections(debugs) and improvements, can a satisfying software or painting really come to this world. Though, there are many barriers nowadays preventing coding becomes a form of art, for example, many bosses force their employees to code like a machine or as the author defines, ” a robot translating readable language into computer language”, there are still ways we can take to overcome this situation. A effective way may be what the author favors–“hackers having day jobs”. 

Besides the two similarities which are already mentioned above, I also find some thing interesting in this youtobe video clip. According to Agarwal, both hackers’ coding and painters’ painting focus on “the incredible juxtaposition of essentially the micro and the macro”. Agarwal also puts up an interesting point is that “computer language is the only new language we create recently and every one should understand it because it’s important”. I think this point really worth noticing because as computers more and more popular, it may be the time to let computer language takes off.

Week 11: Emily’s Video Project Documentation (Cici&Alvin)

 Name of the project: Seven Deadly Sins of Students

Type of the project: Interactive Video Project on Webpage

Group members: Mostafa, Patricia, Emily

Link of the project:http://10.208.8.141/~zq404/7sin/SDS.html

Description of the project:

Our project is a interactive video project based on website, applying coding like javascript, html, css, and other techniques like video editing and photoshop. It presents seven sins that can happen on students, which are pride, greed, lust, gluttony, wrath, sloth and the last one–envy. We decide to let the main actress performs the first six sins and let a mysterious character to present the seventh sin so that it creates a sense of mystery for our users. The rough story is like this: Vittoria (the main actress) is a girl who literally has EVERYTHING, she is rich and she is beautiful; she is popular and she has good grades…But she still wants more–a handsome boyfriend. One day, however, her dream came true. She began dating a handsome boy and they really had some sweet, romantic time after that. But, suddenly, one day again, they broke up. The boy left Vittoria and she began to go insane–“wrath, gluttony and sloth”. How does all it happen? Is it a coincidence or a purposefully designed plot? In the end, NYU Conan provides his answer and reveal all the riddles. It was the envy girl, a friend of Vittoria, who had planned everything. Isn’t it creepy? THIS IS NOT ALL! We have designed more during the video and after the main video! Go and watch it now! Hope that you will like our project!

The first intro page is like this, as you can see there 
is a "PRIDE",one of the seven sins, on the screen. But itis not all, other six sins will appear too. Based on a
gif made by Photoshop and accompanied by creepy music, we
hope this page can impress you a lot.😊❤️

Process:

First, we discussed and decided to use this topic. Second, we worked together for hours and finally worked out the whole plot and the storyboard, which I have posted before. Third, we shoot the film together and we all actually act in the film…It was fun but also tiring because in order to get the best effect, we had tried many different ways to shoot and act. But also, during this process, I found myself better at taking videos and in addition, cooperating with others, which I think is really a big achievement. While taking videos, we also designed the website and the interactions. We discussed for many times and worked together for a lot of time. When we met problems, we would always try to overcome it together. And with the help of Instructors and workshop, we finally managed to realize most effects we design! 🙂

a part of our storyboard

How our project works:

After user click on the link on the intro page, we comes to the main page of our project. As we can see, there are only six sins on the screen and if you move your mouse over those little blocks, they will play a short cut of the video and when you move mouse away, they will pause. In the center is the main video and below the video, as the video is playing, there will be interactions down below with the use of Inner HTML. There will be links or description of the sin which is presented then. We will use the current time function as well.

screenshot of our main page


screenshots of the interaction below the video

(a pop-up window of the interaction part)
(look here we have a link for another page in the comment box, we hope it can help improve our interaction)

In the last, we will have “a secret clip” to explain everything which is super dramatic…

At the very end, a button named “Time to Confess” will appear and if user click it, they will go to a new page to write down their sins and confess. They can submit the input and something interesting will happen again. A window will pop up and there will be an audio to end our whole project. For this part, we apply the use of webcam to work as a mirror.

screenshot of the last page

In the end, I want to show the very beginning of our video which is one of my favorite clips.

A clip of our video 😊

Post-mortem:  In general, I think our project is very successful because we realize the most effects we expected. For the video part, though, the final result is not completely same as we had designed, for example, we are not able to use a WeChat format in one scene, we really create something even more interesting in the end. The last part, the flashback is one of my favorite because it is really exciting! When it comes to the webpage, I would say all our group members have made a really big breakthrough and I really love our web design. For the interaction parts, again, we have made some changes during the process, so it is not entirely the same as we first planned to be. But the new application of webcam is such a challenge and we are all very excited about it for the presentation. Also, the spirit of teamwork and the power of cooperation impress me a lot and I really gain a lot from this treasuring project! 😊

Week 8: Storyboard Update (Cici&Alvin)

Project name: Seven deadly sins of students

Group members: Emily,Mostafa,Patricia

Description of our project: 

We have changed a little bit of the story line because we want to make it more focused and concentrated. Our story will present six sins (pride, greed, lust, gluttony, wrath, sloth ) on the seemingly main actress and the mysterious seventh sin on another mysterious character…(you will know after watching our video 🙂

Description of our storyboard:

We decide to use a lot of different ways of shooting to present different scenes and we really get many inspirations from other films we have watched before. We also try to take some sample shots with our phones to decide which is the best way.

Here are our storyboards…They are a little messy and…abstract…but we hope it can be turned out to be really good video in the end!!!

 

(part of our storyboards)