Final Project Blog Post

Author: Wanchen Zhao (Leslie)

Instructor: Antonius

My Definition of Interaction

From my understanding, “interaction” in interactive media is the communication between human beings or the environment and a certain range of devices. These devices and gadgets are produced from various technologies and tools, including Processing, Arduino, 3D printing, laser cutting, etc. Such devices contain sensors that sense different variables, and are supposed to respond accordingly when these variables change or are in certain ranges. It’s people or the environment that can make these variables be in different conditions that the devices can sense. The “interaction” refers to the process of devices responding to the variables accordingly.

In addition, there should always be an adequate reason that a user would desire to use the device. The reason can be to facilitate everyday life for either everybody or a community (for example, people with certain disabilities), to provide entertainment, or to provide a unique user experience.

Final Project Proposal

For our final project, we’re thinking about a user experience designed for marketing purpose of the coming Dr. Strange sequel, where Dr. Strange meets Thor. It will be based on the magic gloves we created for our midterm project, but this time we will lose the gloves, and combine our midterm patterns with a device newly introduced to us called Leap Motion. We’re thinking about turning the pattern I did into a puzzle, because it’s not symmetric in any ways, and all the shapes making up the pattern is in one layer. Regarding Frank’s pattern, since that one has different layers and is largely symmetric, turning it into a puzzle would be over complicated; plus, a puzzle of a highly symmetric pattern would generate many visually correct solutions, yet only one solution could be inserted into Processing, so it wouldn’t make sense. Therefore, we’ll use Frank’s pattern as more of a user experience than a game, and the user would have to use the Leap Motion complete that pattern, hence to make all layers of the pattern appear, before the physical door opens and a virtual invitation to the sequel’s premiere appears.

Critique of Established Form of Interaction

The most important form of established interaction for our final project is Leap Motion. It requires attaching a small USB, called Leap Motion Controller, to a computer with the corresponding app. By using 3 infrared LEDs and 2 monochromatic IR cameras, the devices senses a roughly hemispherical area, and the furthest distance is around 1 meter. It recognizes human hands, both palms and all the fingers, as input, and enables hands to move objects around on the screen without touching the controller.

From my personal perspective, the pro of Leap Motion is that it facilitates, or even enables the creation of relative user experience; the con is that most users would be first-timers, so they usually wouldn’t be familiar with how large a range the controller can sense, so it might not be too accurate.

The way Leap Motion relates to our final project is that we would like to move puzzle pieces around, and complete the latter pattern on either a screen or a projector using this device. We want to create a user experience that resembles Kinect.

Week 10: Experimenting with Tinkercad

Author: Wanchen Zhao (Leslie)

Instructor: Antonius

Lab section: 1:15~2:30 pm

Today we’re experimenting with Tinkercad. I chose to experiment with a Thumb Joystick, and create a game controller on Tinkercad. This is how the Joystick loos like:

Screen Shot 2017-04-21 at 4.08.29 PM

I thought it was possible to make a hole of the exact shape of the Joystick inside the game controller, and I did so. First I made the shell of the controller with one box and 2 round roofs standing up. The width and length of the box is the same as that of the Joystick’s bottom, while the height equals to the 12.1 mm, which is the height of the Joystick’s electric components combined.

Screen Shot 2017-04-21 at 1.53.24 PM

Next I created the bottom of the Joystick, which is 1.6 mm tall (1.6 mm = 7.3 mm + 31 mm – 36.7 mm). The tiny semicircles at the four sides’ diameter is 4.2 mm. The two on the shorter sides of the box are in the middle, while the four on the longer sides are each 10 mm towards the sides. Three are solid shapes while three others are set to “holes”.

Screen Shot 2017-04-21 at 2.03.36 PM

Next I created the cylinder to fit in the top of the electric components of the Joystick. This part is 5.7 mm tall (5.7 mm = 7.3 mm – 1.6 mm), and needs to be lifted 1.6 mm above the plane. The diameter equals to the width of the box, which is 20 mm. Finally it’s combined with the bottom.

Screen Shot 2017-04-21 at 2.07.09 PM

Then I realized that before I transfer these parts into a hole and insert them into the shell of the controller, I would also need to create a space inside the controller to fit in the wires and other small particles on the left side of the cylinder. Creating a box of the same height as the cylinder would do it.

Finally I transferred these parts into a “hole”, and inserted it into the shell of the controller. In order to make the hole visible, I set the controller’s shell to “transparent”.

Screen Shot 2017-04-21 at 2.14.00 PM

Screen Shot 2017-04-21 at 2.19.21 PM

I find Tinkercad to be a relatively easy-to-handle tool among the tools we’ve come across so far in the course. Since we’re thinking about combing 3D printing into our final project, this lab is very useful.

DIY Rubber Stamp on Laser Cutter

Author: Wanchen Zhao (Leslie)

Instructor: Antonius

Materials: Adobe Illustrator

