FINAL POST

I.PROJECT TITLE

“Miss Diana want you to study” – Study Accompanying App

Made by Rachel Duan, Instructor- Prof. Rudi.

II. CONCEPTION AND DESIGN

At first, this idea aroused me because I had used this character to do all of my recitation practices. It always provided me highly enthusiasm when I was using my favorite character to complete my practices. Also, during my researches, I find a project which was making a character who could interact with you on the computer screen. I combined these two ideas into one, which is making an app with your favorite character, who can interact with you and encourage you to concentrate on your study.

My initial idea was to make a real doll that can move with the motor, but the doll was hard to buy and to make, and also I failed to even be familiar with the motor during the recitation, so I changed the doll into a mouse, which was Diana’s fans name. I let the doll hug the operation box so that may be more fun. But I think this project will be better after I received the Diana doll I bought.

The first edition project was very simple, with the button and a simple count down, and the audios interact. During the user test, I received a lot of suggestions, such as adding the tips of “You are studying too long!” or “You should set more time!”, and also that the interaction was too simple if there were only audios. I then improved my project based on these suggestions. There was also an idea I found interesting but hard to achieve, which was adding the camera to monitor if you are studying or not. It’s hard to add the tracking faces codes, so I gave up the idea, but I would like to improve my project if I learn how to code it.

Just before the presentation day, when I thought I have finished everything, Prof.Rudi came and talk with me. He gave a lot of important suggestions, such as adding the dialog box and reducing the complexes of the background, giving encouragement as time went by, and also using the iPad to do the presentation. Among them, the idea of a dialog box was an important point, which inspired me to add more dialogs during the process. I also changed all of the background images to make the pages more clearly. This adorned my project visibly.

The initial one (The last edition will be appear in the end of the post.)

III. FABRICATION AND PRODUCTION

As I have mentioned above, I have changed ideas for amounts of times. At first, I changed the character doll idea, then I changed the motors and decided to pay more attention to the interaction part from the screen to the real world. I first only chose audios, and then I added the pictures and videos. The funniest idea I considered was the idea of dialogue. This part really added to the interaction part.

There was a typical story about how I changed my ideas with this project. After someone told me that they thought the interaction was simple and poor, and Prof. Eric mentioned that the button was the most boring interaction we provided, I felt a kind of nervous and anxious. I didn’t regret choosing the buttons to be my project’s main interaction part, as every count down I know was made by buttons, and I couldn’t find a better choice of the sensor if I want the count down operator to be clear and easy to use. I just felt that I should add more sensors to rich my project’s interaction. I know I could use the force sensor and distance sensor, but I didn’t know how. So at first, I add the force sensor in parts of my doll, providing the character’s beautiful images for people when they feel tired during the study and just press the doll to relax (The pages of beautiful images then change into a gif. made by only two pictures, for I then realize that what I want to do is giving people short rest, rather than complex pictures attracting their attention). Because of thought that I should add as many sensors as possible at first, I also tried to add the distance sensor, for people can hug the doll and get another encouragement. But at last, I gave up this idea, because I realized that my main purpose is letting the app encourage people to study harder, but not for making complex interactions to add people’s moves and let them play with the doll. After this, I then decided to add more dialogs, which were more simpler and funnier, also just fit with my purpose.



(I laser cut for three times, wondering whether I should add a hole for the distance sensor or not. I also changed the words, from "Feel free to hug me when you are tired" back to "Miss Diana want you to study")

IV. CONCLUSIONS

All in all, I’m satisfied with what I have done. This is all thanks to Prof. Rudi’s suggestions, without his last suggestions, I may still using the initial complex background, feeling lost about what I was making. As I mentioned in class, that what I made is a practical thing, so the interaction I have made needs time for people to use and feel, which then came hard to show for everyone in the short ten minutes. Also, as everyone has mentioned that they are confused about the doll, I need to say that if I can have a real Diana doll, then my project may be performed better and be more make sense. What’s more, I really like the idea of putting your phone on the operator and the count down begins, for this is a really useful function if I want this app to encourage people to study. So for the next improvement steps, I will choose the face tracking idea and the idea of the putting phone. I will post this project online for this may be interesting for our Diana fans, and I hope this program can really encourage us to concentrate on our works with Miss Diana’s audios and images.

During the project process, I also learned two important courses. First is always insist on your project’s purpose and make the changes, which I have mentioned parts of this above. It’s important to listen to others’ suggestions, but the more important thing is that we need to be clear-minded, that is always remember what we want to do, and choose the good suggestions to improve the project. Listening to all can only make your project into a thing very complex but with no clear purpose.

The second is that we don’t need to always pay attention to how useful the project is. Sometimes, we can make artworks for whatever we thinking about. I get this idea from everyone’s project because I found that from midterm to final, what I was making was all something useful, but we can also have creative minds for a game or an artistic thing. I’m not talking about that useful function is not that important or good, but I thought I was stuck in my own thinking ways. In the next study process, I will try to jump out of my practical ideas and try to use the thing I have learned to make something funnier.

