Final project – Rudi

Name :Jingyi Liu (Daria)

Partener: Jerry Ding

Date:2017.12.17

Description: For the final project, after struggling a long time for an idea, finally  Jerry and I decided to make a video game. To play the game, the user has to control a 3-D print figure by a stick, move the figure along the road on cardboard. When the figure moves, he will be blocked randomly and meet several questions (which show on the computer screen), the user needs to make choices by pressing the buttons. Not all the things shown on the screen have to be answered, in other words, some of them are bonus.

 

Below is the video to show how to play the game:

IMG_2894

These are some of 3-D print models we design:

Since the plastic tube we found in storage room was not long enough, we printed a longer one to support it. Also, the servos used by us are too many, and the number of servo arm is limited, Jerry designed a few more to use.

This is the map we used in our game. We used the app Illustrator and the laser cut machine in IMA to make it.

When I drew the draft for our map, from IMA’s website, I noticed that there are two kinds of laser cutting: 1) Vector and 2) Raster.

Vector cutting means cutting through the material completely to create a separate part from the material. Raster cutting doesn’t cut through the material completely but only carves out the surface of the material” (IMA).

That is to say, we have to choose vector cutting for most of our map while we can use raster cutting to make those letters “Life in NYUSH”.

Some photos and videos taken when we did laser cutting:

IMG_2828

For the questions we designed for the game: 

Basically there are three kinds of situations:

The first one is multiple-choice question, which means you have to make your own decision by pressing the button attached on the stick.

The second one just show you certain situations. No choices have to be made but some of them are good while some are bad.

The third one is bonus. For example, “you” get two free movie tickets by lottery.

Besides, sometimes the influence of the choices you make will not be shown on the screen directly but will be counted. When the game is over, you can see final results such as:

For the circuit of our project:

Basically, Jerry is responsible for the circuit part in our project and I helped him to connect the cables,  the buttons after he showed me the basic principle each part should follow.

For the buttons: when the button is not pressed, the circuit will not work so digitalRead is “low”. When it is pressed, it is “high” and the circuit works.

For the cables: We numbered each cable according to the draft of the circuit so we could figure out  problems even though cables twisted together.

Reflection:

Although finally we overcome so many problems happened in the process, the project was still not perfect enough. For example, as Professor Rudi told us, it would better if the screen can be put on the cardboard. To be honest, at the beginning of the design step, we though about the problem because we both think it was really uncomfortable if someone has to control the figure, see the road it should go while looking at the screen. The other thing is that due to the equipment we have, the project was not sensible enough. That is to say, sometimes when a figure moved to a certain place, neither the computer or Arduino would work. If possible, we could figure out a better solution to solve the problem.

Anyway, to make the final project, my partner Jerry and I made our effort to do it and a lot things we learned in class like 3-D printing and laser cutting were used. I feel so excited.

#include <Servo.h>
Servo s1;
int a;
int mode = 0;
int servo = 0;
int emergency = 0;
void setup() {
  Serial.begin(9600);
  for (int i = 2; i <= 10; i++) {
    pinMode(i, INPUT);
  }
  for (int i = 40; i <= 43; i++) {
    pinMode(i, INPUT);
  }
  for (int i = 30; i <= 35; i++) {
    s1.attach(i);
    s1.write(0);
    delay(1000);
    s1.detach();
  }
  // initializing servos

  // put your setup code here, to run once:

}

void loop() {
  if (Serial.available()) {
    int i = Serial.read();
    mode = i;
  }
  if (mode == 0) {
    a = digitalRead(40);
    if (a == HIGH) {
      Serial.print(1);
    }
    a = digitalRead(41);
    if (a == HIGH) {
      Serial.print(2);
    }
    a = digitalRead(42);
    if (a == HIGH) {
      Serial.print(3);
    }
    a = digitalRead(43);
    if (a == HIGH) {
      Serial.print(4);
    }
  }
  if (mode == 1) {
    int i = digitalRead(2);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }


  }
  if (mode == 2) {
    a = digitalRead(40);
    if (a == HIGH) {
      Serial.print(1);
    }
    a = digitalRead(41);
    if (a == HIGH) {
      Serial.print(2);
    }
    a = digitalRead(42);
    if (a == HIGH) {
      Serial.print(3);
    }
    a = digitalRead(43);
    if (a == HIGH) {
      Serial.print(4);
    }
  }

  if (mode == 3) {
    s1.attach(30);
    s1.write(180);
    mode = mode + 1;
  }
  if (mode == 4) {
    int i = digitalRead(3);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 5) {
    s1.attach(31);
    s1.write(180);
    mode = mode + 1;
  }
  if (mode == 6) {
    int i = digitalRead(4);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 7) {
    int i = digitalRead(5);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 8) {
    int i = digitalRead(5);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 9) {
    s1.attach(32);
    s1.write(180);
    mode = mode + 1;
  }
  if (mode == 10) {
    int i = digitalRead(7);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 11) {
    int i = digitalRead(8);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 12) {
    s1.attach(33);
    s1.write(180);
    mode = mode + 1;
  }
  if (mode == 13) {
    int i = digitalRead(9);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
   if (mode == 14) {
    s1.attach(33);
    s1.write(180);
    mode = mode + 1;
  }
  if (mode == 15) {
    int i = digitalRead(10);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }
  if (mode == 16) {
    int i = digitalRead(9);
    if (i == HIGH) {
      Serial.write(1);
      delay(20);
    }
  }


  // put your main code here, to run repeatedly:

}
void s(int a) {
  Serial.print(a);
}
void wait(int a) {
  int b = digitalRead(a + 1);
  if (b == HIGH) {
    s(a);
    mode = mode + 1;

  }
  if (Serial.available()) {
    emergency = Serial.read();
    if (emergency = 100) {
      s(a);
      mode = mode + 1;

    }
  }
}
void ser() {
  if (Serial.available()) {
    int i = Serial.read();
    s1.attach(29 + i);
    s1.write(180);
    delay(1500);
    s1.detach();
    mode = mode + 1;
  }
}

