Final Blog Post-Xinran Fan(Azena)

INDIVIDUAL REFLECTION for final project

Finally, the whole interactive section have done. So happy this days with my great professor immi and the other classmates. And also express sincere thanks to the assistants, who always be interrupted by me. 😂 

My last project with my partner is about protect the marine animals from the plastic pollution. This is a two roles game, one its act just as a human while the other in the role of a fish, which try to show that only the human being and the animals sincerely cooperate with each other that we can save our both home-the earth. So we separate the screen into two parts but the plastic will all from the human art to the fish part to connect them. This game is facing to the people from all walks and all ages, but try to especially attract the attention from the young generation. We hope these game can let more people to pay attention to the plastic pollution and encourage them to use less plastic product and keep them away from the ocean or even participate in cleaning them from ocean.

PROJECT TITLE – YOUR NAME – YOUR INSTRUCTOR’S NAME:

Save me from plastic-Xinran Fan(Azena)-Inmi lee

CONCEPTION AND DESIGN:

My major idea is to make it immersive, because only an immersive experience that can totally bring the user into the role and , especially in the fish part, in other to let the user experience how difficult the lives of the marine animals if we keep on ignore the plastic pollution.

So at the first, we need a smooth control system. At the beginning we think that maybe we can use the handle to control. I’m so surprised to find the handle in the equipment room but , sadly, it is not working. Then after enjoining an example project ‘rain of the letter’ on class, we are suddenly hit on that we can make a ‘rain of the plastic’ to let the user catch it to avoid it from falling ton the ocean. We use a real-time image captured by camera as the background to give the user a more vivid experience. We choose the dark color to locate the motion of player, and we will offer dark glove to the users who play the human part. Once the user touch the plastic pieces and be discovered by the color function, the plastic pieces will disappear as the user pick up the trash and avoid them fall into the marine. By then , the human player can always move and have a more exciting experience. The whole body exercise will give the game more attractive power.

Second, the game should be smooth and exciting. At the first there is no extra trash in the ocean there the speed of the plastic piece is much slower than the final project. But during the user texting, we find out that if the human player can play int fluently that it is nothing the ‘fish’ can do. So we add the extra plastic to give more pleasure to the ‘fish’ and, of course, speed up the falling plastic pieces. This can make two players all focus on the game at the beginning. And we use the buttons to control the fish movements, that also increase the difficulties of the game.(live is never easy~~~)

Third, though this is a due game but the game still should be a whole. Instead of the competitive relationship often shows in the other due game, this game will emphasize the cooperate relationship. So although we separate the screen, but those plastic bottom are still keep on its track until drop into the deep part of water. 

We reject two ideas for technology, and I have to say I still feel so pity about them. The first its a candy box, in our plan we firstly decide to make a Moto-drawer. It is nearly finished, the wooden box, the pull-push equipment and the code are are ready, however, at the last night we find it is impossible to fix the motor on the box, so we have to give it up.Another its a water quality  changing system, if there is too much trash fell into the water, the quality of the water will go down and influence the moving speed of the fish. It is really a good idea for control the time of the game, however, this code must including the color of the water, the change of the speed and other more function, which is quite impossible for us to finish it in this limited of time.

FABRICATION AND PRODUCTION:

I can’t decide the most important step, for coding, structure are all very important part in one project. But accounting to my memory, the most nervous and exciting part is to keep the  value of all the eight button at the 3a.m. at the night before the presentation. I rebuilt all the button in a really negative motion. But this small details really show me that even a small button have to be really steady if you want to build a game which truly can offer fun.

In the user texting, I receive many good advice. Like using MAC to operate the game to improve the fluency, and taking down the black and white filter. Theses are all good advice which we have followed. We also receive the advice that ask us to choose a not so common color, but after discussion. we still choose the black but a more deep color. This is truly a mistakes because is too easy to have a user in deep black.That will be easy for hime to ‘catch’ the plastic pieces by clothes. And we also be advised that put a video instead a picture as the background, We followed it but it turns out that too colorful which confuse the user. 

CONCLUSIONS:

In my opinion, the interaction is the communication between two side, they can sense the input, progress, and give reaction. Like in this project, the players movement and the ‘plastic pieces’ in the computer has an immediately reaction. And whose more, I think a good interactive project can give the user an immersive feeling. Like in this game , player can get feedback from sound, light and even have to exercise the whole body. The last, I believe the real great interactive can even improve the communication of two living being, can be the human and human and also can the human and animal, not only a man-computer reaction.

Part of the code:

(the part when fish is alive & code that decide the winning and losing of this game)   
 
 if (ok==true) {

      for (int k=0; k<plasticList.size(); k++) {
        Plastic temp=plasticList.get(k);
        temp.display();
        temp.move();
      }

      if (fishY<=height/2+10) {
        fishY=height/2+10;
      }

      if (fishY>=height-40) {
        fishY=height-40;
      }

      if (fishX<=30) {
        fishX=30;
      }

      if (fishX>=width-30) {
        fishX=width-30;
      }

      if(sensorValues[0]==1){
      fishY-=fishSpeed;
      }

      if(sensorValues[1]==1){
      fishY+= fishSpeed;
      }

      if(sensorValues[2]==1){
      fishX-= fishSpeed;
      }

       if(sensorValues[3]==1){
      fishX+= fishSpeed;
      }

      image (img1, fishX, fishY, 100, 100);
    }

    for (int j=0; j<plasticList.size(); j++)//When fish touches plastic, it dies
    {
      Plastic nmsl=plasticList.get(j);
      float dis = sqrt((fishX-nmsl.x)*(fishX-nmsl.x)+(fishY-nmsl.y)*(fishY-nmsl.y))-nmsl.size*0.4;
      if (dis<=0) {
        ok = false;
      }
    }

    if (ok==false ) {//if a fish dies, game over, users lose the game
      image(img6, width/2, height/2, width, height);
   //   println(“show game over”);
    }

    if (key == ‘c’ && ok == false ) {//see the facts page
      image(img8, width/2, height/2, width, height);
     //  println(“show facts”);
    }

    if ( key==’s’ && ok==false ) {//restart after losing the game
      ok=true;
      win = 0;
      start = 0;
      int l = plasticList.size();
      for (int i = l-1; i>=0; i–) {
        plasticList.remove(i);
      }

      int r = fallingplastics.size();
      for (int s = r-1; s>=0; s–) {
        fallingplastics.remove(s);
      }
    
    }

    if (win == 1 ) {//this means when users win, the fish is alive whatsoever
      //myPort.write(‘1’);
      ok = true;
      fill(255, 34, 899);
      rect(0, 0, width, height);
      textSize(40);
      fill(376, 678, 222);
      text(“You Won!!Press ‘s’ to restart”, width/3, height*2/3);
      textSize(45);
      fill(255);
      text(“You won the game.”, width/2,height/5);
      textSize(30);
      text(“But there are countless fish that survive by chance like this”, width/2, height/4);
      text(“We play a crucial role in deciding their lives and deaths”,width/2,height/3);
      text(“Less Plastic, less disaster”, width/2, height/2);
    }

    if (fallingplastics.size()>=fallingplasticsWinning && ok==true) {//After a certain amount of time, users win
      win = 1;
      fill(255, 34, 899);
      rect(0, 0, width, height);
      textSize(40);
      fill(376, 678, 222);
      text(“You Won!!Press ‘s’ to restart”, width/3, height/2);
      fill(255);
      text(“Save our ocean!”, width/2, height/4);
      text(“Less Plastic, less disaster”, width/2, height/3);
    }

    if (keyPressed && key==’s’ && win==1) {//restart the game after winning
      ok = true;
      win = 0;
      start = 0;
      int l = plasticList.size();
      for (int i = l-1; i>=0; i–) {
        plasticList.remove(i);
      }

      int r = raindrops.size();
      for (int s = r-1; s>=0; s–) {
        raindrops.remove(s);
      }
    }
  }
}

 
 

class Plastic {
 
 
  float x,y;
  float size;
  float speedX;
  float speedY;
  Plastic(float startingX, float startingY){
    x=startingX;
    y=startingY;
    size=random(50,150);

    speedX=random(-10,10);
    speedY=random(1,15);
  }

