Final Project Documentation

Final Project Documentation

Prof.Marcela 

Session: Tu/Thur 11:15-12:30

Name: Yiyu (Nora) Yang

Partner: Yudi (Amy) Ao

Name: Balance Pong

Our whole concept is about a creative pong game that requires users’ balance skills. The user has to lift up one of his/her feet to control the pad, and use the pad to “swing” ping-pong ball on the projector screen.

Inspiration: 

Inspiration 1 is from the Reading Material ”Making Interactive Art: Set the Stage, then Shut up and listen”by Tom Igoe, in the text it says [So if you’re thinking of an interactive artwork, don’t think of it like a finished painting or sculpture.  Your audience completes the work through what they do when they see what you’ve made.  Figure out how to suggest to them what their course of action could be, and how they might uncover their story, and their own emotional interpretation of the work.] The whole idea is to “Don’t interpret your work”, you should allow the audience to try and figure out what the artwork is about, not instructing them on how to do it.

Link:http://www.tigoe.com/blog/category/physicalcomputing/405/

Inspiration 2 is from the youtube video of LED table, where an IKEA table was transferred into Led blinking tablet, and the LEDs inside would light up according to music, or game instructions. Some of the games on LED table are Tetris, Snake game…etc. 

Link:https://www.youtube.com/watch?v=9mYyU1978k4&t=230s

User: 

The user need to find a friend and enjoy the game, this game requires two people to play. Two users together would make the game interesting and more competitive.

Goal: 

Create an interactive system of your choice using Processing and Arduino. Focus on careful and timely sensing of the relevant actions of the audience that you’re designing for and on prompt, clear and effective response. Any interactive project is going to involve listening, thinking and communicating. Whether it involves one cycle or many, the interaction should be engaging for your audience.

Equipments: 

tripod, acrylic board, paper legs *4, sharp proximity sensors (40-150cm) *2, projector, electricity, arduino Uno, multiple wires, tape, processing on pc.

Sketches:

During the time when we need to prepare the final ideas as a draft presentation, we drew the sketches as we intended to create a LED table. After the final idea presentation, our feedback from Prof.Marcela is that we need to think practically about how difficult to build the LED table if we want to use 8*10 dots for LEDs. It turns out that the LED installation would be the biggest barrier. Then Prof.Marcela asks us to rethink about the concept of “swinging the pad”, if we want to make the user feel that they are swinging the pad, we might need to stick the sensors onto a real physical ping-pong pad. So the first time the sketches are just rough ideas.

Then after putting the installation into practice, we decide to use the sharp proximity sensors, and stick them to the leg of our acrylic table so that they could use feet as interaction. If we use the ping-pong pad for sensors, the sensor could hardly detect the value as the pad would move not straightly left or right, but using the feet would allow the sensor to detect straightforward. So we have the second draft.

Installation and obstacles along the process:

1 we started with the table. A major problem is the exact height for the sensors. At first we use the foam to create the four legs, but it turns out that the sensor itself need to have a certain height to project. So we had to switch to using paper boxes, and cut them into paper legs with the same height. 

2 we moved to adjust the position of the projector. Sadly the projector we borrowed would only allow a certain distance, and a slight lean of the projector would cause the color of the screen to change ( yes it changes to pink when we lean the projector only a little bit), so we could not find a proper way to settle the projector. We cut a piece of foam to place the wires of the projector, but the outcome is still not very satisfying.

3 we then looked around the studio and realized that we could hang the projector using a tripod. The position that if we pose the projector underneath the table, the angle is very hard to adjust, but we could hang it so the light of projector would come down straightforward to the acrylic table. 

4 we assembled the two proximity sensors onto the inner side of the paper legs, so we could hide the wires by sticking them with a tape. The sensor would be on each side of the leg and could detect the movement of the users’ leg. 

5 we tie the projector onto the tripod and and test the height several times to make sure the screen it projects fit with the size of the acrylic board.

6 the acrylic board we borrowed is transparent, we first peeled off the sticky paper on it, but then find that the light could not reflect on a true transparent board, so we leave the other side of the board with brown paper as background.

7 the sensor could not react to our movements for the first testing, and after minutes of debugging, we realized that we connected the wrong wire to A0 instead of ground. We replugged the wires to the sensor and it worked.

Demo:

As you could see from the game, the two users each control one pad using the feet. The pad would move right when your feet moves right, vice versa. And when you lose a ball, your opponent would get one point. Whoever wins up to five points would win this Balance Pong game.

Code Reference:

1 Tanay Singhal, Processing Pong Game: Make Ball Bounce Around Screen:https://www.youtube.com/watch?v=SsZmuEEHcbU 

2 LessThanProductive Productions, Processing Sketch to MadMapper using Syphon :https://www.youtube.com/watch?v=ItfCvU6jc5E 

3 Daniel Shiffman, Coding Challenge #67: Pong! :https://www.youtube.com/watch?v=IIrC5Qcb2G4

so for the Arduino Coding part we did the basic serial communication and sensor movements (left and right). for the Processing coding part we had classes for the ball and the pad/paddle. In order to use madmapper we use the Canvas function, and we add functions to realize the ball to bounce back and forth. (the complete code is below)

Music Source:

We added several music effects to make the game more interesting and interactive.

Testing:

We asked Amy’s roomates to help film the demo, and invited them to play the game. We also asked some random students in the hall way to play the game, and only telling them that this is a pong game that you need to figure out how to play it by yourself. Here are some feedbacks we observed:

1 They are very excited about the projector effect, they look at our project and found it very fancy.

2 They can’t really find the sensor at first, because we didn’t tell them exactly where we hid the sensors.

3 They could understand the game quickly, and score the ball.

4 They find the sensor not really consistent,because the sensor is always sending values, it looks a little bit unstable moving the pad on the screen.

Feedbacks from Professors and other classmates:

During the final presentation session, we showed our demo and received feedbacks. These are definitely the points where we could improve if we got more time:

1 maybe use sandpaper on the board, so that the board could project it clearly.

2 translucent acrylic board might be very useful.

3 try project it on the real pc screen, because the user could really see the game and understand.

4 more visual effect for the winner,not just simply display like a “you won” or “try again”.

What we learned from the whole process:

1 Plan ahead (leave time to go over again and again)  

2 Prepare the right materials (foam, plastic, paper) 

3 Try as many times for testing as you can 

4 Interaction could be explored more 

5 Team work (we shared a very good time)

I went to the final show:

During the final show, since my partner has a final test at that time, and our projector is not allowed to be used, we decided to not showcase our project. I did go to the final show to see other people’s projects : they are incredibly amazing. One of the works that I love, if i remember the name correctly, is Ada’s winding machine. The whole concept is beautiful and the wooden whirling machine looks delicate. I also saw some prints works and exhibition right across the IMA studio, I think they are in the art studio.

import codeanticode.syphon.*;
import processing.sound.*;
import processing.serial.*;

String myString = null;
Serial myPort;
int NUM_OF_VALUES = 2;
int[] sensorValues;
int leftValue;
int rightValue;
int preLeftValue;
int preRightValue;

PGraphics canvas;
SyphonServer server;

