Midterm Project – The Minion is Watching You

Date: Thursday, 30 March 2017

Instructor: J.H. Moon

Documented by: Junan (Owen) Zhang

Midterm Project: The Minion is Watching You

An 180 degree sonar with the outlook of a Minion that can sense the location of the object and show it visually on the computer screen.

Description:

The sonar itself is composed of three parts, namely a servo that makes it rotate in 180 degree, an ultrasonic sensor that senses the distance to objects and an LED light that lights up when the object gets close. On the screen, there is a radar that sweeps from the left to the right. When there is an object coming close, a red circle will be shown on the radar screen and the location of the red circle as well as texts and LED light on the head will change accordingly with the value from the sensor.

Material Used: Servo, Arduino Uno, LED*1, Ultrasonic Distance Sensor, Breadboard & Processing

Demo of project:

IMG_2723

Conceptual Development

I got the idea when I was playing a parkour game of the Minions. Inspired by the appearance of the minions, I thought of the ultrasonic sensor. If I imagine that I add two “eyes” on the sensor, they will look so similar. This is the moment that I decide the general theme of my project and the ultrasonic sensor will play a major role. Then I recall that in movies, the user interface of a sonar is so cool and I’d like to do just the same. Therefore, I decide that not only the appearance of the sensor should be designed a cute one, but also the user interface of the sonar must look pretty cool.

This is my first general sketch of my project. The final version is similar to that but I did make a few changes for some technical and artistic reasons.IMG_2740

 

After I finish the appearance sketch, I then work on a logic sketch that shows the connection between all those components. This mainly shows how will the things on processing react to the change of value from Arduino. In this sketch, I’ve made a mistake that I wanted to send two values at the same time, which is obviously not allowed in serial communication.

IMG_2741

 

As for its function, I’d like to use it as an interesting device to monitor our surroundings when we are working on the computer. A visual display on the screen can prevent us from being distracted by surrounding. It can also be installed at the door of my dorm so that the cute minion can send a friendly message to whoever is visiting while I can also get notified when guests are coming.

Technical Development

I find that it is always easy to imagine something in the mind and it becomes tricky when I started to work on it. I would like to share some of the obstacles that I’ve encountered in the development process.

  • Rotation

The rotation is important my project because I need to make the servo and the sweeper on my screen work exactly simultaneously. Actually at first, just like the military radar, the sweeper on the screen rotates continuously. In order to match that, I also want the servo to keep rotating. However, Moon told me that since I would like to attach servo to distance sensor, I should consider the cables of them. To be more specific, the cables will twine with each other if the serco keeps rotating. So I change my plan to a 180 degree sonar, which can still sense a wide range and prevent the problem of cables. Besides, another problem in terms of rotation is how to code rotation of sweeper in Processing. Initially, I put frameCount in rotation() to make it sweep around. However, since I changed my plan to 180 degree that runs back and forth , I need to create another variable that controls the angle of rotation. Once the angle reaches 180, the rotation will reverse. So I use three if() functions to control the change of angle. The code is shown below. I think there might be a better solution than mine. I am willing to improve the coding in the future.

  • Serial Communication

Serial communication is crucial to send data from Arduino to Processing. As Moon showed us in the class, serial communication is one-directional and can only send data ranging from 0 to 255. When I first connect the sensor with processing, I expect the values in processing to be the value of distance however I find the data I received is weird. I asked Moon for help and he told me that I was writing too many values and the value should be within 0 to 255. I need to delete the values I don’t need and stop sending values that are greater than 255. To achieve this, Moon coded an if() function, saying if (value<=255) {serial.write(value)}. This code is extremely useful that I can reuse them in future projects. But now I still have question if Arduino and Processing can communicate in both ways. If possible, the projects may be more interactive.

  • Appearance and decoration

As I mention in the reflection for stupid pet trick, I would like to work more on my projects’ appearance. Although I have planned to make the device look cute and the radar display look cool and serious. However, I talk to Tyler about my plan and he suggested me to consider the unity of design. It would also be a good idea to add some “Minions” elements onto the display. For the appearance, I watched some online tutorials on how to draw the Minions. I’ve completed a few sketches and finally put the best one on my project. It’s really happy to see many of my classmates appreciate the appearance of what I’ve been working on.

Lessons Learned

After all the conceptional and technical development stage, my project still have some problems. First, the sensor is not working so well as I’ve expected. As Antonius has commented, one of the reasons for that might be the servo keeps the device rotating and the sensor can’t capture its changeable surrounding. Also, the structure is not stable enough. Only tape and glue is not enough. Probably nail and wood board can be an option.

Therefore, taking the advice during my presentation, I would like to improve my project in the following aspects.

  • Strengthen the structure by using harder material. Also a stronger foundation is needed.
  • Change the speed of rotation and see in what condition the sensor works the best.
  • Add more ellipses on the display so that it can sense more than one object. When there is another object appearing in the different angle, another ellipse would be drawn on the canvas. So we can keep track of all the objects in the surrounding.
  • Add start and stop feature on Arduino by a button. So the minion can “have some rest” when I don’t need it working. To do that, I also need to set the Arduino to send the value of “0”, and tell processing to stop working.
  • The “Bello” and “A-aaaa!” text below is hard to notice. I can change it into short minions animation by putting gifs and short videos onto processing.