    void display(){
      image(img2,x,y,size,size);
  }
 

  void move(){
    x+=speedX;
    y+=speedY;
    if(x<=0||x>=width){
      speedX=-speedX;
    }
   
    if(y<=height/2||y>=height){
      speedY=-speedY;
    }
   
  }
 
}

Recitation 10-Media Manipulation(Xinran Fan)

Recitation 

First I decide to begin with image which I think maybe a little bit easy, I firstly try to use blend. I download two pictures from internet, however, the code can not run for the size is not fitted, at the first I think is the size of the background picture and the former one and waste of a lot of time on it. Thank to an assistant, I find out it is the size of the canvas and the picture. However, the picture I choose is not so suit for such function which looks kind of blink.

PImage pollution = loadImage("pollution.jpg");
PImage turtle = loadImage("turtle.jpg");
size(1000,600);
pollution.resize(1000, 600);
turtle.resize(600, 600);
background(pollution);
//image(turtle,0,0);
blend(turtle, 200, 0, 500, 600,333, 0,300, 600, LIGHTEST);

Then I make a video including Pixels, audio and video;

import processing.sound.*;
import processing.video.*;
Movie myMovie;
SoundFile sound;
void setup() {
  size(480, 480);
   myMovie = new Movie(this, "ocean.mp4");
  sound = new SoundFile(this, "ocean.wav");
//define the state of the video
 myMovie.loop();
  sound.loop();
}
void draw() {
 
  myMovie.loop();
  if (myMovie.available()) {
    myMovie.read();
    myMovie.loadPixels();
//read the current frame of my video
int circleSize = 15;
  int w = myMovie.width;
  int h =myMovie.height;
  for (int y = 0; y < h; y+=circleSize){
    for (int x = 0; x < w; x+=circleSize) {
      int i =  x + y*w;
      fill( myMovie.pixels[i] );
      ellipse(x,y,circleSize,circleSize);
    }

  }
 
    myMovie.updatePixels();
//draw the current frame of the video
}

}

Recitation 9: Media Controller-Azena

RESITATION:

Sorry for post so late. I realized my post was missing at Sunday, while those days I could not spare time to make it up. This is my second time recitation 9, hope you can forgive my late.

Arduino:

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

}

void loop() {
int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);
int sensor3 = digitalRead(9);

// keep this format
Serial.print(sensor1);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
Serial.print(“,”);
Serial.print(sensor3);
Serial.println(); // add linefeed after sending the last sensor value

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

Processing:

import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 3;   
int[] sensorValues;     
PImage img;
float j=0;
float i=0;
float x=0;
float y=0;
float speedX=10;
float speedY=10;


void setup() {
  size(1000, 1000);
  background(0);
  setupSerial();
  img = loadImage("pumpkin.png");
}


void draw() {
  updateSerial();
  printArray(sensorValues);

 
  imageMode(CENTER);
float j=map(sensorValues[0],0,1023,0,500);
  float i=map(sensorValues[1],0,1023,0,10);
  
    
 
  background(0);
 
  
image(img, x, y, j*1.2, j*1.2);
filter(BLUR, i);

if (sensorValues[2]==0 ){
  x=300;
  y=300;
}else{
x=x+1.5*speedX;
y=y+0.8*speedY;
if(x>width||x<0){
  speedX=-speedX;
}
if(y>height||y<0){
  speedY=-speedY;
}
}

  //
}



void setupSerial() {
  printArray(Serial.list());
   myPort = new Serial(this, Serial.list()[ 3], 9600);
  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  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]);
        }
      }
    }
  }
}

I’d like to use two the potentiometers and a Botton to control the movements of image. At the first, I checked the code of the button online and have no idea how to move the digital Read(); to the processing, after asking help from assistant, I found out using sensorValue(); can transform all into processing;

Interaction Lab – Final Project: ESSAY-xinran fan

A. PROJECT TITLE

Save me from plastic

B. PROJECT STATEMENT OF PURPOSE *