What I’ve mentioned above are my next improving steps, and I feel really pleased to have my IMA enlightenment courses in Interaction Lab. This lab has not only taught me the techniques we need to make things, but also we can achieve whatever we want if only we dare to dream. I have found my own way and I will keep on discovering and studying.

V. TECHNICAL DOCUMENTATION

The Arduino codes:

// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing


int Button0 = 0;
int Button1 = 3;
int Button2 = 6;
int Button3 = 9;
int Sensor = A5;

//int trigPin = 4;
//int echoPin = 8;
//unsigned long time_echo = 0; // record the pulse width by sensor returns
//unsigned long distance = 0; // record the distance value;


void setup() {
  Serial.begin(9600);
  pinMode(Button0, INPUT_PULLUP);
  pinMode(Button1, INPUT_PULLUP);
  pinMode(Button2, INPUT_PULLUP);
  pinMode(Button3, INPUT_PULLUP);
  pinMode(Sensor,  INPUT_PULLUP);
//  pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
//  pinMode(echoPin, INPUT); // Sets the echoPin as an Input
}

void loop() {
//  // Sets the trigPin on HIGH state for 10 micro seconds
//  digitalWrite(trigPin, HIGH);
//  delayMicroseconds(10);
//  digitalWrite(trigPin, LOW);
//
//  // Reads the echoPin, returns the sound wave travel time in microseconds
//  time_echo = pulseIn(echoPin, HIGH);
//
//  // Calculating the distance
//  distance = time_echo * 34 / 100;

  int sensor0 = digitalRead(Button0);
  int sensor1 = digitalRead(Button1);
  int sensor2 = digitalRead(Button2);
  int sensor3 = digitalRead(Button3);
  int sensor4 = digitalRead(Sensor);
//  int sensor5 = digitalRead(distance);


  // print out the state of the button:
  Serial.print(sensor0);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor3);
  Serial.print(",");
  Serial.print(sensor4);
//  Serial.print(",");
//  Serial.print(sensor5);
  Serial.println();
  delay(10);
}

The Processing codes: (Presentation version)

import processing.serial.*;

//atop
int NUM_OF_VALUES_FROM_ARDUINO = 5;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int sensorValues[];      /** this array stores values from Arduino **/

String myString = null;
Serial myPort;

import processing.sound.*;
SoundFile s2;
SoundFile s3;
SoundFile s4;
SoundFile s5;
SoundFile s6;

import processing.video.*;
Movie m1;
Movie m2;

PImage photo1;
int timer = 90000;
int maxtimer = 90000;
float PI = 3.14159;
int timeron = 0;

int maxImages = 2;
int imageIndex = 0;
PImage[] images = new PImage[maxImages];

Button b1;
减 b3; //--
加 b4; //++
开始 b5; //start button
停止 b6; //pause
归零 b7; //stop
word b8;
word1 b9;

void setup() {
  size(1200, 900);
  photo1 = loadImage("1.jpg");
  setupSerial();

  frameRate(60);
  b1 = new Button(100, 570, 200, 50, "");
  b3 = new 减(375, 520, 50, 25, "");
  b4 = new 加(375, 125, 50, 25, "");
  b5 = new 开始(430, 840, 350, 65, "Start");
  b6 = new 停止(430, 840, 175, 65, "Pause");
  b7 = new 归零(605, 840, 175, 65, "Quit");
  b8 = new word(50, 55, 365, 135, "");
  b9 = new word1(50, 55, 365, 135, "");
  textFont(createFont("Courier", 25));

  s2 =new SoundFile(this, "start.mp3");
  s3 =new SoundFile(this, "stop.mp3");
  s4 =new SoundFile(this, "continue.mp3");
  s5 =new SoundFile(this, "quit.mp3");
  s6 =new SoundFile(this, "complete.mp3");

  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( "1" + i + ".jpg" );
  }

  m1 = new Movie(this, "relax.mp4");
  m2 = new Movie(this, "quit.mp4");
}