Also as Antonius has commented, I need a clear implementation of my project. Since its appearance is cute and friendly, it can be regarded as a babysitting tool for mothers. Next time, I should consider this question in my conceptual development stage in advance.

In general, in the class presentation, the projects of my classmates really shock me. The 3D universe, the adventurous games and scary toy are so amazing. One of the most important lessons I’ve learned now is to challenge the limit of myself and dare to think big even though we haven’t learned that yet. After all, we can always ask the fellows for help. I’ll challenge myself more when planning the final project and I hope I can do something that can amaze others as what my classmates do this time. Thanks again for everyone that helps me during the whole process.

Code

Arduino

Processing

 

 

Midterm Project- Make Lehman Happy

Date: 31 March 2017

Instructor: Moon

Partner: Xuehan (Shirley) Zhao

Title: Make Lehman Happy! — A fun/funny game that helps raise people’s awareness of NYU Shanghai values and policies.

Description: In this game, players should first judge the statement on each bubble–whether it is consistent with NYU polices or values or not. If the play click the “right” bubble, i.e. the statement is true, Prof. Jeffery Lehman will be happy and his photo will go up. Once the photo reaches the tope, the “Lehman proud of you” video will play showing that he is quite satisfied.  On the contrary, if you keep clicking on the wrong one, Lehman will cry.

Demo:

Continue reading

Midterm Project-Plant Nanny (Moon)

Date: Mar 31, 2017
Instructor: Professor Moon
Partner:
 Cyndi

Elevator Pitch:  An interactive installation that helps people to water plants when they are traveling outside.

Description: Once the plant needs water, the owner will get a message from Plant Nanny on his/her phone. When the owner press a button, the Plant Nanny at home will automatically water the plant, ensuring the soil stay at a specific humidity level.

Demo: 

 

IMA Midterm (If the video doesn’t work, please click the link)

 

Conceptual Development: 

A. Ideation

Our idea is actually from real life experience. Our RA is Indonesian, so she asks me to take care of her plant every time she goes back to have a vacation. Not everyone can get help from others anytime they want. To solve this problem, we compose this project. And the plant nanny is for people who can’t take care of their plant when traveling around.

To find a solution to control the Arduino and also get the information on the plant a long distance away from home, we choose email/twitter and remote to support the project.

Ideation

B. Research

We spent a lot of time on figuring out how to send a twitter or email by processing. The fellow Richard offered a lot of resources for us to better understand the whole process.

Screen Shot 2017-03-29 at 2.24.54 AM

Screen Shot 2017-03-29 at 2.30.35 AM

Screen Shot 2017-03-29 at 2.46.13 AM

Technical Development:

Since the twitter/email is too advanced right now for us, so we decide to put it into our final project. And we change the remote into an interface on the computer so that people can actually have a visual experience (a happy face or SOS) when they press the button. That is to say, the main difficulties of this project is relay and the interface design.

A.Relay

A big problem here is that the valve we use needs more power than the Arduino offers. Thanks to Prof. Moon, we manage to figure out how the relay works.

File_000

With the relay, we can use 5V from the Arduino to make the switch off in the relay so that the other circuit is able to work.

B. Mouse pressed

Another problem is that we can only make the mouse pressed area into a square by control the value of x,y. However, the ideal effect is to make this area into a circle which in this case is the plant’s face. We turn to Moon for help and he introduces us the function called distance. And with this function, we can make the area a circle.

File_000 copy

Lessons Learned:

A. Boolean

My understanding towards boolean is deepened tremendously after doing this project. I used to think boolean is useful only because it can be used in the logic gate (NOT,AND,OR). However, I find it can actually function as a switch so that a state can last for a long time. For instance, we want a text “SOS” appears for a long time after we press the mouse instead of appearing for just one second. And Prof.Antonius points out that we can use boolean to reach that effect.

Besides, boolean enables us to change back and forth from two states. By using rain!=rain, we can actually turn on and turn off the valve as many times as we like.

B.Function

I think one of the differences between the beginners’ codes with an expert’s is that the latter one is always neat and tidy. Before being reviewed by Moon, our codes were disorganized and hard to read. However, Moon suggests us to use functions. Admittedly, our codes become much logical and understandable afterward. And also it is easier for us to reuse the function for probably the second or the third time. For instance, we first draw the face of the plant within the “void draw()” and then we make a new function called “drawface()” and call it in the “void draw()” to get the same effect.

Further Development:

After the presentation, we get a lot of advice from others. The potentials of this project are as followed:

A. Twitter/Email/APP

Though sending twitter or email is quite complex in processing because it is actually trying to transfer python into Java. However, it is still possible to use it into our project as the final project. And another interesting possibility is that we can develop an App instead of sending the messages through social media to make the project more like a product.