Ball ball;
Paddle left;
Paddle right;

int leftscore = 0;
int rightscore = 0;
int seq = 0;

int count_start = 1;
int count_win = 1;
SoundFile start;
SoundFile lose;
SoundFile hit;
SoundFile win;

void setup(){
  size(600, 400, P3D);
  canvas = createGraphics(600, 400, P3D);
  //fullScreen(P3D);
  server = new SyphonServer(this, "Processing Syphon");
  
  start = new SoundFile(this, "/Users/amy/Desktop/finallll/start.mp3");
  lose = new SoundFile(this, "/Users/amy/Desktop/finallll/lose.mp3");
  hit = new SoundFile(this, "/Users/amy/Desktop/finallll/hit.mp3");
  win = new SoundFile(this, "/Users/amy/Desktop/finallll/win.mp3");
  
  ball = new Ball();
  left = new Paddle(true);
  right = new Paddle(false);

  setupSerial();
}

void draw(){
  canvas.beginDraw();
  
  switch(seq){
    
  case 0:
    
    canvas.background(0);
    canvas.fill(255);
    canvas.textSize(40);
    canvas.text("Welcome to Balance Pong!", 55, 150);
    canvas.noFill();
    canvas.stroke(255);
    roundedRect(240, 240, 120, 60, 30, 30);
    canvas.textSize(30);
    canvas.text("Start", 265, 280);
    
    leftscore = 0;
    rightscore = 0;
    
    if (count_start > 0){
      start.play();
      count_start -= 1;
    }
    
    if (mousePressed){
      seq = 1;
    }
    break;
    
  case 1:
  
    updateSerial();
    printArray(sensorValues);
    leftValue = sensorValues[0];
    rightValue = sensorValues[1];  
    canvas.background(0);
    
    if (leftscore < 5 && rightscore < 5){
      ball.checkPaddleRight(right);
      ball.checkPaddleLeft(left);

      left.show();
      right.show();
      left.update();
      right.update();

      ball.update();
      ball.edges();
      ball.show();
    }
  
    sensorControl();

    canvas.fill(255);
    canvas.textSize(32);
    canvas.text(leftscore, 32, 40);
    canvas.text(rightscore, width-64, 40);
    
    if (leftscore==5){
      if (count_win > 0){
        win.play();
        count_win -= 1;
      }
      canvas.pushMatrix();
      canvas.translate(150, 130);
      canvas.rotate(HALF_PI);
      canvas.translate(-150, -130);
      canvas.textSize(40);
      canvas.text("You win!", 150, 130);
      canvas.popMatrix();
      
      canvas.textSize(30);
      canvas.text("Try Agian", 230, 200);
      canvas.noFill();
      canvas.stroke(255);
      roundedRect(220, 160, 160, 65, 30, 30);
      
      if(mousePressed){
        count_win = 1;
        leftscore = 0;
        rightscore = 0;
        seq = 1;
      }  
    }
    
    if (rightscore==5){
      if (count_win > 0){
        win.play();
        count_win -= 1;
      }
      canvas.pushMatrix();
      canvas.translate(450, 300);
      canvas.rotate(3*HALF_PI);
      canvas.translate(-450, -300);
      canvas.textSize(40);
      canvas.text("You win!", 450, 300);
      canvas.popMatrix();
      
      canvas.textSize(30);
      canvas.text("Try Agian", 230, 200);
      canvas.noFill();
      canvas.stroke(255);
      roundedRect(220, 160, 160, 65, 30, 30);
      
      if(mousePressed){
        count_win = 1;
        leftscore = 0;
        rightscore = 0;
        seq = 1;
      }  
    }
    break;
  }
  
  canvas.endDraw();
  image(canvas, 0, 0);
  server.sendImage(canvas);
}


void sensorControl(){
  
  if (leftValue > preLeftValue + 5){
    left.move(preLeftValue-leftValue);
  } else if (leftValue < preLeftValue - 5){
    left.move(preLeftValue-leftValue);
  } else if (leftValue < preLeftValue + 5 && leftValue > preLeftValue - 5) {
    left.move(0);
  }
  preLeftValue = leftValue;
  
  if (rightValue > preRightValue + 5){
    right.move(rightValue-preRightValue);
  } else if (rightValue < preRightValue - 5){
    right.move(rightValue-preRightValue);
  } else if (rightValue < preRightValue + 5 && rightValue > preRightValue - 5) {
    right.move(0);
  }
  preRightValue = rightValue;
  
}


void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 1 ], 9600);
  myPort.clear();
  myString = myPort.readStringUntil( 10 ); 
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}

void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); 
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}


void roundedRect(float x, float y, float w, float h, float rx, float ry) {
    canvas.beginShape();
    
    canvas.vertex(x,y+ry); 
    canvas.bezierVertex(x,y,x,y,x+rx,y); 
    canvas.vertex(x+w-rx,y); 
    canvas.bezierVertex(x+w,y,x+w,y,x+w,y+ry); 
    canvas.vertex(x+w,y+h-ry); 
    canvas.bezierVertex(x+w,y+h,x+w,y+h,x+w-rx,y+h); 
    canvas.vertex(x+rx,y+h); 
    canvas.bezierVertex(x,y+h,x,y+h,x,y+h-ry); 

    canvas.endShape(CLOSE);
}


class Ball{
  float x = width/2;
  float y = height/2;
  float xspeed;
  float yspeed;
  float r = 12;


  Ball() {
    reset();
  }

  void checkPaddleLeft(Paddle p) {
    if (y - r < p.y + p.h/2 && y + r > p.y - p.h/2 && x - r < p.x + p.w/2) {
      if (x > p.x) {
        hit.play();
        float diff = y - (p.y - p.h/2);
        float rad = radians(45);
        float angle = map(diff, 0, p.h, -rad, rad);
        xspeed = 5 * cos(angle);
        yspeed = 5 * sin(angle);
        x = p.x + p.w/2 + r;
      }
    }
  }
  void checkPaddleRight(Paddle p) {
    if (y - r < p.y + p.h/2 && y + r > p.y - p.h/2 && x + r > p.x - p.w/2) {
      if (x < p.x) {
        hit.play();
        float diff = y - (p.y - p.h/2);
        float angle = map(diff, 0, p.h, radians(225), radians(135));
        xspeed = 5 * cos(angle);
        yspeed = 5 * sin(angle);
        x = p.x - p.w/2 - r;
      }
    }
  }

  void update() {
    x = x + xspeed;
    y = y + yspeed;
  }

  void reset() {
    x = width/2;
    y = height/2;
    float angle = random(-PI/4, PI/4);
    xspeed = 5 * cos(angle);
    yspeed = 5 * sin(angle);

    if (random(1) < 0.5) {
      xspeed *= -1;
    }
  }

  void edges() {
    if (y < 0 || y > height) {
      yspeed *= -1;
    }

    if (x - r > width) {
      lose.play();
      leftscore++;
      reset();
    }

    if (x + r < 0) {
      lose.play();
      rightscore++;
      reset();
    }
  }


  void show() {
    canvas.fill(255);
    canvas.ellipse(x, y, r*2, r*2);
  }
}