//Processing:
//serial
int i;
int x;
int cc = 0;
import processing.serial.*;
Serial p1;
Serial p2;
int button;
//movie
import processing.video.*;
Movie myMovie;
//sound
import processing.sound.*;
SoundFile file;
// lottery
ArrayList<Group> groups = new ArrayList<Group>(); 
float angle;
int radius;
int mode = 99;
float rotationAngle = 0;
float rotationSpeed = 0;
int selectedIndex = -1;
//others
int musicmode = 0;
String choice="";
int lmode = 0;
int cmode = 1;
int imode = 0;
int dd = 0;
//results
float GPA = 4.0;
boolean gf = false;
boolean graduate = false;
int wages = 0;
int num = 0;
void setup() {
  size(1000, 700);
  smooth();
  noStroke();

  textSize(60);
  textAlign(CENTER, BOTTOM);
  //serial
  printArray(Serial.list());
  p1 = new Serial(this, Serial.list()[0], 9600); //button
  //images

  // lottery

  if (width > height) {
    radius = floor(height/2 * 0.85);
  } else {
    radius = floor(width/2 * 0.85);
  }
  loadGroupNames();
}
void draw() {
  button = 0;

  //start page
  if (mode == 99) {

    if (musicmode == 0) {
      file = new SoundFile(this, "123.mp3");
      file.play();
      musicmode = 1;
    }
    background(0);
    ima("nyush.jpg", 150);
    //    PImage img;
    // tint(150);
    //  img = loadImage("nyush.jpg");
    // image(img, 0, 0);
    int f = millis();
    if (f <= 8000) {
      text("initiating... please wait...", 500, 50);
    }
    textSize(70);
    text("Life in NYU Shanghai", width/2, height/2);
    textSize(32);
    textAlign(CENTER);
    text("Press any buttom to start your journey", width/2, height/2+height/4);
    if ( p1.available() > 0) {
      int i = p1.read();
      print(i);
      if (i==49||i==50|i == 51||i==52) {
        p1.write(1);
        mode = 98;
      }
    }
  }
  if (mode == 98) {
    background(0);
    textSize(70);
    text("Please move the figure", width/2, height/2);
    textSize(32);
    textAlign(CENTER);
    while ( p1.available() > 0) {
      i = p1.read();
      if (i == 1) {
        p1.write(2);
        mode = 97;
      }
    }
  }

  if (mode == 97) {
    background(255);
    ima("1.png", 255);
    if ( p1.available() > 0) {
      i = p1.read();
      print(i);
      if (i==49||i==50||i == 51||i==52) {
        p1.write(3);
        mode = 96;
      }
    }
  }

  if (mode == 96) {
    if (i == 49) {
      choice = "a";
    }
    if (i == 50) {
      choice = "b";
    }
    if (i == 51) {
      choice = "c";
    }
    if (i == 52) {
      choice = "d";
    }
    background(0);
    textSize(70);
    text(choice, 500, 100); 
    text("Good choice", width/2, height/2);
    text("Please move the figure", 500, 600);
    textSize(32);
    textAlign(CENTER);
    while ( p1.available() > 0) {
      int b = p1.read();
      if (b == 1) {
        p1.write(2);
        mode = 95;
      }
    }
  }
  if (mode == 95) {
    background(255);
    ima("2.jpg", 255);
    if ( p1.available() > 0) {
      i = p1.read();
      print(i);
      if (i==49||i==50||i == 51||i==52) {
        p1.write(5);
        mode = 94;
      }
    }
  }
  if (mode == 94) {
    if (i == 49) {
      choice = "A";
    }
    if (i == 50) {
      choice = "B";
    }
    if (i == 51) {
      choice = "C";
    }
    if (i == 52) {
      choice = "D";
    }
    background(0);
    textSize(70);
    text(choice, 500, 100); 
    text("Fair choice", width/2, height/2);
    text("Please move the figure", 500, 600);
    textSize(32);
    textAlign(CENTER);
    while ( p1.available() > 0) {
      int b = p1.read();
      if (b == 1) {
        p1.write(2);
        mode = 93;
      }
    }
  }  
  if (mode == 93) {
    background(0);
    textSize(100);
    text("lottery!!!!!!", 500, 300);

    text("please cilck to play!!!!", 500, 600);
    p1.write(2);
    if ( p1.available() > 0) {
      i = p1.read();
      print(i);
      if (i==49||i==50||i == 51||i==52) {
        mode = 92;
        p1.write(2);
      }
    }
  }
  if (mode == 92) {
    background(255);
    rotationAngle += rotationSpeed;
    rotationSpeed *= 0.8;
    if (rotationSpeed < 0.001 && rotationSpeed != 0) {
      rotationSpeed = 0;
      selectedIndex = groups.size() - ceil((rotationAngle % TWO_PI - angle/2) / angle );
      if (selectedIndex == groups.size()) selectedIndex = 0;
      println();
      println("'" + groups.get(selectedIndex).mName + "' is selected!");
      println("And it will be removed at the start of next round.");
      println(selectedIndex);
    }
    // draw circle
    pushMatrix();
    translate(width/2, height/2);
    pushMatrix();
    rotate( rotationAngle );
    if (groups.size() == 0) {
      println();
      println("Done !!");
    }
    angle = TWO_PI / groups.size();
    for (int i=0; i<groups.size(); i++) {
      pushMatrix();
      Group g = groups.get(i);
      rotate( angle*i );
      if (i == selectedIndex) {
        g.mColor = color(random(245), random(245), random(245));
      }
      g.display( angle );
      popMatrix();
    }
    popMatrix();
    pushStyle();
    colorMode(HSB);
    fill(frameCount%256, 255, 255);
    triangle(radius-5, 0, radius+30, 10, radius+30, -10);
    popStyle();
    popMatrix();
    if ( p1.available() > 0) {
      int i = p1.read();
      print(i);
      if (i==49||i==50|i == 51||i==52) {
        p1.write(1);
        rotateCircle();
      }
    }
    if (rotationSpeed == 0) {
      if (cc == 0) {
        x = millis();
        cc = 1;
      }
      int g = millis();
      int ggg = g - x;
      if (ggg>=3000) {
        mode = 83;
        p1.write(2);
      }
    }

    if (mode == 90) {
      print("aa");
      background(255);
      ima("3.jpg", 255);
      if ( p1.available() > 0) {
        i = p1.read();
        print(i);
        if (i==49||i==50||i == 51||i==52) {
          p1.write(9);
          mode = 89;
        }
      }
    }
    if (mode == 89) {
      if (i == 49) {
        choice = "A";
      }
      if (i == 50) {
        choice = "B";
      }
      if (i == 51) {
        choice = "C";
      }
      if (i == 52) {
        choice = "D";
      }
      background(0);
      textSize(70);
      text(choice, 500, 100); 
      text("Super good choice", width/2, height/2);
      text("Please move the figure", 500, 600);
      textSize(32);
      textAlign(CENTER);
      while ( p1.available() > 0) {
        int b = p1.read();
        if (b == 1) {
          p1.write(2);
          mode = 88;
        }
      }
    }
    if (mode == 88) {
      background(255);
      ima("4.jpg", 255);
      if ( p1.available() > 0) {
        i = p1.read();
        print(i);
        if (i==49||i==50||i == 51||i==52) {
          p1.write(11);
          mode = 87;
        }
      }
    }
    if (mode == 87) {
      if (i == 49) {
        choice = "A";
      }
      if (i == 50) {
        choice = "B";
      }
      if (i == 51) {
        choice = "C";
      }
      if (i == 52) {
        choice = "D";
      }
      background(0);
      textSize(70);
      text(choice, 500, 100); 
      text("Awkward choice", width/2, height/2);
      text("Please move the figure", 500, 600);
      textSize(32);
      textAlign(CENTER);
      while ( p1.available() > 0) {
        int b = p1.read();
        if (b == 1) {
          p1.write(13);
          mode = 88;
        }
      }
    }
    if (mode == 86) {
      background(0);
      ima("shit.jpg", 150);
      while ( p1.available() > 0) {
        int b = p1.read();
        if (b == 1) {
          p1.write(2);
          mode = 85;
        }
      }
    }
  }
  if (mode == 85) {
    background(255);
    ima("4.jpg", 255);
    if ( p1.available() > 0) {
      i = p1.read();
      print(i);
      if (i==49||i==50||i == 51||i==52) {
        p1.write(12);
        mode = 84;
      }
    }
  }
  if (mode == 84) {
    if (i == 49) {
      choice = "A";
    }
    if (i == 50) {
      choice = "B";
    }
    if (i == 51) {
      choice = "C";
    }
    if (i == 52) {
      choice = "D";
    }
    background(0);
    textSize(70);
    text(choice, 500, 100); 
    text("Super good choice", width/2, height/2);
    text("Please move the figure", 500, 600);
    textSize(32);
    textAlign(CENTER);
    while ( p1.available() > 0) {
      int b = p1.read();
      if (b == 1) {
        p1.write(2);
        mode = 83;
      }
    }
  }
  if (mode == 83) {
    background(0);
    text("Are you ready to...", 500, 300);
    text("See your final result", 500, 500);
    text("click to see!", 500, 600);
    if ( p1.available() > 0) {
      i = p1.read();
      print(i);
      if (i==49||i==50||i == 51||i==52) {
        p1.write(12);
        mode = 82;
      }
    }
  }
  if (mode == 82) {
    int b = int(random(1, 4));
    if (b == 1) {
      mode = 81;
    }
    if (b == 2) {
      mode = 80;
    }
    if (b == 3) {
      mode = 79;
    }
  }
  if (mode == 81) {
    ima("r1.jpg", 255);
  }
  if (mode == 80) {
    ima("r2.jpg", 255);
  }
  if (mode == 79) {
    ima("r3.jpg", 255);
  }
}