B. Recycle system

To prevent extra water being wasted, we may definitely create a recycle system to reuse the water leaking out from the bottom of the plant. Basically, our idea is to put a water tank below the plant so that everytime the water leak out, it goes directly to the tank.

C. Timeout

Instead of reminding people to press the button, we may simply design a timeout system. So every three hours, the machine will automatically check the humidity and water the plant if it is below a certain value. That is to say, people can ensure the plant grow well without even thinking about it.

//Processing

import processing.serial.*;
//if (mousePressed) {
// myPort.write('H');
//}// else {
// myPort.write('L');
//}//

Serial myPort;
int valueFromArduino;
float[] x = new float[100];
float[] y=new float[100];
float[] size=new float[100];
float[] speed=new float[100];
boolean rain;
boolean SOS;

void setup() {
  size(600, 500);


  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[ 1 ], 9600);
  int numOfCircles = x. length;
  for (int i=0; i<100; i++) {
    x[i]= random(width);
    y[i]= random(height);
    size[i] =random(5, 10);
    speed[i]=random(0.5, 2.5);
  }
}


void draw() {

  // to read the value from the Arduino
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);
  // to clear the frame
  background(255);

  drawBackground();
  drawPlant();
  if (valueFromArduino >192 ) {
    SOS = false;
  } else {
    SOS = true;
  }
  if (valueFromArduino>195){
    rain = false;
  }
  if (rain == true) {
    drawRain();
  }
  if (SOS == false) {
    drawFace();
    
  } else {
    drawSOS();
    
  }

  if (rain == true) {
    myPort.write('H');
  } else {
    myPort.write('L');
    drawFace();
  }
}



void mousePressed() {
  /*
  if (mouseX > 185 && mouseX < 415 && ---mouseY ----) {
   rain = !rain;
   }
   */
  // dist(x1,y1, x2,y2);

  float distance = dist(width/2, height/2, mouseX, mouseY);
  if (distance < 100) {
    rain = !rain;
    //SOS = !SOS;
  }
}

void drawFace() {
  //left eye
  pushStyle();
  stroke(162, 84, 45);
  fill(162, 84, 45);
  ellipse(263, 265, 23, 23);

  //right eye
  ellipse(337, 265, 23, 23);
  popStyle();
}

void drawSOS() {
  pushStyle();
  textSize(50);
  fill(255, 0, 0);
  text("SOS!!!", 230, 275);
  text("Click My Head!!!", 120, 320);
  popStyle();
}

void drawBackground() {
  pushStyle();
  stroke(162, 82, 45);
  strokeWeight(3);
  fill(250, 250, 210);
  rect(0, 348, 600, 320);
  fill(240, 255, 240);
  rect(0, 0, 230, 348);
  fill(240, 248, 255);
  rect(370, 0, 230, 348);
  fill(230, 230, 250);
  rect(230, 0, 140, 348);
  popStyle();
}


void drawPlant() {
  pushStyle();
  //head
  fill(255);
  stroke(162, 82, 45);
  strokeWeight(3);
  ellipse(width/2, 270, 230, 200);

  //leaves
  line(300, 150, 300, 170);
  fill(50, 205, 50);
  ellipse(275, 150, 47, 15);
  ellipse(325, 150, 47, 15);


  //nose
  noFill();
  arc(295, 277, 15, 15, 0, PI);
  arc(310, 277, 15, 15, 0, PI);

  //left face
  noStroke();
  fill(255, 228, 225, 100);
  ellipse(248, 280, 30, 12);

  //right face
  noStroke();
  fill(255, 228, 225, 100);
  ellipse(352, 280, 30, 12);

  //left arm
  pushMatrix();
  translate(235, 362);
  rotate(map(mouseX, 0, 600, 0, PI));
  stroke(162, 82, 45);
  fill(255);
  arc(0, 0, 120, 40, PI/8, 5*PI/2);
  popMatrix();

  //right arm
  pushMatrix();
  translate(365, 362);
  //rotate(PI/3);
  //rotate(mouseX/3);
  rotate(map(mouseX, 0, 600, 0, -PI));

  fill(255);
  //arc(365,362,120,40,PI/8,5*PI/2);
  arc(0, 0, 120, 40, PI/8, 5*PI/2);
  popMatrix();

  popStyle();
}


void drawRain() {
  pushStyle();
  noStroke();
  fill(0, 128, 255);
  for (int i=0; i<100; i++) {
    y[i]=y[i]+speed[i];//y[i]++,y{i}+=speed[i]
    if (y[i]>height) {  
      y[i]=0;
    }
    ellipse(x[i], y[i], size[i], size[i]);
  }
  popStyle();
}


//Arduino
int relayPin = 12;
int ledPin = 11;
int valueP = 0;