class Paddle {
  float x;
  float y = height/2;
  float w = 20;
  float h = 100;

  float ychange = 0;

  Paddle(boolean left) {
    if (left) {
      x = w;
    } else {
      x = width - w;
    }
  }

  void update() {
    y += ychange;
    y = constrain(y, h/2, height-h/2);
  }


  void move(float steps) {
    ychange = steps;
  }
  
  void show() {
    canvas.fill(255);
    canvas.rectMode(CENTER);
    canvas.rect(x, y, w, h);
  }
}


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

void loop() {
  
  int left = analogRead(A0);
  int right = analogRead(A1);
  Serial.print(left);
  Serial.print(",");
  Serial.print(right);
  Serial.println();

  delay(50);

}

Recitation 10–documentation

name: Yiyu Yang   partner: Yudi Ao

Prof. Marcela

Section: Tu/Thur 11:15-12:30

 

Goal: to create a Processing sketch that controls media elements (images, videos and audio) using a physical controller made with Arduino.

Materials Used:a 4-30cm distance sensor, wires, Arduino Uno, Processing in PC.

For the physical controller, we use the distance sensor that we checked out from the equipment room. The circuit is exactly the one below but without the led. We did not use any led in our project for this time.

 

For the media you will manipulate, we choose to use live image and sound. Music is from Open Source Music: http://freemusicarchive.org/, and here is the credit for the song.

 

Our idea of the project, is to create a sketch on the processing, and by waving hands toward or outward the sensor, the sketch would be drawn out.

 

For the music part, when the hand is close to the sensor the music volume is low, when the hand is further it is going to be louder.

Here is the music file:

Our inspirations:

for the image part, we love the “smoke” image, like the free flow of air, so we thought about creating a flowing air on the sketch using Processing.

for the coding part, https://github.com/CodingTrain/website/tree/master/CodingChallenges is a reference to us where the creator has this Perlin Noise Flow Field #24, and the project is about how to create sketches by controlling the processing.

Finally here is how our project works:

 

Write a reflection about the ways technology was used in your project to control media. Now that you have made a media controller, think about in what other ways one can use physical computation to create interactive art and manipulate media, and incorporate this into your reflection.

Answer: Technology in our project is drawing a sketch on the screen of Processing, and the media is the music installed in Processing too. The Arduino distance sensor is one way to control the volume and the sketch by the user moving close/far to the sensor. From the readings, I understand what is basic interaction and the importance of detection of position. And in order to perform the interaction with media and technology there is gonna be an environment for it. Processing is one such environment, which, through an abundance of graphical capabilities, is extremely well-suited to the electronic arts and visual design communities. There are so many ways to use physical computation, say in entertainment and even in daily life health issue, for example, the heart rate watch is combining detection and movement along with the technology of analyzing your heart rate.

import processing.serial.*;
import processing.sound.*;

//music
Serial myPort;
SoundFile song;
int valueFromArduino;
float volume = 0.5;
float preValue = 100;

//perlin noise
float inc = 0.1;
int scl = 10;
float zoff = 0;
float newSpeed = 2;
int cols;
int rows;
int noOfPoints = 2500;
Particle[] particles = new Particle[noOfPoints];
PVector[] flowField;

void setup(){
  size(800, 600);
  background(255);
  
  //value from arduino
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[1], 9600);
  
  //music
  song = new SoundFile(this, "/Users/amy/Desktop/media_controller/song.wav");
  song.play();
  
  //perlin noise
  cols = floor(width/scl);
  rows = floor(height/scl);
  
  flowField = new PVector[(cols*rows)];
  
  for(int i = 0; i < noOfPoints; i++) {
    particles[i] = new Particle();
  }
}


void draw() {
  //value from arduino
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);
  
  //music
  if (valueFromArduino < preValue){
    volume -= 0.1;
  }else if (valueFromArduino > preValue){
    volume += 0.1;
  }
  if (volume > 1){
    volume = 1;
  }else if(volume < 0.1){
    volume = 0.1;
  }
  song.amp(volume);
  
  
  //perlin noise
  float yoff = 0;
  for(int y = 0; y < rows; y++) {
    float xoff = 0;
    for(int x = 0; x < cols; x++) {
      int index = (x + y * cols);
      float angle = noise(xoff, yoff, zoff) * TWO_PI * 2;
      PVector v = PVector.fromAngle(angle);
      v.setMag(1);
      flowField[index] = v;
      stroke(0, 50);   
      xoff += inc;
    }
    yoff += inc;
  }
  zoff += (inc/50);
  
  for(int i = 0; i < particles.length; i++) {
    particles[i].follow(flowField);
    particles[i].update();
    particles[i].edges();
    particles[i].show();
    particles[i].updateSpeed();
  }
  
  if (valueFromArduino < preValue){
    newSpeed -= 3;
  }else if (valueFromArduino > preValue){
    newSpeed += 3;
  }
  if (newSpeed > 12){
     newSpeed = 12;
  }else if(newSpeed < 1){
     newSpeed = 1;
  }
  
  preValue = valueFromArduino;

}





class Particle {
  PVector pos = new PVector(random(width),random(height));
  PVector vel = new PVector(0,0);
  PVector acc = new PVector(0,0);
  float maxSpeed = 2;
  float h = 0;
  PVector prevPos = pos.copy();

  void update() {
    vel.add(acc);
    vel.limit(maxSpeed);
    pos.add(vel);
    acc.mult(0);
  }
  
  void updateSpeed(){
    maxSpeed = newSpeed;
  }

  void follow(PVector[] vectors) {
    int x = floor(pos.x / scl);
    int y = floor(pos.y / scl);
    int index = (x-1) + ((y-1) * cols);
    
    index = index - 1;
    if(index > vectors.length || index < 0) {
      index = vectors.length - 1;
    }
    PVector force = vectors[index];
    applyForce(force);
  }

  void applyForce(PVector force) {
    acc.add(force);
  }

  void show() {
    stroke(0, 50);
    h += 1;
    if (h > 255){
      h = 0;
    }
    strokeWeight(1);
    point(pos.x, pos.y);
    updatePrev();
  }
  
  void updatePrev() {
    prevPos.x = pos.x;
    prevPos.y = pos.y;
  }

  void edges() {
    if (pos.x > width) {
      pos.x = 0;
      updatePrev();
    }
    if (pos.x < 0) {
      pos.x = width;
      updatePrev();
    }

    if (pos.y > height) {
      pos.y = 0;
      updatePrev();
    }
    if (pos.y < 0) {
      pos.y = height;
      updatePrev();
    }
  }
}

Recitation/workshop–documentation

Name: Yiyu Yang

Prof. Marcela

Session: Tu/Thur 11:15-12:30

 

For this recitation, I chose the Object Oriented Programming in room 825.

At the beginning of the class, we were given the link to download the class code written by our lecturer, and he gave very vivid examples on how to think about the term “class” “function” “void setup” “void draw” and how to build it. Examples included: phones, poke-man…

Here is the example code for class:

Here is the code that I did, and used the examples as reference:

Obstacles: When I was coding, I didn’t realize that we need to pay attention to the order of the tabs. So the class tab has to go before the object tab. There is no way processing would run if we mess up with the order. I then corrected my mistake the code could run.

I also learned to insert image properly, and I still might need to change the background color and the quantity of the object.

After this session I felt I understood more about coding for objects, and how to create a class for it/them. Because our final project including coding for a ping-pong game, so there has to be several classes to realise the different functions. I actually need to ask the TAs for instructions on the idea for our projects’ code, I think I learned a lot from this recitation session and the lecturer is very humorous and nice.

MWZZ[] myMWZZsArray = new MWZZ[7];
PImage MWZZ;

void setup() {

  MWZZ = loadImage("MWZZ.jpg");
  size(500, 500);
  for (int i=0; i<myMWZZsArray.length; i++) {
    float x = random(0, 400);
    float y = random(0, 400);
    float r = random(0, 360);
    myMWZZsArray[i]= new MWZZ(x, y, r, MWZZ);
  }
}

void draw() {
  background(0, 0, 0);
  for (int i=0; i<myMWZZsArray.length; i++) {
    myMWZZsArray[i].move();
    myMWZZsArray[i].display();
  }
}



class MWZZ{
  float rotation;
  PImage photo;
  float x_;
  float y_;
  
  
  MWZZ(float x, float y, float rot, PImage photo_){
    rotation = rot;
    photo = photo_;
    x_ = x;
    y_ = y;
  }
  
  void display(){
    image(photo,x_,y_, 100,100);
    rotate(radians(rotation));
   }
   
  void move(){
    rotation++;
  }
}

Recitation 9 –Documentation

Name:Yiyu(Nora) Yang

Prof. Marcela

Section: Tu/Thur 11:15-12:30

Partner: Yudi(Amy) Ao

 

Digital Fabrication: Working in pairs, to design and build a physical model.

We used 3D print and used PLA material to print our fabrication no bigger than 125cm^3 (i.e.: 5cm x 5cm x 5cm).  We also created a STL file. To build the 3D model, we used TinkerCad. When we finished preparing our file, I guess there are just too many other classmates waiting to print out, so we scheduled a printing session on Friday(April 20) but then the staff had a meeting, so we rescheduled our appointment to Tuesday(April 24).

So our inspiration is the cartoon Peppa Pig, it is currently very trending in China because many people tried to remake funny versions of the cartoon, made it the biggest character on social media. We love the cuteness of the pig, and its hilarious figure.

Peppa Pig looks like this

Here are some screenshots from our TinkerCad

(special thanks to Marcela who helps us with “shaping” the pig’s nose)

Our STL file looks like this

 

Here is the printing appointment and we got to see how the 3D print machine works

Here is the final outcome of our fabrication

we need to “peel off” the supporting foundation for the pig’s slim legs and arms.

You are asked to also include a reflection on your work.

  1. Why did you choose your method of digital fabrication to construct your reimagined piece? Answer: We looked through all the inspirations posted online in the recitation post, and most of the artists presented their artworks, especially furniture designs on the website. Some of them are very complex while others could be simple to understand. We actually think about creating a cigarette case according to one of the designs, but then we switched to Peppa pig as we want to experience something unique. And then we thought laser cutting could be very hard to put into practice for our fabrication because our designed figure is very smooth and requires many components inside of it. Laser cutting could be used to create something delicate but rather stays on the surface.
  2. Compare the crafting method you have been using so far for the Stupid Pet Tricks and Midterms with the ones used during this recitation. How do you think that these digital fabrication methods can help you for your Final Project?                                                                                Answer: First of all, it will definitely helps to make our project “looks” more beautiful. It will serve as a part of the project, and be able to cover all the ugly wires underneath. Most importantly, it will also acts as a creative section for our project, it might have some decorative function, and could also reflects our projects’ idea in it.
  3. How does the reading “The Digital Fabrication Revolution” set the context to the work you did? Answer: I felt that the passaged explained that digital fabrication contains a lot more than just 3d printing. There is actually a long history for this topic, and there is limitations for it, since this technology is still in its infancy. It also talks about the two aspects: bottom up and bottom down, that digital fabrication could be used as useful prototype for classroom, but also for labs and researches. In all, the work we did this time might just be a small version of implementation of the larger digital fabrication picture.
  4. If you were to imagine an assignment using digital fabrication at IMA in the year 2149, what would be different and what would be similar?                                                                            Answer: I guess the difference could be that 3d printers are much more cheaper and could be used by everybody, it could be smaller in size, more portable, easier to control and wider range for usage. The same is that you still need to come up with your own original ideas, and also test your project using the fabrication as prototype.

Final Project Proposal

Create an interactive system of your choice using Processing and Arduino.

Begin the process by writing an approximately 500 word essay in which you:

  1. Define “interaction” in your own words. Be specific, give details.

Interaction, for me, it means that the user could engage with the project, and have fun with it. There are going to be two objects/sides, one is the project itself, and one is the user, then the interaction means the effect, or the chemistry between the two. The user could do something toward the project, whether through touching, holding, shouting, playing…etc, just various ways of “communicating” with the project. I always thought that interaction has to be guided, but through the midterm project, I learned that interaction should be totally spontaneous, which means, no guidance should be enforced onto the interaction. The user could do whatever he/she prefers, and engage with the project based on his/her own thoughts. For example, there is always the need to give a little bit introduction or at least explanation about the project at the very beginning, indicating the user with some important note or warnings. Then, the user should be able to fully “explore” the project, and it should not be many restrictions towards the interaction. When it comes to the project side, the project, or the object should be able to “react”  to what the user just did to it, for example, light up ( if it is a led), vibrate (if it is a sensor), disappear ( if it is a picture on the tablet)…etc. So interaction combines both the user and the project, it is an organic communication between the two.

 

  1. Analyze either an established form of interaction or a specific interactive experience, based on your definition of interaction. For instance:

-How does your definition clarify the nature of that form of interaction?

-In what ways does your definition highlight (or help us to understand) its function and/or intent?

I will actually talk about the experience that I had during our group’s midterm project showcase. Our project’s definition for interaction is not clear, to be frank, because we too much “assume” that the user would know how to control the game, on the contrary, in reality they don’t. There were several users that fail to understand the interaction ( the keyboard to control the movement of the character) and use the touchpad instead. That is definitely something we keep in mind and we want to improve for our final project and any project in the future.

We do have a sign saying that “picking up Marcela and get to the door”, so the user might understand a bit about how the game works, but honestly it is still very blurry. The concept was nice but did not give much information on the instructions. So, me and my partner, Amy, we always talked a little bit about the background and the instructions of the game to the user, just to remind the user how to interact with the game. That was pretty awkward because we got to repeat ourselves all the time. We tried to set up a clearer definition later on by writing the description on a piece of paper and show it to the user, it helped a little bit.

 

  1. Propose a Final Project. Your proposal must:

-Distinctly build up and relate to your definition of interaction. Indicate how so.

-Indicate how it derives from, responds to, or relates in some significant manner to your critique of the established form of interaction or specific interactive experience you addressed above. Indicate how so.