To begin with, let me introduce you about the situation of plastic pollution we have today. According to research, the world generates at least 3.5 million tons of plastic and the other solid waste a day. Of all the plastic waste, only 9 percent is recycled, 12 percent is incinerated, ad 79 percent is buried in the landfills or dumped in the natural environments such as the ocean or countryside. Our project is for advocate everybody come to join the environmental protection, especially protect the marine animal from plastic pollution. We hope we can use the form of game to attract more people, especially the young generation to pay attention to the serious situation we face these days. The idea of making it a game is strongly encouraged by a completed game fought by my partner-Scott Snibbe’s  Interactive art: ARCTIC ICE (2008).While the basic idea of how this game should be is come from a report many years ago.

 Whales- the hugest animal in our world, is dead from 80 tons plastic trash it eats. I was totally astonished by the countless plastic trash flow in the waves. Their colorful appearances have nothing about hilarity but show the hell of the marine animal. This is why we design the game as a fish elude the plastic trash. Then I heard of the Beach clean upactivity which come into popular around the world, We was deeply inspired by it. Suddenly, we realize that protect the marine environment is not only for marine animal, but also for us, for all lives in the earth. And the protection could not complete if we don’t work with all our heart to cooperate with our animal friend. So, we decide to make our game a double game, but the players are not competed with each other, instead, the two players need to cooperate closely. Another role is play as a human, he needs to pick up the trash falling from the sky. All in all, our project is going to call out more people to focus on and make effort to protect the marine animal. Our target population is everyone, especially the young generation. We hope after playing this game, people can realize the importance of reduce the plastic pollution and it is time to take an action.

  1. PROJECT PLAN *

First of all, we project our computer to a larger screen. As we introduced before, this is a double player game. So, we will separate the screen into two part, each side for a player. The top part is for role of ‘person’, he is running on the board of a big steamship, and the bottom of the image is for the ‘fish’, which is swimming around to avoid the attack of plastic trash. The motion of the ‘person’ is controlled by two buttons-one to left and the other to right. The motion of the fish is controlled by the handles, which can control the movements of the fish smoothly.

The ‘person’ needs to run fast to pick every falling plastic trash, if missing one, the trash will fall into the sea, and all the trash in the sea will continually attack the ‘fish’. And to avid the possibility that the ‘person’ plays too well to make the ‘fish’ boring, there exists some plastic trash right at the beginning. What’s the plastic trash can also pollute the quality of the water. The color of the water will change according to the quality of the water, and the speed of the ‘fish’s’ movements. So, it will be harder for it to avoid attack of the trash.

If the ‘fish’ is hit by the trash, game is over and relieve sadly music and plays a video that show the death of the fish, while if the fish can insist for two minutes, players are win and will relieve hilarity music and ‘hurray’. What’s more a piece of audio will be played; a sign will appear that instructs the players to the direction of a candy box. However, before receiving the candy, the player still needs to accomplish an extra question ‘about how many percentages of plastic waste is thrown into the ocean and landfills?’ There are four buttons which means different answers-10%,30%,50%,80%. If the player gives the right answer, the two servos on the candy box will move and push the candy out. All the candy papers have a tip about how to reduce the plastic pollution. In addition, once the ‘person’ success in picking one trash, the green light on the left will blink, but if he fails, the red light will blink.

First the tense rhythm and the excitements can offer fun for the players and also be able to practice the cooperative ability. During the game, players can gain more knowledge about the environmental protection, and have a deeper awareness of the importance of reduce the plastic pollution. Our game can no matter satisfy the need of searching for fun and also inspiring them to take action to protect the marine environment.

We will begin our work next week, in that week we will complete the circuit and code of the small candy device, and the code of the background image and the ‘person’ part of the game. The second week we will finish all code and the main device, the last week is for try and adjust the device.

D. CONTEXT AND SIGNIFICANCE *

I researched the program-Scott Snibbe’s “Arctic Ice”, which strongly attract me.

“Arctic Ice is an interactive immersive exhibit on global warming that tells the complicated story of feedback loops in melting arctic ice that are a major component of climate change.”

In this game, people personally join in the protection, the ice is always melting, and the people’s wave can immediately slow it down. This real-time reaction can let the player have a vivid experience about the environmental protection. And this tech emphasizes how serious situation the polar bear face- their habitat is shrinking every minute to the players and advocate that there is no time to wait.