void setup() {
  Serial.begin(9600);
  pinMode(relayPin, OUTPUT);
  pinMode(ledPin, OUTPUT);
}


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueP = Serial.read();
  }

  // use that value
  if (valueP == 'H') {
    digitalWrite(ledPin, HIGH);
    digitalWrite(relayPin, LOW); // opposite!
  } else {
    digitalWrite(ledPin, LOW);
    digitalWrite(relayPin, HIGH); // opposite!
  }


  int sensorValue = analogRead(A0); // 0 - 1023
  //Serial.println(sensorValue);
  Serial.write(sensorValue/4);  // 0 - 255


  //digitalWrite(relayPin, HIGH);
  








  delay(10);
}

Bug Splat – Interaction Lab Midterm Documentation

Date: 03/30/17

Instructor: Marcela

Materials Used:

  • Arduino
  • Breadboard
  • Wires
  • 3x Push buttons
  • 1x LED
  • 3x 10k resistors
  • 1x 220R resistor

For my midterm, I decided to create an interactive, reaction based game. I also wanted to create a more physically involved game than just with a one dimensional input. I ended up with a game called “bug splat”. It is a game involving three buttons or “bugs”. A random bug will appear on the computer screen, and the player must react by hitting the correct button in order to win. The three bugs I chose for this project were a fly, a spider, and a cockroach.

cockroach fly spider

The users for my project would be children, athletes, and students but really can be used by anyone. The project can improve someone’s reaction time, help practice for killing real bugs, and also help if someone is bored.

The inspiration for my project was an annoying fly in my kitchen last week. That, paired along with the game Wack-A-Mole, and another game I saw on a Vimeo video of a game where two people had helmets with buttons on top, and the aim was to hit the other person’s button.

I began by thinking of a way to create “button bugs”. I wanted the game to be more physical so I wanted to space the three button bugs out around the player. To do this, I could not just use the breadboard, so I had to solder longer wires, resistors, and buttons together.

 Video of the buttons soldered to longer wires.

 

After I had soldered the button, to the resistor, to a longer wire and repeated the process three times for three buttons, I needed to create a platform for the buttons. They had to be bigger, and they had to be able to take a hit by a newspaper or perhaps a flip-flop. So I created larger buttons out of cardboard. I chose a harder more solid cardboard for the bottom base, and then a softer cardboard for the upper side.

Enlarged Cardboard Buttons

IMG_20170330_142553

Inside of the Button

IMG_20170330_142548

The things I learned from the project were that I really improved my soldering skills. I went from burning the rubber on the wires every time to actually creating nice round shapes of solder for my wires. I also learned how to use serial communication to communicate between Arduino and Processing.

What I hope to improve on for the project is the code. It is still very buggy and the game only works occasionally. I would also like to improve the aesthetic look of the physical aspect of the game.

After presenting, I received a lot of great suggestions and ideas for my project. One the suggestions I particularly liked was changing the buttons to vibration sensors. That way I wouldn’t have to worry about the button breaking if it was hit too hard, like a real bug would. And also I feel like it would have been more authentic. Another great suggestion I received was to make the game more directional. Instead of just displaying a bug on the screen and having the user hit the correct button, perhaps the button would appear in different areas of the screen, and the user would then have to react and hit the correct button accordingly. I will definitely take these suggestions into consideration for my final project.

const int buttonPin1 = 5;   
const int buttonPin2 = 6;
const int buttonPin3 = 7; 

int buttonState1 = 0;     // variable for reading the pushbutton status
int buttonState2 = 0;
int buttonState3 = 0;
int bug = 0;


void setup() {
  pinMode(buttonPin1, INPUT);
  pinMode(buttonPin2, INPUT);
  pinMode(buttonPin3, INPUT);
  
  Serial.begin(9600);

  
}

void loop() {

  bug = random(1,4);
  Serial.print(bug);
  delay(100);
  
 
  buttonState1 = digitalRead(buttonPin1);
  buttonState2 = digitalRead(buttonPin2);
  buttonState3 = digitalRead(buttonPin3);
  
if (bug == 1) {
Serial.write(1); //display a fly

for(int i; i<i+3; i++)  {
  if (buttonState1 == HIGH) {
    Serial.write(2); //Player wins
    delay(3000);
    break;
  }
  delay(1000);
  }
  Serial.write(7); //display losing screen
  delay(3000);
}
 bug = random(1,4);

if (bug == 2) {
  Serial.write(3); //display a spider

for(int i; i<i+3; i++)  {
  if (buttonState2 == HIGH) {
    Serial.write(4); //Player wins
    delay(3000);
    break;
  }
  delay(1000);
  }
  Serial.write(7); //display losing screen
  delay(3000);
}

 bug = random(1,4);
if (bug == 3) {
  Serial.write(5); //display a cockroach
  for(int i; i<i+3; i++)  {
    if (buttonState3 == HIGH) {
      Serial.write(6); //Player wins
      delay(3000);
      break;
    }
    delay(1000);
  }
  Serial.write(7); //display losing screen
  delay(3000);
}

}

--------------------------------- PROCESSING CODE BELOW-------------------------------------

import processing.serial.*;