void rotateCircle() {
  if (selectedIndex >= 0) {
    groups.remove(selectedIndex);
  }
  selectedIndex = -1;
  rotationSpeed = random(1, 3);
}

void loadGroupNames() {
  String lines[] = loadStrings("names.txt");
  for (int i = 0; i < lines.length; i++) {
    println(i + ": " + lines[i]);
    groups.add( new Group(lines[i], radius) );
  }
  println();
  println(groups.size() + " groups have been loaded!");
  println();
}

//  if ( p2.available() > 0) {
//    print(121);
//    num = p2.read();
//    print(num);
//    mode = str(num);
///    if (mode == "sss") {
//      mode = "lottery";
//   }
//   if (mode == "sss") {
//     mode = "finalresult";
//   }
// }


void ima(String g, int a) {
  PImage imgt;
  tint(a);
  imgt = loadImage(g);
  image(imgt, 0, 0);
}


void choice() {
  if (mousePressed) {
    p2.write(int(mode));
  }
  if ( p1.available() > 0) {
    button = p1.read();
    print(button);
    if (button == 97) {
      choice = "a";
    }
    if (button == 98) {
      choice = "b";
    }
    if (button == 99) {
      choice = "c";
    }
    if (button == 100) {
      choice = "d";
    }
    p2.write(int(mode));
  }
}
void refresh() {
}
void result(float a, float b) {
  if (choice == "a") {
  }
  if (choice == "a") {
  }
  if (choice == "a") {
  }
  if (choice == "a") {
  }
}
class Group {
  String mName;
  int mRadius;
  color mColor;
  Group(String name, int rad) {
    mName = name;
    mRadius = rad;
    mColor = color(random(245), random(245), random(245));
  }
  void display(float angle) {
    pushStyle();
    fill(mColor);
    // plus 0.005 to fill the color entirely
    arc(0, 0, mRadius*2, mRadius*2, -angle/2, angle/2 + 0.005);
    fill(255);
    textSize(20);
    textAlign(RIGHT);
    text(mName, mRadius - 15, 5);
    popStyle();
  }
}