This week, since we’re learning about digital fabrication and laser cutting, the task is to recreate a stamp pattern that can be applied to laser cutting, following a tutorial on Vimeo. First of all, this is the pattern of a clover I drew:

IMG_8605

After some basic setups, the first step is to create the two concentric circles in the pattern. The button on the top left menu of creating patterns can be changed from rectangles to ellipses, and when drawing the ellipses, hold the “shift” key to draw circles. The stroke need to be changed to 20, and the “transform” tab on the top right corner enables adjusting the circles I’ve drawn to be roughly of the same sizes as the circles in the png file.

IMG_8607

The next thing to do is to create the texts going around inside the two circles. Following the tutorial, I drew one more concentric circle, this one smaller and inside the texts. I then changed the “Texts” function to “Texts on path”, and used the inner circle as path to line up my texts. This path also enabled me to change the location of my texts along the circle.

After writing down “NYUSH IMA” (I decided to add “IMA” at this point), I found it difficult to add my name as well on the same path. The method I figured was to create one more slightly larger circle, use it as the path for “LESLIE”, but this time inside the path.

IMG_8608

The added texts aren’t very clear. It’s my fault, I should’ve taken the picture after making the original drawing’s layer invisible. The texts are on a different layer from the two outside circles, called “texts”.

Next I drew the clover, this time on another layer “clover”. The way certainly wasn’t shown in the tutorial but it wasn’t hard. Simply draw a relatively long and narrow heart pattern with the Curve function, make the fill black, then copy it and paste three times. Last I rotated them by 90, 180 and 270 degrees respectively, and moved everything to the middle with all the heart tips pointing towards the circles’ center. Then I drew an arc with a heavy stroke (around 7 pt) as the stem.

Before it’s done, it’s also necessary to change all the texts into patterns by using the “Create outline” function. Else the laser cutter won’t recognize the texts.

IMG_8610

It seems to be done, but it’s not. If it’s put this way, the laser cutter will cut out the patterns, which is exactly the opposite of what I would want. Therefore, following the tutorial, I started a new layer which I called “edge”, where I drew a circle slightly bigger than the pattern and put it on the back of the pattern. Then I clicked on the first icon to the right in “pathfinder”.

Finally, I created a circle with no fill, the same size as the outside circle I just created on “edge”; this circle has to have the skinniest stroke of 0.1 pt, otherwise the cutter won’t cut.

It’s also important to keep in mind that the stamp would be a reflection of the pattern when it’s actually cut out. Therefore, to get what I want, I would have to select everything, and transform them into the vertical reflection of the way they were now.

IMG_8612

Before “reflect”

IMG_8613

After “reflect”

Now I’m done, and I’m ready to laser cut my personalized stamp!

 

Interaction Lab Midterm Project: Magic Glove

Author: Wanchen Zhao (Leslie)
Instructor: Antonius
Project: Magic Glove
Partner: Frank
Materials: solderless breadboard, Arduino, wires, 10k resistors, flex sensors, FSR sensors, glove, Processing

Inspiration & Description
We got our inspiration from the Marvel movie Dr.Strange, where Dr. Stephen Strange releases different patterns combining basic geometric patterns and mysterious texts made up of Greek letters. We decided to recreate this effect using Arduino and Processing. Since we can’t do Dr.Strange’s tempting magic, we hide the trigger to the magic into a glove, that can generate likewise patterns that we drew with Processing code from scratch with a simple movement.

The Process
Drawing with Processing

The visual effect is the most time-consuming and most challenging part of our project. We each drew one pattern with Processing. I started off with the outline structure, or the basic patterns of ellipses and rectangles. To better the effect, I proceeded to adding Greek letters into spaces between the outer circles. The Greek letters come from the internet, all I had to do was copying and pasting them into the “text()” code. But a very time-consuming process was to find a font that supports Greek letters. Luis introduced a website called dafont.com to me, where I could download free fonts, put them into my code’s folder and run it. The function installed in Processing is “PFont myFont” in set up, “myFont = createFont(“AppleMyungjo,50))”, where “AppleMyungjo” is the font and 50 is the size. Not a lot of fonts support Greek letters, and at first for quite a few times I ended up with the “α”s and “β”s unrecognized. I realized it would be so much easier to use English letters, but since we were inspired by Dr.Strange, it was best to make the replication as close as possible. And in order to make the letters go around the circle, I also used the “rotate(radians(counter))” function.
This is how my final animated effect looks like:


The change of color is achieved by a special function in “stroke()” or “fill()”, called “map()”. By inserting “frameCount()” into the parenthesis, Processing enables the pattern to change colors and brightness gradually, giving the pattern a glowing effect.

Serial Communication

Whenever the flex sensor is pressed, the screen generates a pattern. We’re going to hide the two flex sensors in two gloves, so that they each controls different patterns. This is how the flex sensors and resistors are connected to the breadboard:
IMG_7778

WechatIMG226
Before enabling Arduino to talk to Processing, this is to show that the flex sensor is able to send signals when pressed:


Below is the effect of connecting the Arduino with Processing. The way the code works is to print “1” when one flex sensor senses the pressure, and print “2” when another senses the pressure. When both are pressed or neither are pressed, it prints out “0”. Afterwards all we had to do is to use Serial communication, and assign “1” and “2” to the two patterns.

A Sensor Change

However, turns out at the end of the day, our biggest obstacle was not drawing the patterns with Processing; it was the sensor. The flex sensors refused to work anymore right at the night before the presentation, so we had to switch sensors at the last minute. I thought about my Stupid Pet Trick project, where I used FSR to replicate a smart pillow that can sense a person’s head on it. I recalled that FSR is much more sensitive than flex sensors, so we borrowed the last two left in the equipment room. Since I was familiar with FSR because of my Stupid Pet Trick, I did the physical installation and the Arduino code, without any staff help. Fortunately, the Processing code requires almost no change besides the set up.

Other Challenges

Actually, both of the FSR sensors didn’t come in handy at first as well. One had broken wires and need to be re-soldered; the other was the one I used for my Stupid Pet Trick, which had no wires. For the latter we tried using clips along with M/M wires, but the wires fell off easily and the wires still weren’t long enough to be attached to the gloves. Our final solution was to re-solder both. Jiwon helped us with the soldering. It took a while but it was worth it, because our wires never fell off from the breadboard again afterwards.

IMG_7788

IMG_7787

When we ran it afterwards, there was something very weird with my code: no matter how I rewrote the code, there was always an extra set of Greek letters at the bottom right corner of my circle; what’s more, it was always green, refusing to change color and brightness along with the rest of the pattern. When everything else was done, during the debugging process, Jiwon helped us check it and it turns out the problem came from a repetition of the “textAlign”.

After attaching the FSRs to the gloves, we made a edited video, sound effect and subtitles attached:

The Final Versions of the Codes

 

At the source code section, both the Processing code and the Arduino code can be found.

Gains from the Project

Taking Interaction Lab is the first time I encounter computer programming, and combining it with physical interaction. Even though during the first half of the semester we practiced every Friday during lab, it’s not constant enough for me to truly deepen my knowledge and understanding of Processing and Arduino. For midterm project, since we’re drawing the Dr.Strange patterns completely with Processing, I can say I have truly obtained the basic Processing drawing and animation skills we have discussed so far in class. What’s more, with digging into the Processing tutorials and the kind help from our fellows, I have also explored more functions that have polished my drawing, such as RGB, PFont, and text(). I don’t major in IMA, and before taking Interaction Lab I have always thought I can never be able do anything cool on computer. It’s fascinating to discover that I actually have potential in this field. What’s more, I also familiarized myself with Arduino’s sensor installation and Serial communication,enabling myself to transfer signals between Arduino and Processing.

Second, as a student of finance major, most of the academics I deal with have rules and fixed answers, so it’s refreshing and inspiring to encounter IMA, where creativity is just as important as rules and knowledges. I used to think coding was fixed and follows strict patterns, but Interaction Lab has made me realize that how a person writes code depends a lot on his or her own way of thinking.

The skills I mentioned above, learned and comprehended from Interaction Lab, play an important role in this world with emerging technology and innovation. Even though I didn’t choose this path, it’s always benefitting to have some knowledge about it.

This midterm project has also taught me that how close I am to perfection depends on how much effort I’m willing to put into what I do. We spent a lot of time on the 8th floor during the days before the presentation, staying there everyday until the lab closed. Even though it was tiring and time-consuming spending much time on the tiniest details, I realize that the more careful we are, the more likely our project won’t have problems during presentation. And sometimes if not paid attention to, details can have a huge impact on the overall effect. A good example would be the extra, single-color line of Greek letters that originally existed in my pattern.

Looking back, I think I cherish this process a lot. Not only did I put what I learned in the first half of the semester into practice, I also learned so much more about Processing in accordance to the project. I’m proud of myself for going through this. The midterm project has truly been a valuable experience.

//processing
import processing.serial.*;
Serial myPort; // Create object from Serial class
int val; // Data received from the serial port

int preval;

int counter, counter1, counter2;
float curvesin, curveSin;
float curveaddition, curveAddition;
boolean drawMagic=false;
int x, y;
PFont myFont;
// boolean makes drawmagic function possible to be controlled by key

int step = 15;
void setup() {

printArray(Serial.list()); // In this case, I can find the port number
String portName = Serial.list()[1];
myPort = new Serial(this, portName, 9600);

background(0);
smooth();// Draws all geometry with smooth (anti-aliased) edges.
size(600, 600);
counter = 0;
counter1 = 0;
counter2 = 40;
curvesin = 0;
curveSin=0;
curveaddition = 0.1;
curveAddition=0.1;//

// import font "AppleM yungjo" into the system
myFont = createFont("AppleM yungjo", 50);
textFont(myFont);
textAlign(CENTER, CENTER);
}