Serial myPort;
int valueFromArduino;
  int p1 = 0;
  int p2 = 0;
  int turn = 1;

void setup() {
  size(600, 600);
  background(0);
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[3], 9600);
}


void draw() {
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
    println( valueFromArduino);
  }
  
  // Button is pressed: valueFromArduino = 1
  // Button is NOT pressed: valueFromArduino =0
 
 if (valueFromArduino == 1)  {
 //display a fly
 PImage fly;
 fly = loadImage("fly.png");
 background(fly);
 }
 if (valueFromArduino == 3)  {
 //display a spider
 PImage spider;
 spider = loadImage("spider.png");
 background(spider);
 }
 if (valueFromArduino == 5)  {
 //display a cockroach
 PImage cockroach;
 cockroach = loadImage("cockroach.png");
 background(cockroach);
 }
if (valueFromArduino == 2)  {
 PImage win;
 win = loadImage("win.png");
 background(win);
}
if (valueFromArduino == 4)  {
 PImage win;
 win = loadImage("win.png");
 background(win);
}
if (valueFromArduino == 6)  {
 PImage win;
 win = loadImage("win.png");
 background(win);
}
if (valueFromArduino == 7)  {
  PImage lose;
  lose = loadImage("lose.png");
  background(lose);
}
}



Week 7: Film Project Storyboarding (Chen)

Group Members: Maike, Ben, Ying

For our Film Project, the three of us wanted create a kind of “choose your own” spring break experience, where the viewer can choose between three different types of holidays. Since we are all going on very different spring break adventures, we wanted the viewer to be able to “join us” on our spring breaks for a luxury/resort vacation, week of voluntourism, or homestay. This didn’t involve much storyboarding, because much of the film will depend on our travels.

commlab1

Whether playing beach volleyball and doing a bar crawl with Ben in the Philippines, teaching a classroom with Ying in Hunan, or making dinners and catching up with friends with me in Beijing, we want to give the viewer the opportunity to experience “a day in the life”, with at least four moments throughout the day where they can choose between two activities.

Midterm Project – Dodgeplane

Professor: Marcela

Partner: Amber Wang

  1. Motivation

What motivated us to do the midterm project was to solve a daily problem of who should go down and pick the food delivery. Everytime I ordered food on Elema or Sherpas with my friends, nobody actually wants to go to pick the food delivery. In order to solve this life problem, Amber and I wanted to design a game which not only could involve two players in competeing against each other, but also could solve the problem in an entertaining way. Most importantly, it should take two players as short of timeas possible to play the game, in case of keeping the deliverman waiting for a long time.

2. Reference

Generally, we referred to two simple video games. The first one if a game called PlaneWar on Wechat. In this game, player (the plane at the botton of the screen) is required to shoot other enemy planes. The more planes you can shoot, the higher grade you would get. At the same time, you should avoid crashing other planes as well. It is an interesting game for challenging a player’s agility. Here is a picture about the PlaneWar.

屏幕快照 2017-03-31 下午4.32.23

The other reference is a game named Block Run on 4399.com.  As you can see from the picture following, this game is designed for the player (the red column) to dodge other grey columns. There are several chances for you to stay alive when failing to dodge greay columns.

屏幕快照 2017-03-31 下午4.42.53

3. Idea

With the help of two references, we decided to make a game called Dodgeplane. Before coding, we first stretched the idea on a paper. There are two players, which are attacker and defender. The screen would be seperated as two parts. The defender is on the upper part and the attacker is on the lower part. Both of them can move up, down, left and right on their own part. The attacker can send missiles to shoot the defender. In 60 seconds, if missiles hit the defender, the attacker would win. Otherwise, if the defender can sucessfully dodge missiles, the defender would win. Players can use “w”, “a”, “s”, “d” to make the defender move up, left, down, right and they can use the keyboard of UP, LEFT, DOWN, RIGHT to control the movement of the attacker. However, we decided to use joysticks to control the movement of planes at last. Comparing with crowding in front of a computer, joystickes would make the game more interactive and interesting.

IMG_5577

4. Coding

In order to improve work efficiency, I was in charged of the Processing part and Amber focued on the Arduino part (which mainly includes attaching joysticks to the game).

In the begining, I drew two ellispses to represent two airplanes. Amber would photoshop two pictures of planes to replace the ellipses when I finished coding. With the help of Jiwon,  I started with coding the defender and the attacker. Since planes can move in four directions, I set x, y of the defender and the attacker as variables. I used keyPressed function so that I could use keyboards to control the planes. I also print the keyCode I used so that I could find clearly whether the keyPressed function worked.

The most challenging part for me was to code the missile. There is no restrictive condition for the attacker to send missiles, and the player can send as many missiles as he  wants. The player could send missiles through pushing the space bar. Jiwon taugt how to use boolean to set the missiles. There were two variables, boolean shoot and boolean setStart. Initially, they are equal to “false”. When the player pushed space bar, they are equal to “true”. Under the circumstance of “true”, a missile would move forward and its position would go back to the initial position when it is out of the screen. However, in this way, the attacker cannot constantly send missiles. If the attacker send missiles before former ones reach the end of the screen, the former would turn back to the starting position. Here is a video about the problem of missiles.