Class assignment – computer vision (Rudi)

Name: Jingyi Liu (Daria)

Date: 2017.12.7

Task: After reading the assigned materials and checking in detail Real Life Applications and Art Installations sections in the slides, choose one example of Computer Vision. Research about that example and post in your blog your findings. Be specific about which tools you think were used and which challenges the developers faced. In your response, clarify why you chose it and how does it relate to your own experiences with Computer Vision.

As the assigned readings shows, computer vision allows computer to make intelligent assertions about digital images and videos. When I checked the slides which give a lot of examples taking advantage of computer vision, I find QR code is among them.

The reason why I choose it is because in China, it is very commonplace and give much convince to our daily life, in 7-11, in shopping mall, almost everywhere. When I have to pay for items or get information, on most occasions we just need to scan the code and everything is done rather than taking time to type the address in a computer. In Computer Vision concept, our mobile phone or a special tiny machine can be used as a QR code scanner and the scanner deal with the data attached to it, then comes out certain information as a response.

To know more about QR code, I searched on the Internet. This paragraph explain how the code operates:

Unlike the older, one-dimensional barcodes that were designed to be mechanically scanned by a narrow beam of light, a QR code is detected by a 2-dimensional digital image sensor and then digitally analyzed by a programmed processor. The processor locates the three distinctive squares at the corners of the QR code image, using a smaller square (or multiple squares) near the fourth corner to normalize the image for size, orientation, and angle of viewing. The small dots throughout the QR code are then converted to binary numbers and validated with an error-correcting algorithm.

This is a picture of an example QR code we usually see.

It is also possible to design artistic QR codes. We can see some when we order food on apps like 饿了吗

When it comes to the specific tools the developers use when they develop QR codes, I think in this specific issue, no physical object except computer is needed. When I did research, most information showed that the way it is developed is based on mathematics and algorithm. But in our daily life, if someone wants to have an QR code, he can just search on the Internet to find an QR code generator and follow its instruction.

However, there are some problems and challenges needed to be dealt with by its developers. Several weeks ago, I saw an article sent by Wechat. This article shows that some bad guys are now trying to use QR code as their tools to do cyber theft. For example, some QR code attached on Mobike are replaced by the codes they made theirselves and these new codes will take the people who scan it to a malicious website that might try to install a virus on their phones. Thus the information on their phone is stole.