As I had described, the interaction needs two sides to show the chemistry, the user and the project itself. So Our project will be an interactive version of ping-pong game with a led box. In the box, there will be about 6✖8 sections, and each section there will be a led inside. While the ping-pong image (the board and the ball) would be presented on the led box, the user could interact with the game by moving the board left or right using the controller of arduino sensors. It is a very obvious game and does not need too much description or explanation. In 1 minute the user would understand how to control the two directions of the controller.

The reference of the project, is that I saw a led table on Youtube,

https://www.youtube.com/watch?v=GWAv78rhlSs

where people could touch the different areas of the table, or play different types of music, and the table surface would be lit up (because there are many many leds underneath). I want to challenge myself by thinking further, maybe a led game would be even better than simply touching the surface, there could be more interactions be added to the game. So I even thought about the snake game,

https://www.youtube.com/watch?v=v56zLOqhjV4

but it is too basic, so I thought maybe we could do a more competitive and interesting ping-pong game. When the user sees the game, it would be a led box in front, two controllers, and that’s it. The user does not need to see the computer because there will be nothing shown to them. Also, I guess ping-pong represents a very strong cultural characteristic from China, and it is also loved by many classmates in our campus, I always see international friends play ping-pong outside the gym, so I think the game itself could relate to many people.

Some basic materials we need is arduino uno, many many leds, paper box( I even think about maybe we could 3D print the box out), multiple wires, distance sensors, sound sensor and a laptop.

The game would allow the user to have lots of fun, because it is a new version of ping-pong game, and it is not easy to complete the game. It combines led and sound, and maybe some vibrations, so it would let the user enjoy the game through different types of physical senses.

 

Lab 8–Documentation

Session: Prof.Marcela, Tu/Thur 11:15–12:30

Name: Yiyu Yang

Recitation 8 – Drawing Machine

Materials used:

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

Part A

Step 1: Build the following circuit to control the stepper. Use the stepper_oneRevolution example to get your motor to make one revolution.

the process: It was not easy to complete the first step. I went to the equipment room and tried to borrow a PC, because my computer already showed that “cannot carry electricity-overloaded usb connection”, but then the equipment room ran out of PCs. Big thanks to the TA Nick, who helped me with the circuit and kindly borrowed his computer for me to plug in Arduino Uno.

Step 2: Use your potentiometer and the MotorKnob example to control your motor. Please note that 42STH33-0404AC stepper motor is a 200 step motor. You can use the function map() in order to match the movement of the knob with the rotation of the motor.

the process: I made adjustment to the previous code, and add a new potentiometer to the circuit. When I spin the potentiometer, the motor would spin according to the direction that was on the potentiometer. I also mapped the sensor value.

Step 3: Once you have your motor moving, you should collect the parts of the laser-cut and 3D printed mechanisms as the pictured below.Then, find another person to work with. Combine your parts into a mechanical arm that can hold a marker, as seen in  the picture below.

the process: I worked with my partner @Amy Ao, together with her we drew a great picture!

 

Part B

Add a reflection about the use of actuators, the digital manipulation of art, and the creative process to your blog post. What kind of machines would you be interested in building?

Answer: Actually the idea of drawing machines is one of the inspirations for our group’s midterm project. We love how the machine could note down the trace of the route. This is definitely one of the machines that we would love to explore more.

Choose an art installation mentioned in the reading ART + Science NOW, Stephen Wilson (Kinetics chapter). Post your thoughts about it and make a comparison with the work you did during this recitation. How do you think that the artist selected those specific actuators for his project?

Answer: I love the Daniel Palacios Jemenez’ s artwork, the Waves, 2006. Motors rotate an elastic rope to create complex sound and visual wave oscillations. The photo creates the illusion of solid shapes because the exposure blurs multiple rope positions. The system responds to viewers=there is stillness when there is no motion, regular sine waves with simple motion, and complex, chaotic patterns and sounds with much motion. I extremely prefer this one because this piece of artwork could involve many interactions with the audience.

 

 

 