Professor Antonius helped me to improve the code of missiles by adding an important part–resetting the missile. That is to say, only when a missile reaches the end of the screen, can the position of the missile be reset. As a result, the attacker cannot send another missile until the former one reaches the end of the screen. Missiles that has already been sent will keeping moving and would not be drove back by pushing the space bar.  Here is a video about the imoroved version of missiles.

It is after I took the class of Arraylist that I truly figured out how to code the missiles. Marcela’s examples helped me a lot to learn Arraylist. There were 14 examples from Array to Arraylist, from drawing random line to drawing random circles, from random fixed circles to circles with random speed. It took me a whole afternoon to understand the examples. By changing some values of codes, I managed to figure out what exactly every function works. Moreover, Marcela recommended a Youtube Tutorial which educative as well as funny. Although some coding in the video is outdated, the general logic remains unchanged.

For the missiles, I used Arraylist, the class function including display function and move function. The starting position of missile is the same as that of the attacker so that missiles can fly away from where the attacker is. In the move function, the x of missiles would not change while the y of missiles would decreases at a speed of 2. When referring to examples of Arraylist, I used mousePressed to add new missiles. But I found that once I pressed the mouse, there would be missiles continuously sent out even if I released the mouse button. Therefore, I used mouseClicked instead, which means, the moment you click the mouse, a missile would be sent out. By decreasing the size of missiles, I managed to control the amount of missiles I want to send accurately.

Another tricky part was to set that when a missile hits the defender, the attacker will win the game is over. I set time as a variable and the time would decrease by subtracting mills. When the difference between y2 (y of the defender) and y (y of the missile) is 0, the screen will show a picture that with “YOU LOSE” on the upper side and “YOU WIN” on the lower side. However, since I used Arraylist as a function to code missiles, the y of missiles would keep decreasing. That is to say, there is only a moment that y2-y=0. And it is so fast that the picture cannot showed on the screen. With the help of Avan, I used dist, the absolute value of distance, to express the distance between the defender and the missile.

Thanks to the “Tree Model” Professor Antonius taught me, I could organize my codes clearly. For example, I would first write p1.move(); as a title in the draw function. And under a new Tab “Move”, I would add the move function of plane 1 separately. Organizing code in this way could effectively helps me to avoid missing } and makes it more convenient for me to improve my codes.

5. Physical Surrounding

We tried to improve the physical surrounding of the game to make it more interactive. Since it is not comfortable to hold the joysticks we found in lab, we attached two rubber hemispheres to them. The rubber hemispheres could fit into people’s hands very well. this way, players would find it easier and more convenient to use the joysticks. IMG_5572

IMG_5575

6. Dodgeplane is Born!

7. Improvement

After we finished out project, some of my classmates tried the game. Most of them found that it is an unfair game. Since there is no limit to the amount of missiles, attacker can easily kill the defender. Lack of time to improve the project, I merely shortened the time the game lasts to 20 seconds. So far, there has been no player of defender that could hold on more than 15 seconds.  If we had more time, we would have improved the project by limiting the missiles the attacker can send at one time. For example, the attacker can only send five missiles at one time. After the fifth missile reaches the end of the screen, can the attacker send another round of missiles.

8. Reflection

I really appreciate the help of professors and teaching fellow. I would not have made Dodgeplane come into being without their assistance. The midterm project was a valuable opportunity for me to integrate codes I learned before and use them in a practical way. At the same time, I earned a strong sense of achievement from the project. In this process, I sometimes felt very depressive because of failing to write the codes as I expected. Thanks to the support of Marcela, I gradually understand that the process of learning is more important than a final result. The purpose is not only to make a game, but also to learn how to code, how to interact and enjoying the process of coding.

//Processing
int time;
Plane1 p1;
Plane2 p2;
import processing.serial.*;
String myString = null;
Serial myPort;
int NUM_OF_VALUES = 5;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; 
PImage plane1, plane2, plane1win, plane2win;
int x1, y1; //plane1
int x2, y2; //plane2
ArrayList<Ball> balls = new ArrayList<Ball>();

void setup() {
  size(800, 700);
  //printArray(Serial.list());
  time = 20; 
  plane1 = loadImage("plane1.png");
  plane2 = loadImage("plane2.png");
  plane1win = loadImage("lose-win.png");
  plane2win =  loadImage("win-lose.png");
  setupSerial();
  x1 = width/2-50;
  y1 = height-100;
  x2 = width/2-50;
  y2 = 0;
}