Final project proposal (the second version) – Rudi

 

Name: Jingyi Liu (Daria)

Partner: Jerry Ding

Date: 2017.12.7

Part 1: my definition of interaction

Looking back to the first class of Interaction Lab, we read a reading called the art of Interactive Design from Crawford Chris, in which the author gives his definition of interaction – “Interaction: a cyclic process in which two actors alternately listen, think, and speak”.

For me, as I’ve learned much about the class, interaction is like the phenomenon that human beings and one machine or several machines have effect on each other by doing a series of things. In other words, one is input and the other is output. The subject can either be human being or machines/ apps, so is the object. Not only will the participants receive responses during their experience but also there should be something meaningful/ useful /…  in one’s work. For example, I found an fantastic interaction project on Youtube designed by Yanpeng Chen. In this work, he made it possible for users to play football without going outside. As we know, sometimes it is rainy so we cannot go out to do sports like playing tennis unless we go to the gym. Chen successfully dealt with this problem and it is even wonderful that he added sound in his game to make it more vivid.

Part 2: proposal for your Final Project

Abandoning the idea of making a tank with a little camera to shoot enemies, Jerry and I finally chose to make a game that is related to the life in NYUSH.

For the physical part, we gonna find a big cardboard box on which there will be a lot of routines for a physical character to move on. The shape of routines looks like a dendrogram.

The game will be divided into four parts, each part standing for a year in our four-year-college life – freshman, sophomore, junior, senior. As we know, every year we will have certain important decisions to be made, for example, when you are a sophomore, you have to consider your major and when you are at the end of the second year in NYUSH, you have to make a decision on which site to study away … These essential decisions consists of the main part of the game.

In the game, the physical character (we will use a 3D-printing object to be that character) moves along a “road” from the start to the exit. The start line is the beginning of one year and the finish line is the end of one’s college life. When you “walk” along the road, you will be stopped randomly by 3D-printing object (to be decided, perhaps it is a stick) controlled by Arduino and a page with questions pops out. The questions are the ones we meet in daily life, for example, which club to join in, whether to do on-campus job or not, etc.

The results of these options sometimes will not be shown directly. All the decisions made by the user will be counted in the computer automatically and the computer will show a final result when the user comes to the exit. Hopefully the participants will enjoy this experience and then think more about what they should do to organize their own life.

As for the computational part, we will use both 3D-Printing and material like jumper cables, cardboard and decorations bought from Taobao along with Arduino and Processing. Serial communication, image, sound function are the main part.

Part 3: critique an established form of interaction or specific interactive experience that  relates to your final project.

To be honest, Jerry and I spent much time trying to come up with an idea for our project. While we talking to each other, suddenly, games that we played when we were young struck on our mind. For Jerry, he thought about a game in which a explorer hunts treasure in the dessert and in the process of hunting, the player meets a lot of difficulties and chances which will result in different endings. For me, the game Monopoly drew my attention. When my friends and I played that game, the number of steps we move is decided by rolling the dice, sometimes we will move to other players’ territory and pay a sum of money according to the specific rule; sometimes we happen to get a chance to pick up a card, and  the card can give you either good luck or bad luck. To win the game Monopoly, you have to earn enough money.

However, as the picture shows below(the left one), the map for Monopoly is like a circle so the routine is the same every time and honestly speaking, I will also get bored if I play Monopoly for more than 30mins in the same map. So it is clear that the map for our project can not be like that. To be better, we decided to give the map a start and an end (the right one)so the game will not take too long –  for us, we hope it lasts for about 3 – 5 mins long.  In that way, the patience of our user will not gone.

Reference link : https://www.youtube.com/watch?v=bIe6NUIkxk8

https://www.google.com.hk/search?q=monopoly&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjC-6a1offXAhWBPJQKHWCODUwQ_AUICigB&biw=1280&bih=739#imgdii=5GN0d_vrPXdXiM:&imgrc=tPAHo_4tDydDWM:

https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=大富翁&step_word=&hs=0&pn=3&spn=0&di=9902662660&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=231333218%2C3647275592&os=2798287148%2C3029981047&simid=4186681717%2C747072125&adpicid=0&lpn=0&ln=1970&fr=&fmq=1512627638760_R&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic92.huitu.com%2Fres%2F20161222%2F536057_20161222224744107011_1.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bi7tp7_z%26e3Bv54AzdH3F1jft2gAzdH3Ffi5oAzdH3Fda8m8dddAzdH3Fdd90998a0a88_z%26e3Bip4s%3F_p_p_p%3Da_z%26e3B0a0lcac9nd0cl8c9&gsm=0&rpstart=0&rpnum=0