void draw() {

if ( myPort.available() > 0) { // If data is available,
val = myPort.read(); // read it and store it in val
println(val);

if (preval!=val) {
background(0);
}

if (val==1) {
pattern1();
}
if (val==2) {
pattern2();
}
}
preval=val;
}

void pattern1() {

pushStyle();
colorMode(RGB);
counter+=30; // increase 30 everytime,

noFill();
stroke(255, 100, 20);

//pushMatrix() and popMatrix() are used in conjuction with the other
//transformation functions and may be embedded to control the scope
//of the transformations.
// the γ cirlcle
pushMatrix();
fill(255, 255, 255, 20);
translate(width/2, height/2);
rotate(radians(counter+40));
text("γ", 30, 152); // x,y coordinates
rotate(radians(counter*0.75));
popMatrix();

// the stars consisted of trianangles
noFill();
stroke(255, 100, 20);
triangle(127, 200, 473, 200, 300, 500);
triangle(127, 400, 473, 400, 300, 100);
triangle(200, 132, 200, 472, 500, 308);
triangle(100, 300, 400, 473, 400, 124);

// call xy position to check the xy coordinates
//xyposition();
fill(0, 2);
// 0-rgb-color variable or hex value
//alpha-opacity of the fill
noStroke(); // Disables drawing the stroke (outline).
rect(0, 0, width, height);

// the servral circles
ellipse(width/2, height/2, 100, 100);
ellipse(width/2, height/2, 200, 200);
ellipse(width/2, height/2, 300, 300);
ellipse(width/2, height/2, 400, 400);

// the outside flower circle
// pushMatrix inside pushMatrix
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter+10));
stroke(255, 100, 20);
pushMatrix();//push another matrix
scale(1.92); // increase the scale by 1.92
translate(100, 20);//translate (100,20) to (0,0)
rotate(radians(110));//tranlate staring at (0,0) to 100 degrees
arc(0, 0, 28, 20, PI, PI+HALF_PI);
arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
arc(0, -20, 28, 20, 0, HALF_PI);
popMatrix();
popMatrix();

// the inside smallerflower circle
// pushMatrix inside pushMatrix
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter2));
counter2+=140;
stroke(255, 100, 20);
pushMatrix();//push another matrix
scale(1.05);
translate(100, 20);//translate (100,20) to (0,0)
rotate(radians(110));//tranlate staring at (0,0) to 100 degrees
arc(0, 0, 28, 20, PI, PI+HALF_PI);
arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
arc(0, -20, 28, 20, 0, HALF_PI);
popMatrix();
popMatrix();

// the inside larger flower circle
// pushMatrix inside pushMatrix
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter+10));
stroke(255, 100, 20);
pushMatrix();//push another matrix
scale(1.2);
translate(100, 20);//translate (100,20) to (0,0)
rotate(radians(110));//tranlate staring at (0,0) to 100 degrees
arc(0, 0, 28, 20, PI, PI+HALF_PI);
arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
arc(0, -20, 28, 20, 0, HALF_PI);
popMatrix();
popMatrix();

// blue roatating circle inside
pushMatrix(); //
translate(width/2, height/2);
rotate(radians(frameCount));
stroke(0, 100, 255);
point(0, 70);
popMatrix();

//spinning rectangle

pushMatrix();
translate(width/2, height/2);

counter1 += 8;

rotate(radians(counter1));

//rotate in the counter randians, counter increases 30 everytime
// if counter exceeds 360, for example, 390, it euqals 30)
noFill();
stroke(255, 100, 20);
rect(0, 10, 20, 20);
popMatrix();

pushMatrix();
//pushMatrix() and popMatrix() are used in conjuction with the other
//transformation functions and may be embedded to control the scope
//of the transformations.
translate(width/2, height/2);// translate the triangle to the center of the picture
noStroke();
rotate(radians(counter*0.75));// make the triangle rotate
noFill();
stroke(255, 100, 20);
triangle(30, 10, 20, 30, 40, 30);
popMatrix();

// the flower part
pushMatrix(); //
translate(width/2, height/2);
rotate(radians(frameCount));
noFill();
stroke(0, 100, 255);
point(0, 75+(sin(curvesin)*20));
// point(x,y); float: x/y-coordinate of the point
//if it is just point(0,75); then it will just be a point rotate in a circle
//add sin(curvesin) in the y-coordinate,
//thus it will give people the illusion of the sin curve
curvesin += curveaddition;

popMatrix();

popStyle();
if (mousePressed) {
curveaddition = 0;
}
}

//xyposition is created to show the xy coordiantes of each points at the top left screen
// when don't need it, just comment out xypositon(), so that it will disaapear
//thanks for chirstian
void xyposition () {
x = mouseX;
y = mouseY;
fill(0);
//the place for rectangle
rect(0, 0, 100, 100);
fill(240);
text(x, 45, 20);
text(y, 45, 70);
}