void draw() {
  background(81, 54, 96);
  updateSerial();
  p1 = new Plane1();
  p2 = new Plane2();
  p1.display();
  p1.move();
  p2.display();
  p2.move();
  //p1w.display();
  //p2w.display();
  println(sensorValues[4]);
  //while (myPort.available() >0) {
  //valueFromArduino = myPort.read();
  //}
  // //  println(valueFromArduino);
  fill(255);
  textAlign(CENTER);
  textSize(32);
  text(time+1-(millis()/1000), width/2, height/2);

  if (sensorValues[4] == 1) {
    println("adding new ball");
    balls.add( new Ball(x1+48, y1));
  }
  for (int i=0; i<balls.size(); i++) {
    Ball b = balls.get(i); 
    b.move();
    b.display();
  }
}

void mouseClicked() {
  balls.add( new Ball(x1+48, y1));
}

class Plane1 {
  Plane1() {
  } 

  void display() {
    image(plane1, x1, y1, 100, 100);
  }

  void move() {
    if (sensorValues[1] < 300) {
      if (y1 > height/2 ) {
        y1 = y1 - 20;
      }
    }
    if (sensorValues[1] > 700 && sensorValues[4] == 0) {
      if (y1 < height -100) {
        y1 = y1 + 20;
      }
    }
    if (sensorValues[0] < 300) {
      if (x1 > 0) {
        x1 = x1 - 20;
      }
    }
    if (sensorValues[0] > 700) {
      if (x1 < width - 100) {
        x1 = x1 + 20;
      }
    }
  }
}

class Plane2 {
  Plane2() {
  } 

  void display() {
    image(plane2, x2, y2, 100, 100);
  }

  void move() {
    if (sensorValues[3] < 300) {
      if (x2 > 0) {
        x2 = x2 - 20;
      }
    }
    if (sensorValues[3] > 700) {
      if (x2< width - 100) {
        x2 = x2 + 20;
      }
    }
    if (sensorValues[2] < 300) {
      if (y2 > 0 ) {
        y2 = y2 - 20; 
      }
    }
    if (sensorValues[2] > 700 && sensorValues[2] < 1023) {
      if (y2 < height/2 - 100 ) {
        y2 = y2 + 20;
      }
    }
  }
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[2], 115200);
  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 ); // 10 = 'n'  Linefeed in ASCII
    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]);
        }
      }
    }
  }
}

class Ball{
  float x, y, size;
  color clr;
  float xspeed, yspeed;
  
Ball (float tempX, float tempY){
    x = tempX;
    y = tempY;
    size = 5;
    clr = color(0);
    xspeed = 0;
    yspeed = 2;
  }
  void display(){
    fill(clr);
    ellipse(x, y, size, size);
  }
  void move() {
    x += 0;
    y -= yspeed;
  }
}


//Arduino 
int buttonPin = 0;

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