https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=树状图&step_word=&hs=0&pn=7&spn=0&di=39775741190&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1525040366%2C12578254&os=1819815798%2C2147252177&simid=0%2C0&adpicid=0&lpn=0&ln=1963&fr=&fmq=1512628072043_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=13&oriquery=&objurl=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%3Dshijue1%2C0%2C0%2C294%2C40%2Fsign%3Db4d6f35a5b0fd9f9b41a5d2a4d44be5f%2Fd62a6059252dd42a771add8d093b5bb5c9eab881.jpg&fromurl=ipprf_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bev2_z%26e3Bv54AzdH3Fv6jwptejAzdH3Fbald9n9l9&gsm=0&rpstart=0&rpnum=0

Lab11 Media Controller (Rudi)

Date: 2017.12.1

Name: Jingyi Liu (Daria)

Task: Demonstrate understandings of Processing and Arduino. Create a Processing sketch that controls media elements (images, videos, and audio) using a physical controller made with Arduino.

Materials Needed: Jumper cables and one potentiometer from the Arduino Kit & Processing

This week we learned some basic knowledge about processing in video and images so this time I chose to use a potentiometer to control the pixel of a image on Processing.

First I built a circuit with cables and potentiometer.

Reflection:

To begin with, I wanted to make a little movie just like a book I read when I was young. When we turned the pages quickly, these pages could be a movie since the position of the character on each page was just a bit different. But when I tried to use Processing and a potentiometer (the action to rotate the potentiometer is the same when we turn the pages ) to make it, because I got a little confused about the code, I gave it up and I gonna left it to this week to find a solution to make my idea come true.

For Processing:
import processing.serial.*; 

Serial myPort; 
int valueFromA; 

void setup() {
  size(500, 500);
  background(0);
  img=loadImage("1.jpg"); 
  myPort = new Serial(this, Serial.list()[ 4 ], 9600);
}


void draw() {
  while (myPort.available()>0) {
    valueFromA = myPort.read();
  }
  image(img, 0, 0, 500, 500);
  println(valueFromA);

  float size = map(valueFromA, 0, 255, 5, 50);

  for (int i=0; i<600; i++) {
    
      int x = int(random(width));
      int y = int(random(height));
      color c = get(x, y); 
      float r =red(c);
      float g =green(c);
      float b =blue(c);
      noStroke(); 
      fill(r,g,b, 100); 
      if (dist(x,y,mouseX, mouseY)>80) {
      ellipse(x, y, size, size);
    }
  }
}


For Arduino:

void setup() {
 Serial.begin(9600);
}

void loop() {
 int sensorValue = analogRead(A0)/4;
 Serial.print(sensorValue);
 Serial.println();

// too fast communication might cause some latency in Processing
 // this delay resolves the issue.
 delay(10);
}

Lab 10 Review (Rudi)

Name: Jingyi Liu (Daria)

Date: 11.26

The Task I choose: Soldering and Better Circuit Design – Room 818. Follow the instructions as described by the fellow and instructor.

Today’s recitation is kind of different from the one that we used to take part in. We have three options to choose and this time I made a decision to do soldering that we have never learned in class before.  Last time when I used soldering is when I was in elementary school and it was really a fantastic experience, we made a lamp. This time we gonna take advantage of soldering technology to make better circuit.

  • Soldering Iron
  • Solder
  • Cables
  • Board
  • Cardboard with tape
  • Helping hands

These are all the materials required in this recitation!

Exercise 1: We at first turned on the machine and turned the button to about 400℃. The fellow David taught us to touch covered electrode with the side of the tip of the iron ( not the very tip of the iron) to test whether it is ready to work to not.

 

Exercise 2: We soldered the wire to the board.

Exercise 3:

We soldered two wires together with the help of helping hand. To make it easier to connect, it is better to twist two wires together then used covered electrode

Exercise 4: make a circuit with LED

This is the same with exercise 3 but we have to get a LED enrolled. After soldering them all together, I connected them with a buttery. Suddenly, the LED worked!

 

 

.

Reflection: It is interesting to better the circuit by taking other technology and make something awesome since we used to simply connect each single piece of component.  Perhaps I can use it in my final project.

Final project proposal ( Rudi )

Name: Jingyi Liu ( Daria )

Partner: Jerry Ding

Date: 2017.11.21

Task:1. provide a definition of interaction in your own words

        2.propose what you would like to do for your Final Project

        3.critique an established form of interaction or specific interactive experience that relates to     

          your final project.

Part 1: my definition of interaction

Looking back to the first class of Interaction Lab, we read the reading called the art of Interactive Design from Crawford Chris, in which the author gives his definition of interaction – “Interaction: a cyclic process in which two actors alternately listen, think, and speak”.

For me, as I’ve learned much about the class, interaction is like the phenomenon that human beings and one machine or several of them have effect on each other by doing a series of things. In other words, they should respond to others. The subject can either be human being or machines/ apps, the object as well. Not only will the participants receive responses during the process but also there should be something meaningful in a work. Such kind of meaning can be aesthetical or educational or anything else.

Part 2: proposal for your Final Project

Abandoning the idea of making a tank with little camera to shoot enemies, Jerry and I finally chose to make a little meaningful game that is related to the life in NYUSH.