void pattern2() {
//counter = 0;
textSize(40);//the Greek letters going around the circle
//different letters occupy different locations
colorMode(HSB);
fill(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter));
text("β", 0, 170);
text("γ", 30, 160);
text("δ", 60, 160);
text("η", 90, 140);
text("θ", 120, 130);
text("ξ", 140, 120);
popMatrix();

//pushMatrix();//pushMatrix() and popMatrix() are used in conjunction with the other
////transformation functions and may be embedded to control the scope of the transformations.
//translate(width/2, height/2);
//rotate(radians(counter));//rotate in the counter radians, counter increases 30 every time
////if counter exceeds 360, for example, 390, it equals 30
//text("β", 0, 200);
//popMatrix();

//pushMatrix();
//translate(width/2, height/2);
//rotate(radians(counter));
//text("γ", 30, 190);
//popMatrix();

//pushMatrix();
//translate(width/2, height/2);//translate the patterns to the center of the canvas
//rotate(radians(counter));
//text("δ", 60, 180);
//popMatrix();

//pushMatrix();
//translate(width/2, height/2);
//rotate(radians(counter));
//text("η", 90, 170);
//popMatrix();

//pushMatrix();
//translate(width/2, height/2);
//rotate(radians(counter));
//text("θ", 120, 160);
//popMatrix();

//pushMatrix();
//translate(width/2, height/2);
//rotate(radians(counter));
//text("ξ", 150, 150);
//popMatrix();

noFill();//the general shape of the patterns
ellipse(300, 300, 450, 450);
ellipse(300, 300, 425, 425);
ellipse(300, 300, 300, 300);
ellipse(300, 300, 121.132, 121.132);
ellipse(300, 300, 150, 150);
fill(0, 0, 0);
ellipse(300, 118.75, 62.5, 62.5);
ellipse(118.75, 300, 62.5, 62.5);
ellipse(300, 481.25, 62.5, 62.5);
ellipse(481.25, 300, 62.5, 62.5);
noFill();
ellipse(300, 118.75, 60, 60);
ellipse(118.75, 300, 60, 60);
ellipse(300, 481.25, 60, 60);
ellipse(481.25, 300, 60, 60);
noFill();
rect(193.935, 193.935, 212.132, 212.132);
quad(150, 300, 300, 150, 450, 300, 300, 450);
fill(255, 100, 20);

textFont(myFont);
textAlign(CENTER, CENTER);
textSize(70);

//stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));//the four letters occupying the four small circles
//textAlign(CENTER);
//textSize(70);

counter+=step; //the rotating, multiple rectangles in the middle
//println(counter);
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter));
noFill();
stroke(255, 100, 20);
rect(0, 10, 50, 50);

popMatrix();

counter+=step;//increase 15 every time
//println(counter);
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter));
noFill();
stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
rect(5, 10, 50, 50);

popMatrix();

counter+=step;
//println(counter);
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter));
noFill();
stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
rect(10, 10, 50, 50);

popMatrix();

counter+=step;
//println(counter);
pushMatrix();
translate(width/2, height/2);
rotate(radians(counter));
noFill();
stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
rect(15, 10, 50, 50);
curveSin+=curveAddition;
popMatrix();
if (mousePressed) {
curveAddition=0;
}
}

//arduino
void setup() {
Serial.begin(9600);
//1 // number "1" //striing '1'//char value

// Serial.write()
// sends one byte as a number

// Serial.print()
// sends multiple bytes as a char
}

void loop() {
int val1 = analogRead(A0);
int val2 = analogRead(A1);

// just to test!
// Serial.print(val1);
// Serial.print(",");
// Serial.print(val2);
// Serial.println();

if (val1 < 40) {
//Serial.println(1);
Serial.write(1);
} else if (val2 < 120) {
Serial.write(2);
} else {
Serial.write(0);
}

}

Week 6: Serial Communication

Author: Wanchen Zhao (Leslie)
Instructor: Antonius
Lab section: 1:15~2:30 pm
Partner: Esme

Materials: Arduino, solderless breadboard, switch, resistors (220 and 10k), wires, LEDs
Today’s task is to create interaction between Arduino and Processing. The interaction should be mutual, meaning that the Arduino would have to give order to processing, and vice versa. Thinking of the code of up and down buttons on the keyboard which we introduced in class the other day, I decided to connect these two keys with red and green LED lights. The Arduino wouldn’t directly understand “UP” and “DOWN”, so that’s where Processing came into place.
The Processing code would have to import “myPort”, which is a library with various sample codes available in our computers. The Processing then converts “up” and “down” keys on the keyboard into H and L, which stand for high and low, for the Arduino to understand.
This is the circuit of the two LEDs:
IMG_7676
The code on Processing 3.0:
import processing.serial.*;
Serial myPort;
int val;
void setup() {
printArray(Serial.list());
// this prints out the list of all
// available serial ports on your computer.
myPort = new Serial(this, Serial.list()[ 2 ], 9600);
// Change the Serial.list()[0] to your port
}
void draw() {
// to send a value to the Arduino
while (myPort.available() >0) {
val = myPort.read();
}
println(val);
if (keyCode == UP) {
myPort.write(‘H’);
} else if (keyCode == DOWN) {
myPort.write(‘L’);
}
}
And the code on Arduino, which recognizes letters H and L and converts them to the outputs– the 2 LED lights:
int val;
void setup() {
Serial.begin(9600);
pinMode(13, OUTPUT);
pinMode(12, OUTPUT);
}