void draw() {
  getSerialData();
  printArray(sensorValues);
  background(#E799B0);
  image(photo1, 0, 0);
  //表盘
  strokeWeight(4);
  stroke(#E799B0);
  fill(255);
  arc(580, 450, 600, 600, 0, (timer/(maxtimer+0.001)) * (PI*2));
  int max60 = maxtimer/3600;
  b8.draw();
  if (maxtimer < 216000 && maxtimer > 18000 && timeron == 0) {
    b9.draw();
    b8.message = "";
    b9.message ="Miss Diana want" +"\n" + "you to study" + "\n" + "for "+ max60 + " minutes";
  }
  if (maxtimer >= 216000) {
    b8.message ="Remeber to relax!";
  }
  if (maxtimer <= 18000) {
    b8.message ="Can you stay" +"\n"+"longer with me?";
  }
  int minstoshow = floor(timer/3600);
  int secstoshow = floor(timer/60)%60;
  fill(#E799B0);
  textSize(100);
  text(minstoshow+ ":" + ((secstoshow < 10)?"0":"") + secstoshow, 580, 450);
  b1.draw();
  b3.draw();
  b4.draw();
  if (timeron == 2) {
    b6.draw();
    b7.draw();
    if (b7.touch) {
      image(m2, 0, 0);
      m2.play();
      float md = m2.duration();
      float mt = m2.time();
      if (mt >= md) {
        m2.jump(0.0);
        m2.stop();
        timer = maxtimer;
        timeron = 0;
        return;
      }
    }
  }
  if (timeron == 1) {
    b6.draw();
    b7.draw();
    b9.draw();
    timer -=600;
    b9.message = "Diana is" +"\n" +" watching you";
    b8.message = "";
    if (timer <= maxtimer/2) {
      b9.message = "Come on! "+ "\n" +"You are almost there!";
    }
    if (timer <= maxtimer/4) {
      b9.message = "Just a few minutes! "+ "\n" +"I know you can do it";
    }
    if (timer <= 0) {
      image(m1, 0, 0);
      m1.play();
      float md = m1.duration();
      float mt = m1.time();
      if (mt >= md) {
        m1.jump(0.0);
        m1.stop();
        timer = maxtimer;
        timeron = 0;
      }
    }
  }
  if (timeron == 0) {
    b5.draw();
    timer = maxtimer;
  }

  if (b3.touch && maxtimer-3600 > 0 && timeron == 0) {
    maxtimer -=18000;
  }

  if (b4.touch && timeron == 0) {
    maxtimer +=18000;
  }

  if (b5.touch) {
    if (timeron == 0) {
      timer = maxtimer;
      timeron = 1;
      s2.play();
      return;
    }
  }
  if (b6.touch) {
    if (timeron == 1) {
      timeron = 2;
      s3.play();
      b6.message = "Continue";
      b8.message = "Are you going"+ "\n" +" to rest in "+ "\n"  +"such a short time?";
      return;
    }
    if (timeron == 2) {
      timeron = 1;
      s4.play();
      b6.message = "Stop";
      return;
    }
  }
  if (b1.touch) {
    image(images[imageIndex], 0, 0, 1200, 900);
    imageIndex = (imageIndex + 1) % images.length;
  }
}


void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 1 ], 9600);

  myPort.clear();

  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;
  sensorValues = new int[NUM_OF_VALUES_FROM_ARDUINO];
}

void getSerialData() {
  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_FROM_ARDUINO) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
  delay(300);
}

class 减 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  减(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[0]==0) {
      touch = true;
    }
    noFill();
    noStroke();
  }
}

class 加 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  加(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[1]==0) {
      touch = true;
    }
    noFill();
    noStroke();
  }
}

class 开始 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  开始(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[2]==0) {
      touch = true;
    }
    fill(255);
    stroke(252, 84, 96);
    if (touch) {
      stroke(238, 77, 82);
    }
    strokeWeight(1);
    rect(x, y, w, h, 2);
    fill(25);
    textSize(25);
    textAlign(CENTER, CENTER);
    text(message, x+w/2, y+h/2-5);
  }
}

class 停止 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  停止(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[2]==0) {
      touch = true;
    }
    fill(255);
    stroke(252, 84, 96);
    if (touch) {
      stroke(238, 77, 82);
    }
    strokeWeight(1);
    rect(x, y, w, h, 2);
    fill(25);
    textSize(25);
    textAlign(CENTER, CENTER);
    text(message, x+w/2, y+h/2-5);
  }
}

class 归零 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  归零(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[3]==0) {
      touch = true;
    }
    fill(255);
    stroke(252, 84, 96);
    if (touch) {
      stroke(238, 77, 82);
    }
    strokeWeight(1);
    rect(x, y, w, h, 2);
    fill(0);
    textSize(25);
    textAlign(CENTER, CENTER);
    text(message, x+w/2, y+h/2-5);
  }
}


class Button {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  Button(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    touch = false;
    if (sensorValues[4]==0) {
      touch = true;
    }
    noFill();
    noStroke();
  }
}
class word1 {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  word1(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    noStroke();
    noFill();
    rect(x, y, w, h);
    fill(0);
    textSize(35);
    textAlign(CENTER, CENTER);
    text(message, x+w/2, y+h/2-5);
  }
}

class word {
  float x;
  float y;
  float w;
  float h;
  float ox;
  float oy;
  String message;
  boolean touch = false;
  word(float xx, float yy, float ww, float hh, String m) {
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    ox = xx-width/2;
    oy = yy-height/2;
    message = m;
  }
  void draw() {
    x = ox+width/2;
    y = oy+height/2;
    noStroke();
    noFill();
    rect(x, y, w, h);
    fill(255, 0, 0);
    textSize(35);
    textAlign(CENTER, CENTER);
    text(message, x+w/2, y+h/2-5);
  }
}

void movieEvent(Movie m) {
  m.read();
}