First this project tells us to make a highly interactive device and build a tense atmosphere to push the player into the game. And the role of the person is just like the player in the research, personally experience how to protect the marine environment while fish is just like that polar bear, as a victim he can feel how the marine lives are suffer in the plastic pollution.

Interaction, in a simple words is just the communication.In the introduction to Physical Computing written by Igoe and O’sullivan, the interaction is “an interactive process that including listening, thinking and speaking  two or more actors”. In a more technological words, it is INPUT, PROCESSING, OUTPUT. So, the most important part of a success interactive project is three completed step and an obvious bidirectional communication.

In my project, the operation on the handle and button by the players are the ‘input’, the processing in the computer and the loop of conditional function code are the ‘processing’, the movements of the characters, and light blinking and the audio are all the ‘output’. In the little rewarding device, the push on which button is the ‘input’ the processing is also on the computer while the movements on the servos are the ‘output’.

The target group is the young generation, because they often have fewer knowledge of environmental protection, and easier be attracted by the game. What’s more, they often have more energy in contributing to environmental protection. And they are the future of the world, their thoughts are most important.

After finishing it, first, I will complete this device furthermore, and add more function to it to let it attract people from different age, different culture. These subsequent projects will base on the core of this project-let people know more about the serious environmental situation we face today, and the importance of the environmental protection. Getting away of this project, I will explore more on how to use the interactive in social activities. All in all, we are going to contract a better world, a better society, and my goal is using the interactive tech to realize it, advocate more people to take part in it. 

     

Recitation 8 Serial Communication (Xinran Fan)

This recitation’s aim is to learn to connect the Arduino and the processing, which can let us interact with animation. From this class , we can primarily control the image in the computer  by  the outside circuit.

Step 1 Make an ellipse with potentiometers:

Actually the beginning of the story is full of the problems. I thought the first step is just what we down at the class at the first glance.’It just a piece of cake!’ I tacked to myself. But the truth is, I only finished the first step at the end of the recitation. But this is not because of the code, it just takes me a little time to use the sensor value[0] and sensorvalue[1] to take the place of the x  and y of the ellipse();in the model code A to P.Then I was stuck by the range of the potentiometers. No matter how hard I tried, my circle ⭕️ only move in a very narrow place. I taken the advice from the assistants to test it, and figure out the range of my potentiometers only from 465 to 654. I change the potentiometers but it makes no difference. Once the professor pressed hard, its range fixed for a seconds. I was so exciting, considered we solve the problem, but soon the range change again. After test it on the recitation and after the class, I finally make sure that the problem is on the Arduino. Everything goes well after that.

Step 2 Make a line etch-a-sketch:

special code:
processing
float px=0;
float py=0;
float x=0;
float y=0;
 
……
 
 x=map(sensorValues[0],0,1023,0,500);
   y=map(sensorValues[1],0,1023,0,500);
 
  stroke(x,225,y);
strokeWeight(12);
  line(px,py,x,y);
  px=x;
  py=y;
Then come to the next class, at first I totally can not understand the logic of this code”How to make the new X=previous X?’I even try to use array functions. But another the help of my classmate, I figure out the secret of it is the order. This practice really inspire me a lot.

Make an instrument:

add code
Processing:
if (values[1] == 1) {
float x = map(values[0], 0, 500, 31, 4978);
  //float y = map(values[1], 0, 500, 31, 4978);
  tone(9, x);
    } else {
      noTone(9);
    }
 
Arduino:
 values[0]=mouseX;
  if (mousePressed) {
    values[1]=1;
  } else {
    values[1]=0;
  }
To the last one, I know it is time to change the model code to P to A, but I really cannot understand of that code. Even now, though I ask many assistants for this, I still confused about the complex part of that code. At the first I used the mouseY to control the duration, but when I try to see the mousePressed, I find the y is useless, so I cancel it. Then how to use the mouse in the processing to control the action in the Arduino which really trapped me, I was surprised by the idea that set a values[1], and realize that the values[1]==1 need to equal.