void loop() {
// receive a value from processing
while (Serial.available()) {
val = Serial.read();
}

// test the value
if (val == ‘H’) {
digitalWrite(13, HIGH);
digitalWrite(12, LOW);
} else if (val == ‘L’) {
digitalWrite(13, LOW);
digitalWrite(12, HIGH);
}
}
And now when I press up and down keys on my keyboard, the red and green lights will respectively turn on, like traffic lights:


But this isn’t over yet, because it’s still necessary for the Arduino to make Processing do something. I thought of Processing sensing pressing a switch, and would reflect the press with a number 1 or 0. This would require a switch to be put in as an input, and ordering Processing to print out 1 or 0 when the switch is pressed and not pressed.
This is the modified Arduino code that enables such changes:
int val;
void setup() {
Serial.begin(9600);
pinMode(13, OUTPUT);
pinMode(12, OUTPUT);
pinMode(11, INPUT);
}

void loop() {
// receive a value from processing
while (Serial.available()) {
val = Serial.read();
}
if (digitalRead (11)==1) {
Serial.write(1);

}
else {
Serial. write (0);
}
// test the value
if (val == ‘H’) {
digitalWrite(13, HIGH);
digitalWrite(12, LOW);
} else if (val == ‘L’) {
digitalWrite(13, LOW);
digitalWrite(12, HIGH);
}
}
I originally wanted to let Processing print out stuff more complicated than 1 or 0 — “on” and “off”, after a failed attempt, I asked a fellow and was told that I would need to keep in mind to keep Processing’s printout as simple as possible, because Processing usually can only recognize single digits, and trying to print out something like “on””off” would be creating trouble for myself. Thus I decided to stick to numbers 1 and 0 in the end.
This is the final effect of Arduino giving Processing an order:


This lab helps me see the possible interaction between the two tools we’ve encountered so far, and makes me realize that Arduino and Processing both can do something that the other cannot, and thus can compensate for each other. It also helps me transfer my orders from Processing to Arduino, or the other way around, into something these devices can understand. I think it’s going to be very useful for the coming midterm project.

Week 5: Stupid Pet Trick

Arthor: Wanchen Zhao (Leslie)
Instructor: Antonius
Lab section: 1:15~2:30 pm

Stupid pet trick: Annoying Alarm Clock
Stupid pet trick materials: solderless breadboard, Arduino, FSR, wires, 100K resistor, buzzer, servo, bobby pin, elastic, doll.
I got the idea of this trick from times when people turn off their alarm clock, go back to sleep, and end up with a day’s schedule completely messed up. What if the alarm clock can sense whether your head is still on the pillow a few minutes after the alarm goes off, and won’t stop bothering you until you get up?
This trick would thus require three outputs: the alarm, represented by the buzzer; a pressure sensor, representing the pillow; and an arm operated by a servo, which is what makes the alarm clock annoying. After talking to Antonius about this idea, I learned about “millis” in processing, which allows me to measure time. I also got to know FSR, which senses the pressure; else, if I use a simple touch sensor which only senses pressure at a certain spot, the person could simply turn his head to other parts of the pillow where the sensor can’t sense and be soundly asleep. I borrowed the FSR from the lab, and connected it to my breadboard following online tutorial.
This is what the connection looks like. It already includes the servo, the buzzer and the FSR; the things missing are the doll representing the sleeping person, and the arm attached to the servo.
IMG_7605
The next step was writing the code. I want my project to work in this order:
1. The alarm clock goes off for 5 seconds;
2. It lets the person snooze for 5 more seconds;
3. The person doesn’t get up, and the arm starts slapping the person;
4. The person gets up, and the arm stops slapping.
Therefore, the code includes a lot of conditions, which would require the “if/ else” sentences. The FSR codes are provided in the online tutorial, so I inserted sentences I needed into my code. We have learned about the buzzer’s and servo’s codes before. However, I realized this had a lot of conditions and I made the process very hard for myself to code. Antonius told me that I would need to transfer certain sentences into orders for not the computer but for people. He helped me with my code; but I would need to be independent since this is my project, so I only used his code as reference, and wrote it again, this time with some changes I wanted, by myself.
This is the code:
int fsrPin = 0;
int fsrReading;

#include
Servo servo;

void setup() {
Serial.begin(9600);
pinMode(7, OUTPUT);
servo.attach(6);
// put your setup code here, to run once:
}