void loop() {
  int pot1 = analogRead(A0);
  int pot2 = analogRead(A1);
  int pot3 = analogRead(A2);
  int pot4 = analogRead(A3);

  buttonPin = digitalRead(12);

  Serial.print(pot1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(pot2);
  Serial.print(",");
  Serial.print(pot3);
  Serial.print(",");
  Serial.print(pot4);
  Serial.print(",");
  //  Serial.print(buttonPin);

  if (pot2 == 1023) {
    Serial.print(1);
  }else{
    Serial.print(0);
  }
  Serial.println();


  //Serial.write(buttonPin);
  delay(10);


}

Javascript tutorial completion

I completed this Javascript tutorial last wednesday and it took me a few days to complete it. I found a few terrible bugs while completing this codeacademy tutorial, but honestly think this tutorial was a refresher course after taking interaction lab in Freshman year. While it was not necessarily hard, it was very time consuming. I believe it also has a great intro to jquery at the end that got me in the mindset of started working on jquery next.

 

Screen Shot 2017-03-29 at 7.59.08 PM

Midterm Project – Flying Pizza

Title : Flying Pizza
Subtitle
A game inspired by Flappy Bird ( a game that went viral last year where you need to make the bird fly through obstacles). Our game is a pizza that is trying to escape the pineapple by flying through the obstacles.
Description
Our game is based on the famous game Flappy Bird. The player use a button connected to an Arduino which is then kept inside a stuffed pineapple.
The aim of the game is to help the pizza to fly through the obstacles away from the pineapple.
The game works on Arduino for the hardware interface and uses processing for the game architecture.
Demo of Project

Pineapple Controller

Conceptual Development
Ideation :
Our original idea was to make a pizza making game, where users could make their pizzas, and the game would rate it. However, soon we realized that it could end up being not as interesting as we had thought, so we decided to do something more lively and active. The idea came from the famous game, Flappy Bird and the hate for Pineapples on Pizzas.
Motivations :
We really loved Flappy Bird and hated pineapples on pizzas.
Technical Development
We started the game as a regular flappy bird game. We eventually built on top of it to incorporate button support and eventually added photos to make the game with pineapple and pizza that we finally presented.
We originally became really over ambitious and tried to incorporate support for accelerometer and then a Ultra Sonic Range Sensor. However, we did not think the functioning of the sensors would not really work well with the game.
Original Idea :
Original
We made this game in processing using concepts of Object oriented programming, functions and used basic shapes and used the spacebar to keep making our “bird” move forward.
Final :
Final
We then included photos of the pineapple and pizzas to replace the background and image of the bird. We tried to make the lines as pineapples initially, but that would keep slowing down the frame rate way too much for the game to actually be playable, which is why we had to stick with just a pineapple in the background. But in retrospect, that kind of worked much better, as it gave the impression that the pineapple was chasing the pizza and that pizza was trying to run away from it while trying to avoid obstacles.
Flying Pizza:
Flying Pizza
Pineapple:
Background Pineapple
Failed Technical Developments | Physical Interface Ideas
  • Accelerometer Helmet

Our initial idea was to have an arduino connected to a helmet, or a head device which could then be worn by a player. As he would jump, the bird would jump as well.

I planned to do this by making the accelerometer configure itself to have the default value as the height of the person while he stands. Any positive change in the height (Along Y-Axis) would make the bird jump.
I received several suggestions to change the jump function in the program (which would have been super easy to do), however, I felt that would undermine the Flappy Bird feel of the game. The premise that Flappy Bird was built on was that the bird jumps and that’s the only way it knows how to fly. I did not want my Pizza to be any different.
So I stuck with the original jump function as it was originally meant to be, and had some breakthrough, as I was (with all my experience playing the game) able to cross the first obstacle. However, I realized that the game would need much more “jumps” by the bird and by the player to make any progress in the game.

For example, since the length of the obstructions is set to be random, for a player to just cross the first obstacle, he might have to jump 3-4 times (in certain cases), and this would have to be done in a span of ~1 second, something humanly impossible. Therefore, I decided to discard my progress and work with another application of the accelerometer.

 

  • Accelerometer Wings

A similar idea as the original one, the only difference would be that a player would move their arms to make the “bird” jump. This idea had to be srapped off after a day, because although some progress was made, I soon realized, the default position of the accelerometer would be keep changing as the player would move, which in turn would ruin the game experience as the bird would not fly as required.

For example, the game starts of with accepting a players original positioning of arms as the default position. Similar to my previous approach, any positive change along Y axis would make the bird jump. So a player would have to flap the arms to make the bird jump and then bring their arms back to the default range (where the arm is considered at rest) and then flap them again. However, the player in most likeliness would not always bring the arms back into the default range which would lead to bugs and glitches. Another problem was that it would be very constrictive to a player playing the game, because depending on different people’s arm lengths and heights the default range would have to be different. Since, for a person with bigger flaps (more amplitude) the game’s default range and jump range might be distorted causing the game to buggy and unplayable, the same for a person with smaller arms (less amplitude).

  • UltraSonic Pineapple

This was the last idea that would have worked if only we had started off with this approach. This approach had more problems than both the other combined, and funnily enough, not because of our fault. The first 2 UV sensors I borrowed were both faulty (confirmation by an IMA fellow), and it was the 3rd sensor (a different kind rather) that finally started working. The afternoon before the presentation day.
The idea behind this approach would be to make the pineapple close enough to the sensor to make the bird jump, if that approach worked, we planned to extend it to making wings and having them attached to the player which could play by flapping the wings, just the wings would be in place of the pineapple. Since the Sonar was set in one place, the default position was always set.
The game was working with the UV sensor with almost 30-40% success rate (most of the game iterations). It was still extremely hard to play.
For example: a player would have to move the pineapple/wings out of the jump range and back into it several times within less than a second to make the bird jump the right number of times which would be very hard.

But that wasn’t the only problem we faced with this approach. Some miscommunication made us believe that Thursdays lecture would only be a proof of concept presentation, and presentation would be during Friday’s Lab. This made us think we could work more on Thursday to make the Sonar completely calibrated with the Professor’s and Fellow’s help.
However, after receiving the presentation reminder mail, which stated the presentation was on Thursday, we had to unfortunately scrap our Sonar success. We decided to come early on Thursday, changed all the circuits and code to make it work with the Button and came up with the idea to hit the pineapple to make the pizza jump. This is the final idea we presented as our midterm project.

To be honest, all these failures made us realize that a button was indeed the best way to play this game. The game flappy bird has always been infamous for being frustrating, hard and after a while, annoying. Our accelerometer and Sonar approaches would just ramp up the frustration of the players and make the game much more difficult. This would in turn ruin the game experience, and make people hate our game.

Lessons Learned
User Test : Everyone loved the game, however, we got a few complaints that the game was a bit hard to play. This is something I plan to address in the near future.
Failure : Way too many of them.
After giving it button support, we wanted to, after Professor Moon’s advice, control the bird/pizza using an accelerometer. Although we did get the accelerometer to work, even we couldn’t play the game. Even crossing a single obstacle was a momentous task.
We then tried to incorporate a Ultrasonic Distance ranger to move the bird, with which we ran into a similar problem of the game being extremely hard.
Lastly, we tried to include music to our game. However, that would slow down our game extremely, and make it unplayable. This left us no option to remove the music.
More planning in terms of the project.
Miscommunication: Always double check on dates of presentation rather triple check.