For the physical part, we gonna find a big cardboard box on which there will be a lot of routines for a physical character to move on. The shape of routines looks like a dendrogram.

The dendrogram will be divided into four parts, each part standing for each year in our college life –  freshman, sophomore, junior, senior. As we know, every year we will have some important decisions to make, for example, when you are a sophomore, you have to consider your major and when you are at the end of the second year in NYUSH, you have to make a decision on which site to study away … These essential decisions consists of the main part of the dendrogram and during the period the character move from the beginning of one year to the end of the year, there are also some daily things needed to be dealt with, for example, which club to join, whether to do on-campus job or not, etc.  When a user participates in our game, he will be blocked randomly by a stick controlled by Processing and he is going to meet different situations which occur in our daily life.

The results of these options sometimes will not be shown directly but will be remembered by the computer, all decisions made by the users will be counted as an outcome which will be shown at the end of the game.

For the computational part:

We will use material like cooper or anything else to connect the physical character with Arduino and Processing. Processing will randomly send data to Arduino, then Arduino will control a stick to block the character.

Reaction and impact expected:

Hopefully the participants will feel excited about their journey in college and think more about what they should do to organize their life.

Part 3: critique an established form of interaction or specific interactive experience that relates to your final project.

To be honest, Jerry and I spent much time trying to come up with an idea for our project. While we talking to each other, suddenly, games that we played when we were young struck on our mind.  For Jerry, he thought about a game in which a explorer hunts treasure somewhere and in the process of hunting, he meets a lot of difficulties and chances that result in different endings. For me, the game Monopoly drew my attention. When my friends and I played that game, we moved on by rolling the dice and every time we moved to certain area we would get a chance to pick up a card. The card will either give you good luck or do harm to you, it all depends actually.

By combining these two games, we decided to make the project. Hopefully it will amaze the participants!

Use Illustrator to make a stamp & Reflection on Digital Fabrication – Rudi

Name: Jingyi Liu ( Daria )

Date: November 14

Task: 1. Use ILLUSTRATOR TO MAKE A STAMP

2. write a reflection about how would I use digital fabrication techniques in my final.

( Partner for final project: Jerry Ding)

Part 1:

Today we learned some basic knowledge about 3D printing and later we followed a movie made by NYUSH IMA staff to make a stamp.

This is the original picture the web offered us.

Using the keyboard to control the position of the letter is really a hard thing and takes me much time. Also, to situate the letter”ART&SCIENCE” position is harder than “NYUSH IMA”, I tried a lot of times to figure out if I should write “art” first or “science” first.

Part 2:reflection

As we were told in class, Digital fabrication is the process of producing a physical object from a digital model using a computer controlled tool or machine such as a laser cutter, CNC mill, or 3D printer.

Since Jerry and I gonna make a meaningful game related to the life in NYUSH, in which the user can control a physical character and move it around inside a cardboard box, perhaps we will take advantage of the knowledge we learned in “3D Modeling” part to design a model for the box.  On the cardboard box there are a lot of routines for users to choose, each option will lead to different results. 3D technology will facilitate us in the process of making the physical box, making it clear to know where I should cut off and where not.

Lab9- 3D modeling ( Rudi)

Name: Jingyi Liu

Date:2017.11.17

Task:

Using Tinkercad, design a 3D model of a wearable device, a game controller or a mechanism (for a component) that utilizes at least one of the following components or equipment:
Accelerometer
8 Segment Digit Display
Joystick
Stepper Motor
Moisture Sensor
IR Distance
Ultrasonic Distance
Micro Servo 9g SG90

Your model has to be 3D printable and must be able to hold or support one of the pieces listed above. In order to create a precise mount or connector, you must check the datasheet of the component or equipment to find the correct dimensions. You can also take measurements using vernier calipers if a data sheet with part dimensions is unavailable.

 

My recitation:

This time I picked up  a Stepper Motor and then designed a little red box for it, using 3D design app. The app tinkecad is very easy to get along with and friendly to beginners in design. There are a lot of models for us to choose and we can use it either directly or combine several of them together to build a new one.

 

 

At first, I chose pentagram as the basis of the box, each of them is of different color, looking likea rainbow. However, when I started to make a hollow square to put the stepper motor inside, I found that it was extremely difficult since the height of each pentagram was different! So I had to choose another one as the basis.

 

As you can see, the red icosahedron which looks like a rose is the new basis. We can put the stepper motor in it pretending it was part of the beautiful flower.

To make it more vivid, I added leaves on it.

Reflection: Though Tinkercad gives us much convince of designing 3D model and is very easy to learn there are still a lot of limitations in the app, for example, basic models are not enough and sometimes the angle or height of one model is not that easy to adjust. However, as a beginner, Tinkercad really helped me explore 3D design and it is really interesting.

Lab8-Drawing Machines (Rudi)

Name: Jingyi Liu (Daria)

Partner: Vincent Wu

Date:2017.11.10

Task:

We were asked to create drawing machines by using an H-bridge to control stepper motors attached to mechanical arms.

Materials:

Arduino kit and

  • 1 42STH33-0404AC stepper motor
  • 1 SN75440NE ic chip
  • 1 power jack
  • 12 V power supply
  • 1 potentiometer from your kit
  • 1 Arduino and USB cable from your kit
  • Laser-cut mechanisms
  • Pen that fits the laser-cut mechanisms

Part 1: Build the following circuit to control the stepper.

A lot of wires are connected in the circuit and it really takes much time to finish!

Then I used ” the stepper_oneRevolution” example in Arduino to get my motor move.  After that, according to the instruction, I  collected the parts of the laser-cut mechanisms.

IMG_1992

Part 2: Use the potentiometer and the MotorKnob example in Arduino to control the motor.

Reading the instruction from Recitation’s website, I was noted that  42STH33-0404AC stepper motor is a 200 step motor. And we were asked to use the function map() in order to match the movement of the knob with the rotation of the motor.So in the Arduino, I coded :

void loop():{

int val=analogRead(0);

map(val,0,1023,0,200);

Serial.println(val);

 

Part 3&4 : Use serial communication to send values from Processing to Arduino. In this step, Marcela encouraged me to control the routine of drawing by using mouse, thus the outcome may be better. I found Vincent as my partner. We combined our own parts into one mechanical arm so that it can hold a pen and draw.

To start with, we put the pen so far away from  the paper thus the pen could not draw anything on the paper at all. So we adjusted the pen in a lower position by putting two books on the desk then the problem was dealt with.

IMG_1999 (Before we changed the position of the pen.)

IMG_20021

This is the outcome of our work!

 

Reflection:

As we can see in the picture, the ellipse we drew was not so perfect. I guess it is because of the position of the pen and stepper motor and maybe we could continue to do some adjustment.

 

Processing Part:

// IMA NYU Shanghai
// Interaction Lab


import processing.serial.*;

Serial myPort;
int valueFromArduino;


void setup() {
  size(600, 600);
  background(0);

  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.
  
  myPort = new Serial(this, Serial.list()[ 4 ], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.
}



void draw() {
  // to send a value to the Arduino
 
    myPort.write(mouseY);
  
}

Arduino Part:
//Arduino
/*
* MotorKnob
*
* A stepper motor follows the turns of a potentiometer
* (or other sensor) on analog input 0.
*
* http://www.arduino.cc/en/Reference/Stepper
* This example code is in the public domain.
*/
 
#include <Stepper.h>
 
// change this to the number of steps on your motor
#define STEPS 200
 
// create an instance of the stepper class, specifying
// the number of steps of the motor and the pins it's
// attached to
Stepper stepper(STEPS, 8, 9, 10, 11);
 
// the previous reading from the analog input
int previous = 0;
 
int valueFromProcessing;
void setup() {
  // set the speed of the motor to 30 RPMs
  stepper.setSpeed(30);
Serial.begin(9600);
}
 
void loop() {
  // get the sensor value
while (Serial.available()) {
    valueFromProcessing = Serial.read();
  }
int val= map(valueFromProcessing,0,500,0,200);
  // move a number of steps equal to the change in the
  // sensor reading
  stepper.step(val - previous);
 
  // remember the previous value of the sensor
  previous = val;
}

Recitation : User Testing ( Rudi )

Name: Jingyi Liu ( Daria )

Date: 2017.11.3

Task:

Step 1) set up our own projects and write a list of things  that we want to know when the users interact with our projects.

Step 2) Let others test our projects and receive some feedback. Be a user to test others’ projects and give them feedback.

Step 3)Write and post two reports,  one for a project you tested and one for your own project.

For one of the projects I tested:

IMG_1862

The project is from Candy Bi.  It works as an instrument and we can press the keys from 1 – 0, making different sounds with the light blinking in various styles.

It was really amazing to combine them together. However, it could be better if Candy had made some marks on each triangle like 1,2,3……thus we can easily know what key we can press to make the exact sound we expect.

Also, to make the project more beautiful, she could use Processing to create a piano board to replaces these triangles. That can be more vivid.

For my  own project:

when other people interacted with my project :

IMG_18701

My fellow mate Tiger Tian was playing the little game MariBall. In the beginning, he asked me how to play it and I showed the way MariBall worked. In fact, every single time people who came to me asked me the same question: to win the game, what should I do? Pick the ball with the same color as the word itself or the color of the word? And I had to explain to them again and again. So I think if I give a brief introduction to MariBall it will be better.

What’s more, MariBall is a game so there should be a session to show the score the user has got, as My fellow mate Yanbo Xu and faculties put it.

Another problem was put forward by one of our faculty, that is, my game is started by clicking the mouse while to start over, the user has to press a key. It is really uncomfortable because our fingers always put on the mouse and it takes efforts to change the position to press a key.  As I have mentioned before, the function “mousePressed” somehow didn’t work thus Louis helped me deal with the problem by replacing it with the function “keyPressed” in hope that the game could continue without closing the window.

The forth feedback I received today is from my professor Rudi. He mentioned that in the project, the character Mario should be more connected with the game, for example, I could draw a Mario and made him to get the balls. It would be more interesting.