void loop() {
fsrReading = analogRead(fsrPin);
Serial.print(“FSR: “);
Serial.print(fsrReading); //ask what the FSR is reading.
Serial.print(” How long since Arduino was on: “);
Serial.println(millis()); //ask arduino how long it has been since it has been awake;

// if the FSR is high it means the person is still sleeping
if (fsrReading > 100) {

// if it’s between 5000 and 10000 make sound
if (millis() > 5000 and millis() 10000 and millis() 15000) { // if it’s above 15000 make no sound
//if it’s a above 15000 move servo
servo.write(60);
delay(100);
servo.write(0);
delay(100);
}

} else { // if the FSR is not being pressed then turn alarm off
noTone(7);
servo.write(0);
}
}
For the arm of the servo, since the doll I could find is small, I accordingly attached a bobby pin to the servo with a piece of elastic. And since the FSR is very sensitive, I used it to represent the pillow instead of plugging it into an actual pillow. If I had plugged it into an actual pillow, it would sense the pressure from the pillow even after the person gets up, and thus wouldn’t work properly.
This is the final effect of the alarm clock, shot right before the Friday show:


During the show, except a short period of time when the arm on the servo fell off, my alarm clock worked fine. I was especially proud that on the show, my project made a lot of people laugh.
My first IMA project is a great experience. Not only did I learn about several new Arduino functions, such as “millis” and FSR, I also managed to create a gadget that operates various sensors and works properly, based on a problem I observed from real life. I learned a lot and had a lot of fun during the process, and I think this is a great opportunity to lay the foundation for my bigger projects later in this course.

Week 4: Sensors

Author: Wanchen Zhao (Leslie)
Instructor: Antonius
Lab section: 1:15~2:30 pm
Materials: moisture sensor, wet sponge, solderless breadboard, wires, LED, resistor, buzzer, servo

Today we’re experimenting with sensors, in order to prepare for the stupid pet trick next week.
I chose the moisture sensor, which came in with an additional piece of wet sponge. And throughout the lab, I connected this moisture sensitivity with LED, servo and buzzer.IMG_7569
IMG_7571
IMG_7573
I started with the LED, and the plan was that it would light up if the sensor senses moisture. I was warned by Antonius that I would have to connect the LED with a 220R resistor or else it would burn down. The LED would act as an output, whose output number would have to be specified in the Arduino code. Even though the sensor is an analog, in this case it only has two modes: “HIGH” for the LED to light up, and “LOW” for otherwise.
With the help from Antonius, I familiarized myself with the “if, else” code.

void setup() {
Serial.begin(9600);
pinMode(7,OUTPUT);
// put your setup code here, to run once:

}

void loop() {
Serial.println(analogRead(2));
if(analogRead(2)>100){
digitalWrite(7,HIGH);

}else{
digitalWrite(7,LOW);
}
// put your main code here, to run repeatedly:

}

And here’s how it would work:

trim.2E9AFC94-BE4E-4A3E-9EC7-01F7401AEEE7

And I was also warned to use wires of appropriate colors, or else others would get confused.

Next I did the servo one on my own. With the code we had yesterday that would move the servo, I plugged it accordingly into the “if, else” code; the servo is still an output, but the code for it is different from LED.

#include <Servo.h>
Servo servo;
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
servo.attach(7);
}

void loop() {
Serial.println(analogRead(2));
if(analogRead(2)>100){
servo.write(60);
}else{
servo.write(0);
}
// put your main code here, to run repeatedly:
}

When the sensor senses the moisture (touches the wet sponge), the servo’s wing would rotate for 60 degrees; when the sensor doesn’t, the servo’s wing turns back to its starting position.

IMG_7572

The last one with the buzzer was a bit tricky, because the buzzer has a code different from those of LED and servo; what’s more, compared to the LED, the buzzer is truly more like an analog: the code needs to have an input of the noise’s frequency.

void setup() {
Serial.begin(9600);
pinMode(8,OUTPUT);
// put your setup code here, to run once:

}

void loop() {
Serial.println(analogRead(2));
if(analogRead(2)>100){
tone(8,1000);
}if(analogRead(2)<100){
noTone(8);
}
// put your main code here, to run repeatedly:

}

Here the input of the noise is 1000; that means it vibrates 1000 times every second.

IMG_7574

This lab session has given me more clue on how to work with my stupid pet trick in the coming week. Through practice, I now have a better understanding of how to connect sensor with output and make them work together. What’s more important is that I’ve learned how to control some basic outputs through coding, as well as the “if, else” scenario. I think this session may be a great inspiration for my stupid pet trick.

Lab 3: Animation with Coding

Author: Wanchen Zhao (Leslie)
Instructor: Antonius
Lab section: 1:15~2:30 pm