/*
 * 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 100

// 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;

void setup() {
  // set the speed of the motor to 30 RPMs
  stepper.setSpeed(30);
  pinMode(A0,INPUT);
}

void loop() {
  // get the sensor value
  int val = map(analogRead(A0),0,1024,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;
}

Midterm Project–Yiyu Yang

Section: Prof. Marcela, Interaction Lab, Tu/Thur 11:15-12:30

Name: Yiyu Yang, Partner: Amy Ao.

 

Goal: To create an interactive project that actually works and is fun!

Requirements: Explore Processing and / or Arduino by creating a small project that does something useful, interesting, or entertaining. Try to illustrate your understanding of the fundamental concepts covered in class. Be sure to document your work thoroughly on the documentation blog. You may work alone or with a single partner from your lecture section. Both of you should document the work individually and know about the work done in the project.

Materials used: 1 computer installed with Processing, several Scratch A4 papers.

Name of the project: I ‘m a Maze

Inspiration: We looked into different websites, including http://www.creativeapplications.net/ and https://creators.vice.com/en_us where we found inspirations about drawing machines, and tracking routes using GPS database.

Apply what we learned in class: I remembered in class we did some coding on drawing objects, and also adding the “x,y position” to the object to make it move. We also did some experiments on the keyPressed functions. In our project, we self-searched some more functions.( detailed description is below).

Researches: We tried to find some more inspirations, and we found a mini-game here, http://ncase.me/door/. It is about a small character trying to pick up the keys, and to open the doors to the next level. However, the game is not open source, so we didn’t find its code( we thought we might could have learned something from the code), but we got the idea and how interesting the game is, also since it is a mini one, it doesn’t require too long time for attention from the user.

Code References: In this project, we used Processing (Java language). Several main functions we used are: class, import sound & image, for loop, If, else if, arrays, keyPressed, boolean,x,y position.

https://processing.org/reference/arc_.html: we drew several ‘obstacles’ using the arc function.

https://processing.org/reference/keyPressed_.html: when we need to move the character.

https://processing.org/reference/boolean.html: to judge where to move the character, we have to decide true or false for four times, so then the character could move according to up down left right.

https://processing.org/reference/class.html: we need to create class for doors, for obstacles, for the images, and for the x.y position of the character.

https://processing.org/reference/ArrayList.html: for every new position of the character, it has to be recored in the new updated list.

Amy did many parts of the coding, and I communicated with her about the logic and tried my best to assist. We also need to give special thanks to Amy’s roommate to help us with the code.

To polish the project: Since Amy and me are both quite strict about the artistic aspect of the project ,we photoshopped several times just to get the best image of our professors’ profile photo. I also searched lots of images to find the proper picture for our main character, the doors(because we need two versions, one open and one close, but they have to be the same size), the obstacles and many more details.

In order to test the route, we also used scratch paper to design the perfect route.

User Testing: received feedbacks from other students:

1.Unclear intention: Many users at first didn’t know what to do with the game, they would user the touch pad, but we actually require them to use the directions’ key board (up down left right).

2.More description of the game interface: on the first page, we wrote “pick up Marcela to open the door”, so many user would expect to see Marcela again in the second page of the game. Instead, we should say that try to pick up every professor’s head, not specifically to Marcela.

3.More functions: instead of just picking up the head of the professors, maybe the game could add more layers, and more interesting functions. For example, feeding them food, or giving the multiple food, not just simply picking them up.

4. Show the trace: many times, the user could not understand what do the final red lines mean, maybe we could show the trace when they walk, or at the last stage explain that theses are the routes you have just walked through.

5.Unclear directions: Because there is no limit on the border of each letter, it is pretty easy for the users to walk out of the picture, so maybe we could add frame to it, so the user could follow the proper path.

User Testing: my feedback for other students’ projects:

1. the penguin: it tells such a lovely story, and it shows strong consistency in the gam itself. I would suggest have more functions and more interactions with the user.

2. the red&blue box: it is so interesting! you could have your best friend to play it with you. I was quite unsure what is the goal of the game, but it is very interactive.

3. the plane& glove: the idea is perfect, I could feel that the inspiration and the story behind the game. It would be better if the sensor could be more sensitive, but I understand that sometimes the sensor just tends to be a little bit dumb.

4. the railway map: the drawing is amazing, it would be better if there are more functions, for example, once the railway line appears, the whole line on the map could be lighten up.

5. the maze using hand: I see how you design the whole thing on purpose with messed directions for sensors. Since I am kinda slow in realizing that you have switched the directions of the sensor, the game is a little bit hard to me. I finished only half of the maze.

Outcomes: 

demo

fun video during user testing session when a classmate plays our game:

–code for our project is at the very bottom of this documentation.

Reflections on the presentation: Here are some advices that were super helpful for the improvement of our project–

1. Maybe the objects in the middle of the picture could be faded away at the very end, because sometimes the user doesn’t understand the red lines are the routes they just walked. We could try to show them how the route were drawn, by fading the obstacles, or just simply show the trace when they are walking. (From Prof. Marcela)

2. For the next step, maybe there could be more components added to the project. For example, a physical draw board, so the user could actually see while they move. Also, you can take a look at Jun Naguyen-Hatsushiba’s work, the artist’s projects might give you more inspirations. (From Prof. Antonius)

What we learned from the whole project:

1.We used some coding knowledge that were introduced in class. We practiced our coding ability by putting what we learned to something concrete.

2.We asked some of our friends to play the game, they were surprised about the final “win” page, thought it was creative. Next time whenever we want to test the project, we could just invite friends to help us test it. And also they gave us many good feedbacks.

3.Group-work, even though our team only has two people, we tried to distribute our work at first, and we also communicated very frequently in order to get a good result of the project.

Improvements (if we got more time):

1.Maybe we could upgrade the user interaction, instead of using keyboard, we could use buttons, or other Arduino components.

2.There are still several small details of the game that could be improved, for example, the smoothness of the character’s movement, the route could not be repeated.

3.Maybe the game could be a little more complex, but because we wanted to design a mini-game (2 mins), so next time the game could have more logic or algorithms in it.

Conclusions: The whole project was smoother than I assumed. We spent considerable time thinking about the perfect idea for the project during two weeks before the deadline, and considerable time to transform our idea into something practical. From the user testing session on Friday, I also played and interacted with other classmates’ projects, every one of them is super creative and fun. We received several useful feedbacks and thanks for everyone who gave us new inspirational ideas during the presentation. Also, after reading the article “Making Interactive Art: Set the Stage, Then Shut Up and Listen” by Tom Igoe, I realized that a good project that is interactive, the artist don’t have to explain much about it beforehand. The artist should leave the floor to the users, the audience, and let them explore the project. If the artist explained already too much to the audience, it kinda shapes the idea of the audience, and restrict the possible creative outcome of the projects.

(since we have a folder of code, images, music, so you might not see the project if you copy-paste the code below. I could share the zip file if needed)

import processing.sound.*;

//music
SoundFile bgm;
SoundFile door;
SoundFile finalwin;
SoundFile newSection;

//picture
PImage marcela;
PImage door_close;
PImage door_open;
PImage white;
PImage moon;
PImage antonius;
PImage sean;
PImage rodolfo;
PImage me;

//constant
int seq = 0;
float x = 150;
float y = 150;
float change = 1;

//arrays
door[] di = new door[5];
photo[] pi = new photo[5];
obstacle[] oi = new obstacle[10];
float[] obx = {558,642,480,720,360,100,665,535,950,1000};
float[] oby = {100,100,270,270,420,420,460,460,400,390};
float[] obr = {40,40,120,120,100,100,40,40,70,10};
float[] obh = {40,40,120,120,100,100,40,40,70,10};
float[] obs = {0,0,6,4,2,-2,4,4,0,2};
float[] obe = {8,8,8,6,6,2,8,8,8,6};
float[] dx = {725,580,215,700,1070};
float[] dy = {311,180,320,480,480};
float[] px = {480,578,210,580,1020};
float[] py = {380,40,470,470,410};
float[] nx = {570,225,470,1020,0};
float[] ny = {170,400,495,360,0};
float[] co = {1,1,1,1,1};
float[] cn = {-1,1,1,1,1};

//arrayLists to store the position
ArrayList<xposition> xi = new ArrayList<xposition>();
ArrayList<yposition> yi = new ArrayList<yposition>();


void setup(){
  size(1200,600,P2D);
  
  bgm = new SoundFile(this, "/Users/apple/Desktop/midterm/bgm.mp3");
  door = new SoundFile(this, "/Users/apple/Desktop/midterm/door.mp3");
  finalwin = new SoundFile(this, "/Users/apple/Desktop/midterm/finalwin.mp3");
  newSection = new SoundFile(this, "/Users/apple/Desktop/midterm/newSection.mp3");
  bgm.play();

  door_close = loadImage("door_close.png");
  door_open = loadImage("door_open.png");
  marcela = loadImage("marcela.png");
  moon = loadImage("moon.png");
  sean = loadImage("sean.png");
  antonius = loadImage("antonius.png");
  rodolfo = loadImage("rodolfo.png");
  me = loadImage("me.png");
  PImage[] p = {marcela, moon, sean, antonius, rodolfo};
  
  //set up obstacles
  for (int i = 0; i<10; i++){
    oi[i] = new obstacle(obx[i], oby[i], obr[i], obh[i], obs[i], obe[i]);
  }
  //set up doors
  for (int i = 0; i<5; i++){
    di[i] = new door(dx[i], dy[i], door_close, px[i], py[i], nx[i], ny[i], co[i], cn[i]);
  }
  //set up photos
  for (int i = 0; i<5; i++){
    pi[i] = new photo(px[i], py[i], p[i]);
  }
}


void draw(){
  switch(seq){
  case 0:
    if (keyPressed){
      if (keyCode == UP){
        y = y - 2;
      }else if (keyCode == DOWN){
        y = y + 2;
      }else if (keyCode == LEFT){
        x = x - 2;
      }else if (keyCode == RIGHT){
        x = x + 2;
      }
    }
    background(255);
    di[0].load();
    pi[0].load_1();
    fill(0);
    textSize(140);     
    text("I'm  a  maze", 200, 350);
    textSize(25);
    text("(try to pick up marcela to get the door open!)", 600, 400);
    image(me, x, y, 50, 50);
    di[0].update();
    pi[0].update();
    di[0].play_open();
      
    if (dist(x,y,725,311) <= 10){
      x = 570;
      y = 170;
      seq = 1;
    }
    break;
    
  case 1:
    if (keyPressed){
      if (keyCode == UP){
        if (oi[0].judgeup() == true & oi[1].judgeup() == true &
        oi[2].judgeup() == true & oi[3].judgeup() == true & 
        oi[4].judgeup() == true & oi[5].judgeup() == true &
        oi[6].judgeup() == true & oi[7].judgeup() == true & 
        oi[8].judgeup() == true & oi[9].judgeup() == true){
          y = y - 2;
          x = x + random(-0.5, 0.5);
          xi.add(new xposition(x));
          yi.add(new yposition(y));
        }
      }else if (keyCode == DOWN){
        if (oi[0].judgedown() == true & oi[1].judgedown() == true & 
        oi[2].judgedown() == true & oi[3].judgedown() == true & 
        oi[4].judgedown() == true & oi[5].judgedown() == true & 
        oi[6].judgedown() == true & oi[7].judgedown() == true & 
        oi[8].judgedown() == true & oi[9].judgedown() == true){
          y = y + 2;
          x = x + random(-0.5, 0.5);
          xi.add(new xposition(x));
          yi.add(new yposition(y));
        }
      }else if (keyCode == LEFT){
        if (oi[0].judgeleft() == true & oi[1].judgeleft() == true &
        oi[2].judgeleft() == true & oi[3].judgeleft() == true & 
        oi[4].judgeleft() == true & oi[5].judgeleft() == true & 
        oi[6].judgeleft() == true & oi[7].judgeleft() == true & 
        oi[8].judgeleft() == true & oi[9].judgeleft() == true){
          x = x - 2;
          y = y + random(-0.5, 0.5);
          xi.add(new xposition(x));
          yi.add(new yposition(y));
        }
      }else if (keyCode == RIGHT){
        if (oi[0].judgeright() == true & oi[1].judgeright() == true &
        oi[2].judgeright() == true & oi[3].judgeright() == true &
        oi[4].judgeright() == true & oi[5].judgeright() == true &
        oi[6].judgeright() == true & oi[7].judgeright() == true & 
        oi[8].judgeright() == true & oi[9].judgeright() == true){
          x = x + 2;
          y = y + random(-0.5, 0.5);
          xi.add(new xposition(x));
          yi.add(new yposition(y));
        }
      }
    }
    background(255);
    oi[6].load_rect1();
    oi[7].load_rect1();
    oi[9].load_rect2();
    for (int i = 1; i<5; i++){
      di[i].load();
      pi[i].load();
    }
    for (int i = 0; i<10; i++){
      oi[i].load();
    }
    fill(0);
    image(me, x, y, 20, 20);
    for (int i = 1; i<5; i++){
      di[i].update();
      pi[i].update();
      di[i].next();
      pi[i].update();
      di[i].play_open();
    }
    for (int i = 1; i<4; i++){
      di[i].play_new();
    }
 
    if (dist(x, y, 0, 0) < 10){
      seq = 2;
    }
    break;
  case 2:
    if (seq == 2 & change == 1){
      finalwin.play();
      change -= 1;
    }
    background(255);
    for (int i = 0; i<(xi.size()-1); i++){
      xposition x1 = xi.get(i);
      yposition y1 = yi.get(i);
      xposition x2 = xi.get(i+1);
      yposition y2 = yi.get(i+1);
      stroke(255,0,0);
      strokeWeight(15);
      if (dist(x1.put(), y1.put(), x2.put(), y2.put()) < 10){
        line(x1.put(), y1.put(), x2.put(), y2.put());
      }
    }
  }
}

Assignment: References & Inspirations for midterm project

Assignment

Check these websites and find two projects that you like and might be references for your midterm project (post a link, video and/or images):

1.The first inspiration that I got from the website is this one:

https://creators.vice.com/en_us/article/mg9wzy/drawing-gps-pictures-by-riding-a-bicycle

The artist Wallace uses GPS route to draw! Before he rode the bike to exercise, he would plan out the route, that when the trace were recorded, it would look like a picture. Even though this project doesn’t contain any programming or coding, I felt the concept is cool.

2. This one is also about drawing:

https://creators.vice.com/en_us/article/qkzna5/the-return-of-drawing-machines

But this project was two big machines together, and draw a huge picture. I love how the pencil/pen never left the paper, so the trace could be well noted on the paper.

3. This is my third inspiration:

Land Lines – Drawing satellite imagery through gesture

The artist upload a big data base onto the system, and then he would draw/drag lines to view the satellite map. I was quite confused at first, because I don’t know if he is drawing the map himself or not. Then I found out he was just trying to make this very interactive, so that any user could use the satellite map as a tool, but also draw out the lines as wanted.

 

The project for midterm– my partner @ Amy Ao

We want to create a game using Processing to realise it. The game is about the user picking up “objects” along the way, and the route of the movements would be recorded. Then we would replay the trace of the route, and then the user would see the traces themselves. For this time, we think Arduino is not quite necessary, because the user could use the keyboards to function the main character in the game. It would be very interactive and engaging.

 

 

Guest Talk–reflection

You will participate from a talk from the community centered space Xinchejian. You will hear from project creators of this community and they will give you feedback on your project. The speakers are:

  • Andy García, Urban farming from Domosfarm

 

1. Speaker: Eduardo Alarcon

-what is a hacker: cyber criminal; group of people that bring technology to another level(using resources around);

-what is hacker space: the first hacker space in China (新车间)

-what is inside hacker space: computers, stuff, technology, space, ideas, community.Community is the most important source for the hacker space. Community is consistent no matter where the space moves.

-Xīnchējiān is a Hackerspace. Hackerspaces are community-operated physical places all around the world, where people can meet and have fun on their projects. XinCheJian, the first of many Hackerspaces in China, is one of the many hundreds Hackerspaces all around the world. Each Hackerspace is an autonomous entity, but they all share the same philosophy of having fun building things. An hackerspace is an environment where people can learn and tinker with technology, work in teams, participate in international competitions where many new opportunities can be found and created for all. Xīnchējiān mission is to support, create and promote physical computing, open source hardware and Internet of Things. To achieve this, XinCheJian has talks, discussions, projects, startups promotion, workshops, competition organisation and our own participation in international competitions…(from Xinchejian’s website introduction).Xinchejian is a volunteer-run non-profit  organization

-Eduardo’s projects: urban farming, plastic recycling, robot building, programming, helicopter simulator, and most importantly, TOKY!

IIOT: the industrial internet of things

IFTTT: a service that allows you connect different online services.

 

 

2. Speaker: Andy Garcia:

-DIY vertical hydroponic system: plant mint, basil, week 6 is time for mojito. It is a system that combines fish, and the plant, the plant could provide nutrition to the fish.

-OpenAg: Personal food computer is a project by MIT to control and collect data about plant growth environment. It is a simplified version of this food computer, they would order materials (heaters, humidity sensor) in Taobao, for digital fabrication.

-Takeaways: start with simple ideas and then add more variables, and then intricate with your projects.

 

 

3.Speaker: Andrea and Adele

-Precious plastic shanghai: is a social enterprise highly committed to preserve the environment by creating awareness about plastic waste in China.

-Random results: necklace, cup carpet, ear rings, bike that actually transforms the strength to cutting the plastic. Just making recycling fun creative, and rewarding.

 

Conclusion and reflections:

Every Wednesday, we could go to Xinchejian to join the workshop. Workshop allows people to prepare pitches, to test the projects, to inspire other people and get new ideas. Most importantly, just be creative. For example, the TOKY is a very creative version of arduino control board, where functions could simply be added through adjustment on the computer, and transfer the data through bluetooth. The plastic art pieces are not only beautiful, but also environmental-friendly. And technology is a great way to connect people, and I could feel their passion because they are all non-profit organizations, only aim to raise the awareness of technology and creativity among people.

 

Lab 6–Documentation

Section: Prof.Marcela, Tu/Thur 11:15-12:30

Name: Yiyu(Nora) Yang

Step 1

Create a Processing sketch that sends data to Arduino. Receive that data and express it using physical components (ie. servo, led, buzzer).

Answer: So I used one buzzer, and when I pressed the keyboard, not the mouse of my computer, different sounds would come out from the buzzer by pressing different keys.

CODE FOR PROCESSING:

import processing.serial.*;

Serial myPort;
int valueFromArduino;
int number;

void setup() {

size(500, 500);
background(0);

printArray(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);
}

void draw() {
// to send a value to the Arduino
if (keyPressed) {
myPort.write(number);
} else {
myPort.write(‘L’);
}
}

void keyPressed() {
number=(key-64);
}

CODE FOR ARDUINO:

int valueFromProcessing=0;
const int buzzerPin = 9;

void setup(){
Serial.begin(9600);
pinMode(buzzerPin, OUTPUT);

void loop(){
while(Serial.available()){
valueFromProcessing=Serial.read();
}
if (valueFromProcessing == ‘L’){
noTone(buzzerPin);
}else{
tone(buzzerPin, valueFromProcessing*10);
Serial.println(valueFromProcessing);
}

delay(10); // …for 1 sec
}

 

Step 2

Create a circuit using your Arduino to send data from physical inputs (ie. variable resistors, buttons, tilt switch) to Processing. Receive the data and express it visually in your Processing sketch.

Answer: So I used a potentiometer to help me control the circle size on the Processing sketch.

CODE FOR PROCESSING:

import processing.serial.*;

Serial myPort; //creates a variable: type of variable=Serial | name of variable=myPort
int valueFromArduino;

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

printArray(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);
}

void draw() {
background(0);
while ( myPort.available() > 0) {
valueFromArduino = myPort.read();
}
println(valueFromArduino);

strokeWeight(valueFromArduino*0.01);
stroke(255);
fill(valueFromArduino,valueFromArduino,valueFromArduino);
pushMatrix();
translate(width/2,height/2);
rotate(radians(map(valueFromArduino,0,255,0,360)));
ellipse(100, 0, 100, 100);
popMatrix();
}

 

CODE FOR ARDUINO:

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

void loop() {
int sensorValue = analogRead(A0);
int valMapped = int(map(sensorValue,0,1023,0,255));
Serial.write(valMapped);
delay(100);
}

 

Step 3

Now that you are able to send data back and forth between Arduino and Processing, think through the following questions.

  1. What are the possibilities for interaction that you can envision? Answer: I could see that maybe a video game or a piece of music could be created based on user typing my keyboard. In my first interaction experiment, the user could control the keyboard freely.
  2. What are some of the benefits of controlling physical elements with computational media and of controlling screen-based computational media through physical interaction? Answer: The question seems to be a little bit confused to me, I felt like maybe for some user, they would prefer controlling the physical elements rather than controlling the screen-based media. For games such as involving hands, feet, that might be good to have physical elements; but for eyes, or head, maybe controlling the computational media through the lens on the computer, that is enough.
  3. Can you think of real world applications that take advantage of communication between the physical and screen-based computational media?Answer: I remember my mom used to have a mini machine to measure blood pressure, so she connects the machine to the computer, and by  tying the blood pressure cloth to the arm, the computer would show the statistics about her blood pressure, and when she needs more air coming into the cloth, or less air getting out of the cloth, she would use the computer keyboard “up” and “down” to adjust. That is a very practical example of how the communication between the physical and the screen-based media. But I mean in real life there are many more games that involve physical and screen-based, I remember I used to play the Wii game and it is an archery game, so I have a remote controller that actually measures my movement.

* ****you can add these Q&A in your recitation documentation post that you need to post till next Thursday March 15.

Mandatory: watch the next videos

Explain with your own words how serial communication works and what type of data we can send or receive.
When do we use Serial.write and when Serial.print? Answer:
What’s the ASCII table and why we would use it?

Basically from the video, Serial.write sends bytes to the serial port while Serial.print sends ASCII characters so people can read easily. Arduino is sending out a text string which character encoded is a single byte, and those bytes have the decode here in the table. Decoding is also shown in the magnifying glass section. The weird characters we cannot understand, but ASCII table would translate the characters to the numbers. For example, the capital A is the value of 65. The character 1 is the value of 49.

 

 

Homework 1:
CODE FOR PROCESSING:

import processing.serial.*;

Serial myPort;
int valueFromArduino;
int number;

void setup() {

size(500, 500);
background(0);

printArray(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);
}

void draw() {
// to send a value to the Arduino
if (keyPressed) {
myPort.write(number);
} else {
myPort.write('L');
}
}

void keyPressed() {
number=(key-64);
}

CODE FOR ARDUINO:

int valueFromProcessing=0;
const int buzzerPin = 9;

void setup(){
Serial.begin(9600);
pinMode(buzzerPin, OUTPUT);

void loop(){
while(Serial.available()){
valueFromProcessing=Serial.read();
}
if (valueFromProcessing == 'L'){
noTone(buzzerPin);
}else{
tone(buzzerPin, valueFromProcessing*10);
Serial.println(valueFromProcessing);
}

delay(10); // ...for 1 sec
}


Homework 2 :
CODE FOR PROCESSING:

import processing.serial.*;

Serial myPort; //creates a variable: type of variable=Serial | name of variable=myPort
int valueFromArduino;

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

printArray(Serial.list());
myPort = new Serial(this, Serial.list()[5], 9600);
}

void draw() {
background(0);
while ( myPort.available() > 0) {
valueFromArduino = myPort.read();
}
println(valueFromArduino);

strokeWeight(valueFromArduino*0.01);
stroke(255);
fill(valueFromArduino,valueFromArduino,valueFromArduino);
pushMatrix();
translate(width/2,height/2);
rotate(radians(map(valueFromArduino,0,255,0,360)));
ellipse(100, 0, 100, 100);
popMatrix();
}



CODE FOR ARDUINO:

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

void loop() {
int sensorValue = analogRead(A0);
int valMapped = int(map(sensorValue,0,1023,0,255));
Serial.write(valMapped);
delay(100);
}