Today we are making animations with Java language on Processing 3.0 for the first time. I decided to make a windmill with four wings rotating around the center. I first used the sketch paper to settle the coordinates of the four triangles I want to code. I referenced to the beginning of the code on the front screen, and created one triangle to test. However, when I played the code, the triangle rotated out of the screen, rotated back a long time later and quickly rotated out of the screen again. Meanwhile, I wanted it to rotate around the center of the canvas, never leaving the screen.
Turns out since I’ve input the code (size of the canvas is 500*500):
translate(250,250);
Therefore, I had moved (0,0) to the center of the canvas instead of the up left corner, so I would have to change the coordinates accordingly. After verifying, I created the other three triangles accordingly.
This is how the windmill looks like:
Screen Shot 2017-02-24 at 5.50.40 PM
And when I played it again, I found it rotating too fast, which is kind of disturbing for the eyes. So I asked and realized there’re two ways of making this right. One is to change the beginning:
void setup(){
size(500,500);
rectMode(CENTER);
frameRate(30);
}
I can simply adjust the speed by changing the number behind “frameRate”; it represents how many frames the canvas generates in one second.
Second way is to change the “frameCount”:
void draw(){

rotate(radians(frameCount * 0.5));

}
By adding the “*0.5”, I can reduce the speed of the rotation to half of the original. These are the two ways of changing the speed of the rotations.
This is the code:
Screen Shot 2017-02-24 at 4.45.38 PM
And this is the final product:
Windmill_Zhao
So far this animation still looks very simple and unreal; that’s because I don’t have any coding experience, and made several mistakes during the process. If I were ever to improve this project, I would make it look more realistic by adding some curves to make it look like a real, pretty paper windmill, instead of merely four triangles.

Week 2: Traffic Light and Temperature Alarm

Author: Wanchen Zhao
Date: 17th Feb. 2017
Instructor: Antonius
Lab section: 1:15~2:30 pm

Mission: creating a traffic light that changes lights’ colors accordingly; a temperature alarm whose speaker goes on when the temperature changes.

Materials: solderless breadboard, LEDs, wires, switch, speaker, temperature sensor, electric resistors (220 R), DFRduino Uno R3.

Today we got the beginner Arduino kits, which is really exciting.
Traffic Lights
I find this week’s missions slightly easier than last week’s, since we have specific graphs of the projects’ structures; besides we already have some experiences from last week’s Friday lab. This week’s seminars also got me familiarized with the basics of putting codes into the Arduino app. Maybe the only difficulty was to go through the bunch of wires without making any mistakes, and to make sure the LEDs were plugged in in the correct direction.
I was pretty careful with the wires, so the traffic light project quickly succeeded.

IMG_7491
IMG_7490

And this is a video showing how the traffic lights work: the two sets may represent two sets of lights at a crossroad: while one has the red light on, the other one has the green light on, and vice versa. The lights can also blink to indicate drivers and pedestrians to hurry up.
Zhao_temperature alarm

FullSizeRender
Temperature Alarm
The temperature alarm project seemed even simpler than the one before; it had less wires and less components. But I did need to be cautious enough and remember to insert the temperature I wanted to sense into the Arduino code. My inputted temperature was 30 degrees, so that when I put my hand onto the temperature sensor the speaker would go off for sure.
Zhao_temperature alarm
This was a fun class. I’ve realized that even with the most basic materials, Arduino can already enable us to realize a lot of our ideas. However, I also know that I shouldn’t get too satisfied over what I’ve done today; after all the codes were copied and pasted. It will be more amazing when I can finally write my own codes!

Week 1: Circuits

Author: Wanchen Zhao (Leslie)
Lab Section: 1:15~2:30 p.m.
Instructor: Antonius
Partner: Yufan Wang (Esme)

Mission: To create three circuits on solderless breadboard, in order to power up an LED or a speaker.

Materials: solderless breadboard, speaker, electric resistor, changeable resistor, wires, swtich, A/C charger and stabilizer.

Today is my first interaction lab’s lab class, and our task was to make circuits on solderless breadboard to light up an LED, and to turn on a speaker with a switch. Other tools also include electric resistors, wires, etc.
Even though it was covered this week in class, I didn’t understand exactly how solderless breadboard works until today. To begin with, from instruction, my partner Esme and I learned how to power up the breadboard simply by linking its two positive and negative wires with the power.
IMG_7458
Failure and Discoveries
The first time was a failure; after we turned on the power and pressed the switch, the speaker failed to beep. That was when we realized that unlike the red and blue lines marked with positive and negative signs, the wires in the middle are only connected horizontally, not vertically, so we would need wires to connect devices that are not spread out horizontally.
IMG_7457
What I Learned
Using the switch to link the breadboard’s two unconnected parts also made me familiarized with which two sides of the switch are always connected inside, and shouldn’t be linked together with wires.
IMG_7464
Through playing with the changeable electric resistor in the circuit, we realized changing the resistance changes the electric current, which in turn controls how bright the LED is, or how loud the speaker is. I will also keep in mind some safety rules when making electric circuits; such as not to expose too much wire from the plastic coat to prevent getting electrocuted, and not to turn on the power until the circuit is complete.
Because of high school physic lab classes, I’m no stranger to making circuits; but the one in Interaction Lab is still on some level new to me: the devices are much smaller and should be handled with much more care; and the power goes into three directions: in, out and ground. Yet up until now I find this class fun and attractive, and would love to learn more during the upcoming semester.