Victoria & Ariana’s Final Project

Project: Dance to Cities, Sing for Victory

Partner: Victoria Fu

Additional Material: capacitive sensor, color circles, a map, a box

My Concentration: Processing part

1) Motivation

Both Victoria and I are interested in dancing but we learn different styles of it. So it drove us to put various kinds of dancing into consideration while we are thinking about our project. With curiosity about cities around the world, we decided to create a game about native music and dancing of different cities.

2) General Description & Ideas Changing

When designing the game, we agreed on this flow:

  • There will appear a picture of a city randomly. Gamers should observe it and guess what is the name of the city.
  • In total, there are 6 cities but 7 names of cities each with a piece of music will appear on the screen.
  • Please use the remote control to choose a right piece of music.
  • If you are right, the music will play. However, if it is wrong, a strange sound will play.
  • There will be a wonderful picture on the screen about the native dancing.
  • Try to act like the dancer and the camera will track your movement in 10 seconds.
  • If you do it correctly, congratulations! If you are wrong, the system will announce that you loose the game.
  • After you win, a description of the city will show on the screen and you can learn much about the city. And a light on the globe will lighten.

However, after talking with professor, for its difficulty, we changed our ideas a lot.

img_0836 img_0835

  • Press a city with capacitive sensor on the map
  • A piece of native music and a picture will show on the screen
  • After several seconds, a picture of native dancing will appear
  • According to the dancing picture, you need to make a gesture
  • Use the right and left buttons of the mouse to choose colors
  • The camera will track your gesture and judge whether you are right

3)Process:

Pictures:

Welcome page:

welcome

Agra:

agra-city agra

Mauritius:

mauritius-city mauritius

Barcelona:

barcelona-city barcelona

Moscow:

moscow-city moscow

Urumchi:

urumchi-city urumchi

Xishuangbanna:

xishuangbanna-city xishuangbanna

We used capacitive sensors. When you touch the cities on the map, the information will send to Processing and the pictures show. At first, we used “println”. But only when we changed it into “write” can Processing receive data.

img_0944

I used “switch” and “case” instead of “if” function in Processing to receive data, which is more convenient. Before we connected Arduino and Processing together, professor Moon taught me to use “keyPressed” function to test my code.

key-pressed

To limit the time and make the project more automatic, professor Moon helped me set the “count”, which is 60 frames per second. In each case, I used “if” function to control pictures, music and camera. Also after each case, the count has to be set back to 0 and recount.

In the class, we learnt only one color tracking but in our project, we need two. So I reset the name of “handX” “handY” and so on. But I met a problem when I was coding the case. After the limited time, the camera still did not disappear and turn back to the welcome page. My code was like this:

“case 1:
//Left Hand
areaX = 100;
areaY = 380;
areaRange = 60;

fill(0, 255, 0, 100);
rectMode(CENTER);
rect(areaX, areaY, areaRange*2, areaRange*2);
rectMode(CORNER);

fill(255, 255, 0, 100);
rectMode(CENTER);
rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
rectMode(CORNER);
//Right Hand
areaX1 = 420;
areaY1 = 130;
areaRange1 = 60;

if (soundfile1.isPlaying() == 0) {
soundfile1.play();
soundfile6.stop();
soundfile5.stop();
soundfile4.stop();
soundfile3.stop();
soundfile2.stop();
}
if (count < 60) {
image(agracity, 0, 0, 500, 600);
fill(0);
textSize(40);
text(“Agra, India”, 20, 40);
} else if (count < 100) {
image(agra, 0, 0, 500, 600);
} else if (count<500  && handLX < areaX-areaRange && handLX > areaX+areaRange &&
handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
fill(0);
textSize(40);
text(“Congratulation”, 250, 300);
} else if (count <500 && handLX < areaX-areaRange || handLX > areaX+areaRange ||
handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
fill(0);
textSize(40);
text(“Come on!”, 250, 300);
} else {
cityName = 0;
}
break;”

Also he added that once you press the space, the game will go back to the welcome page and restart.

 

So I arranged an office hour with professor Moon. He found that I had two “else if (count<500…” so they contradicted with each other. And we changed it into this:

“if (count < 60) {
image(mauritiuscity, 0, 0, 500, 600);
text(“Mauritius”, 20, 40);
} else if (count < 100) {
image(mauritius, 0, 0, 500, 600);
} else if (count <800) {
if ( handLX > areaX-areaRange && handLX < areaX+areaRange &&
handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
fill(0);
textSize(40);
text(“Congratulation”, 250, 300);
}
if (handLX < areaX-areaRange || handLX > areaX+areaRange ||
handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
fill(0);
textSize(40);
text(“Come on!”, 250, 300);
}
} else {
cityName = 0;
count = 0;
}

break;”

In order to be easier to track the color, we used two bright color circles.

img_1011

Because we tick wires at the back to the map, so the map cannot be put on the desk. We found a box and put the circuit inside. And used the two-sides tape with thickness to stick the map on the surface of the box so it is smooth.

img_1013 img_1014

But the camera is not really sensitive so the game is hard to win even I tried to use a light.

Processing code:

Arduino code:

import processing.serial.*;
Serial myPort;
import processing.sound.*;
import processing.video.*;

Capture cam;

color pickedColor;
PImage areaImage;
int sumX = 0, sumY = 0;
float avgX, avgY;
int count0 = 0;

color pickedColor1;
PImage areaImage1;
int sumX1 = 0, sumY1 = 0;
float avgX1, avgY1;
int count1 = 0;

float handLX, handLY;
float handRX, handRY;

//Left Hand
int areaX;
int areaY;
int areaRange = 60;

//Right Hand
int areaX1;
int areaY1;
int areaRange1 = 60;


SoundFile soundfile1;
SoundFile soundfile2;
SoundFile soundfile3;
SoundFile soundfile4;
SoundFile soundfile5;
SoundFile soundfile6;

int cityName;     // Data received from the serial port
int prevCityName;
PImage agra;//1
PImage agracity;// picture of the city
PImage mauritius;//2 picture of the dancing
PImage mauritiuscity;
PImage moscow;//3
PImage moscowcity;
PImage barcelona;//4
PImage barcelonacity;
PImage xishuangbanna;//5
PImage xishuangbannacity;
PImage urumchi;//6
PImage urumchicity;
PImage welcome;//0
PImage welcome2;

int count = 0;

void setup() {
  size(500, 600);
  background(255);
  String portName = Serial.list()[1];
  myPort = new Serial(this, portName, 9600);

  //music
  soundfile1 = new SoundFile(this, "agra.mp3");
  soundfile2 = new SoundFile(this, "mauritius.mp3");
  soundfile3 = new SoundFile(this, "moscow.mp3");
  soundfile4 = new SoundFile(this, "barcelona.mp3");
  soundfile5 = new SoundFile(this, "xishuangbanna.mp3");
  soundfile6 = new SoundFile(this, "urumchi.mp3");

  //pictures
  agra = loadImage("agra.jpeg");
  agracity = loadImage("agra city.jpeg");
  mauritius = loadImage("mauritius.jpeg");
  mauritiuscity = loadImage("mauritius city.jpeg");
  moscow = loadImage("moscow.jpeg");
  moscowcity = loadImage("moscow city.jpeg");
  barcelona = loadImage("barcelona.jpeg");
  barcelonacity = loadImage("barcelona city.jpeg");
  xishuangbanna = loadImage("xishuangbanna.jpeg");
  xishuangbannacity = loadImage("xishuangbanna city.jpeg");
  urumchi = loadImage("urumchi.jpeg");
  urumchicity = loadImage("urumchi city.jpeg");
  welcome = loadImage("welcome.jpeg");
  welcome2 = loadImage("welcome2.jpeg");

  //camera
  cam= new Capture(this, 640, 480);
  cam.start();
  areaImage = createImage(640, 480, RGB);
  areaImage1 = createImage(640, 480, RGB);
}


void draw()
{

  //Right Hand
  areaX1 = 420;
  areaY1 = 130;
  areaRange1 = 60;
  //camera
  if (cam.available() == true) {
    cam.read();
  }

  sumX = 0;
  sumY = 0;
  avgX = 0;
  avgY = 0;
  count0 = 0;

  sumX1 = 0;
  sumY1 = 0;
  avgX1 = 0;
  avgY1 = 0;
  count1 = 0;

  image(cam, 0, 0, width, height);

  cam.loadPixels();
  areaImage.loadPixels();
  areaImage1.loadPixels();
  for (int y=0; y<cam.height; y++) {
  for (int x=0; x<cam.width; x++) {
       int index=x + y*cam.width;

      float r = red(cam.pixels[index]);
      float g = green(cam.pixels[index]);
      float b = blue(cam.pixels[index]);

      // color 0
      float pickedR = red(pickedColor);
      float pickedG = green(pickedColor);
      float pickedB = blue(pickedColor);

      if (r>pickedR-20 && r<pickedR+20 && 
        g >pickedG-20 &&g <pickedG+20&& 
        b>pickedB-20&&b <pickedG+20) 
      {
        areaImage.pixels[index] = color(255, 0, 0);
        sumX += x;
        sumY+= y;
        count0++;
      } else {
        areaImage.pixels[index] = color(r, g, b);
      }

      // color 1
      float pickedR1 = red(pickedColor1);
      float pickedG1 = green(pickedColor1);
      float pickedB1 = blue(pickedColor1);

      if (r>pickedR1-20 && r<pickedR1+20 && 
        g >pickedG1-20 &&g <pickedG1+20&& 
        b>pickedB1-20&&b <pickedG1+20) 
      {
        areaImage1.pixels[index] = color(255, 0, 0);
        sumX1 += x;
        sumY1 += y;
        count1++;
      } else {
        areaImage1.pixels[index] = color(r, g, b);
      }
    }
  }
  areaImage.updatePixels();
  areaImage1.updatePixels();
  image(areaImage, 0, 0, width, height);
  image(areaImage1, 0, 0, width, height);

  if (count0 !=0) {
    avgX = sumX*1.0/ count0 ;
    avgY = sumY*1.0/ count0;
  }

  if (count1 !=0) {
    avgX1 = sumX1*1.0/ count1;
    avgY1 = sumY1*1.0/ count1;
  }
  //println("sum:" + sumX + ", " + sumY);
  //println("avg:" + avgX + ", " + avgY);

  handLX = avgX;
  handLY = avgY;
  handRX = avgX1;
  handRY = avgY1;

  fill(0, 255, 0);
  ellipse(handLX, handLY, 50, 50);
  fill(255, 255, 0);
  ellipse(handRX, handRY, 50, 50);

  //show the picked color
  fill(pickedColor);
  rect(10, 10, 100, 100);
  fill(pickedColor1);
  rect(120, 10, 100, 100);

  //pictures
  int val = 0;
  while ( myPort.available() > 0) {  // If data is available,
    val = myPort.read();
  }
  println(val);

  if (cityName == 0) {
    cityName = val;         // read it and store it in val
  }

  // 60 fps (frame per sec);
  // 1 sec = 60 frames
  if (prevCityName == 0 && cityName > 0) {
    count = 0;
  }
  count++;



  switch(cityName) {
  case 0:  //welcome
    soundfile6.stop();
    soundfile5.stop();
    soundfile4.stop();
    soundfile3.stop();
    soundfile2.stop();
    soundfile1.stop();

    if (count < 60) {
      image(welcome, 0, 0, 500, 600); // welcome
      // instructions
    } else {
      image(welcome2, 0, 0, 500, 600);
      fill(0);
      textSize(24);
      text("   It is a game to show pictures ", 50, 50);
      text("   and songs about some cities ", 50, 100) ;
      text("   as well as to teach you some ", 50, 150);
      text("   gustures of their typical dancing", 50, 200);
      text("   ^_^Enjoy it !", 50, 250);
    }
    break;

  case 1:   //agra
    //Left Hand
    areaX = 100;
    areaY = 380;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 420;
    areaY1 = 130;
    areaRange1 = 60;

    if (soundfile1.isPlaying() == 0) {
      soundfile1.play();
      soundfile6.stop();
      soundfile5.stop();
      soundfile4.stop();
      soundfile3.stop();
      soundfile2.stop();
    }

    if (count < 60) {
      image(agracity, 0, 0, 500, 600);
      fill(0);
      textSize(40);
      text("Agra, India", 20, 40);
    } else if (count < 100) {
      image(agra, 0, 0, 500, 600);
    } else if (count<800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }
    break;
  case 2:   //mauritius
    //Left Hand
    areaX = 400;
    areaY = 120;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 30;
    areaY1 = 200;
    areaRange1 = 60;


    if (soundfile2.isPlaying() == 0) {
      soundfile2.play();
      soundfile6.stop();
      soundfile5.stop();
      soundfile4.stop();
      soundfile3.stop();
      soundfile1.stop();
    }
    if (count < 60) {
      image(mauritiuscity, 0, 0, 500, 600);
      text("Mauritius", 20, 40);
    } else if (count < 100) {
      image(mauritius, 0, 0, 500, 600);
    } else if (count <800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }

    break;  

  case 3:   //moscow
    //Left Hand
    areaX = 250;
    areaY = 150;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 150;
    areaY1 = 150;
    areaRange1 = 60;


    if (soundfile3.isPlaying() == 0) {
      soundfile3.play();
      soundfile6.stop();
      soundfile5.stop();
      soundfile4.stop();
      soundfile2.stop();
      soundfile1.stop();
    }
    if (count<60) {
      image(moscowcity, 0, 0, 500, 600);
      text("Moscow, Russia", 20, 40);
    } else if (count < 100) {    
      image(moscow, 0, 0, 500, 600);
    } else if (count <800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }

    break;
  case 4:   //barcelona
    //Left Hand
    areaX = 150;
    areaY = 100;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 100;
    areaY1 = 200;
    areaRange1 = 60;


    if (soundfile4.isPlaying() == 0) {
      soundfile4.play();
      soundfile6.stop();
      soundfile5.stop();
      soundfile3.stop();
      soundfile2.stop();
      soundfile1.stop();
    }
    if (count<60) {
      image(barcelonacity, 0, 0, 500, 600);
      text("Barcelona, Spain", 20, 40);
    } else if (count < 100) {
      image(barcelona, 0, 0, 500, 600);
    } else if (count <800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }
    break;

  case 5:   //xishuangbanna
    //Left Hand
    areaX = 350;
    areaY = 100;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 150;
    areaY1 = 200;
    areaRange1 = 60;


    if (soundfile5.isPlaying() == 0) {
      soundfile5.play();
      soundfile6.stop();
      soundfile4.stop();
      soundfile3.stop();
      soundfile2.stop();
      soundfile1.stop();
    }
    if (count<60) {
      image(xishuangbannacity, 0, 0, 500, 600);
      text("Xishuangbanna, China", 20, 40);
    } else if (count < 100) {    
      image(xishuangbanna, 0, 0, 500, 600);
    } else if (count <800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }
    break;

  case 6:   //urumchi
    //Left Hand
    areaX = 50;
    areaY = 50;
    areaRange = 60;

    fill(0, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX, areaY, areaRange*2, areaRange*2);
    rectMode(CORNER);

    fill(255, 255, 0, 100);
    rectMode(CENTER);
    rect(areaX1, areaY1, areaRange1*2, areaRange1*2);
    rectMode(CORNER);
    //Right Hand
    areaX1 = 200;
    areaY1 = 200;
    areaRange1 = 60;


    if (soundfile6.isPlaying() == 0) {
      soundfile6.play();
      soundfile5.stop();
      soundfile4.stop();
      soundfile3.stop();
      soundfile2.stop();
      soundfile1.stop();
    } 
    if (count<60) {
      image(urumchicity, 0, 0, 500, 600);
      text("Urumchi, China", 20, 40);
    } else if (count < 100) {
      image(urumchi, 0, 0, 500, 600);
    } else if (count <800) {
      if ( handLX < areaX-areaRange && handLX > areaX+areaRange &&
        handLY > areaY-areaRange && handLY < areaY+areaRange && handRX > areaX1-areaRange1 && handRX < areaX1+areaRange1 &&
        handRY > areaY1-areaRange1 && handRY < areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Congratulation", 250, 300);
      }
      if (handLX > areaX-areaRange || handLX < areaX+areaRange ||
        handLY < areaY-areaRange || handLY > areaY+areaRange || handRX < areaX1-areaRange1 || handRX > areaX1+areaRange1 ||
        handRY < areaY1-areaRange1 || handRY > areaY1+areaRange1) {
        fill(0);
        textSize(40);
        text("Come on!", 250, 300);
      }
    } else {
      cityName = 0;
      count = 0;
    }
    break;
  }
  fill(255);
  text(count, 10, 20);

  prevCityName = cityName;
}

void mousePressed() {
  //println(mouseX, ""+ mouseY);
  if (mouseButton == LEFT) {
    pickedColor = cam.get(mouseX, mouseY);
  }
  if (mouseButton == RIGHT) {
    pickedColor1 = cam.get(mouseX, mouseY);
  }
}
void keyPressed() {
  //  if (key >= '1' && key <= '6') {
  //    count = 0;
  //    cityName = key - '0';
  //  }
  if (key == ' ') {
    count = 0;
    cityName = 0;
  }
}

Idea for Final Project

Ariana Cai

Professor JH Moon

Interaction Lab

December 5th

Dance to Cities, Sing for Victory

——Learn more about cities in the way of a game

Partner: Victoria Fu

When I found Victoria to cooperate, we talked about our ideas. She wanted to create a game while I intended to use the remote control in the Arduino Kit. As both of us like dancing very much, we decided to use this as one of the elements in our final project. However, we are interested in different forms of dancing which adds the difficulty to our negotiation. So our idea came from this disagreement. As different kinds of dancing come from different culture backgrounds, we came up with thoughts about different cities. We learnt about face tracking several weeks ago which was quite funny and impressing. We thought that we could apply it to the dancing part in our project. In dancing competitions, judges pay close attention to dancers’ movement and then grade for them. But we are going to create a game. What about making the camera the judge? So you see, we can successfully use the face tracking.

On a map, there are many cities. We chose three Chinese cities which are Xinjiang, Tibet and Dai Autonomous Prefecture of Xishuangbanna and three foreign cities which are Moscow, Barcelona and Agra. These cities all have their typical kinds of dancing. First of all, the gamer can push a city on the map. And a picture of the city will appear on the screen. And then the computer will play a piece of native music. Once the music plays, there will be a wonderful picture on the screen about the native dancing and. We will also put a short video of the dance. The gamer has to try to act like the dancer and the camera will track his or her movement in 10 seconds. Here we decided to use color tracker. If the gamer does it correctly, congratulations! If his or her movement is wrong, the system will announce that he or she looses the game. After the winning, a description of the city will show on the screen and the gamer can learn much about the city. And a light on the map will lighten to celebrate the victory!

I understand that there are a lot of difficulties we are going to confront. First of all, we only learnt about face tracking but never know how to track the movement of the whole body. And the code of face tracking was always given by professor, we have to create ourselves this time according to the examples. In addition, the remote control is a new thing for both of us so we have to explore the ways of using it. Last but not least, we have to use both Processing and Arduino and make them cooperate with each other. To be honest, we are not really skilled in coding.

But I have to admit that this game is not interesting enough. In the following days, we may think about more interesting ideas to polish our project.

Lab 9(Moon): Laser cut & Tinkercad

img_0801

This is the first picture I designed for laser cut. But my friend told me that the filling color will be hard to cut and it better to only have stroke. I thought he was right so I changed my design.

I combined these two pictures below and created a new design.

screen-shot-2016-12-02-at-16-54-31 screen-shot-2016-12-02-at-16-54-40

This is the effect. The process of laser cutting is amazing. I watched the images appearing gradually. After I got my piece, I smelt the burning smelling.

img_0803img_0802

 

In the ring designing part, I met some difficulties. I wanted the letter to appear on the surface of the ring (like letter A)  but it could not (like letter C). After asking fellow, I learnt that there was a magic align button to achieve it.

screen-shot-2016-12-02-at-12-18-15

However, I wanted to put my whole name on the surface, which was complicated. I found in community, I could insert text directly and I could also adjust the inner dimeter myself. Finally, I finished creating my own ring.

screen-shot-2016-12-02-at-13-03-56

Lab8(Moon): Leap Motion

partner:Lynsy Qu

We only changed one part of the sample codes: “gist id”=[5a3e6657ec1366ec88abc7ec7a502062]

We first wanted to use the finger to draw. The idea came from previous lessons in which we learnt about pmouseX, pmouseY. So I was thinking about use pfingerX, pfingerY. But we found the line is quite short and could not constantly appear on the canvas. After asking Joy, I realized that I wrote “background(255)” after “void draw()”. So the canvas always becomes blank. I needed to delete background after draw.

But that was too easy. We changed our mind. We imported two pictures and made the “fingerX,fingerY” and “fingerX/2,fingerY/2″control two pictures. And we also imported a piece of music and made the position of finger control the volume. But in the code, I only used one picture to make it move clearly.

11-18

11-185

Lab7(Moon): Use potentiometer to control the volume of the white noise

Partner:Lyndsy Qu

Processing:

Arduino:

Equipment:

  • 1 potentiometer
  • 1 Arduino and USB cable
  • breadboard

We only used one sensor to control the volume of the white noise. The code is partly from examples. But they code is designed for more than one sensor. So we did not change the number of the sensors in the code in case of messing the code, just leaving other sensors printing random numbers. We changed  “lowPass.freq(map(mouseX, 0, width, 80, 10000));” into “lowPass.freq(map(sensorValues[0], 0, 255, 80, 10000));” to realize controlling.

Actually, we wanted to change the white noise into other piece of music but we failed. After the guidance of a professor, we realized that “lowPass.freq(map(sensorValues[0], 0, 255, 80, 10000));”is not fit for every music. Therefore, we just used the white noise.

img_0365 img_0366

Lab 5(Moon): Mechanical Arms

Partner: Lyndsy Qu

Equipment:

  • 1 stepper motor
  • 1 SH75440NE ic chip
  • 1 5 volt power supply
  • 1 power plug
  • 1 potentiometer from your kit
  • 1 Arduino and USB cable from your kit
  • Laser-cut mechanisms

 

wechatimg80

At first, we were a little bit confused about the given picture of the circuit and just copied the one we did in the class yesterday. However, it definitely did not work. First, we forgot to connect it to the power. Second, not all the feet of the SH75440NE ic chip are connected to the Tie Point Interlocking. We could feel there was electricity but the arm did not move.

wechatimg81wechatimg82wechatimg83wechatimg74

wechatimg74

After the guidance of a fellow, we turned back to the given picture on the website.preview-full-pasted-file-1

When we were connecting the circuit, we found both the 4 Grounds and 2 Arduino+5v connecting together. We tried an idea to connect two lines together. After uploading example OneRevolution, it worked!

wechatimg84wechatimg85

We found Ruoxiao & Grace’s group to connect the arms. Our group did not use the potentiometer and the example Motorknob. So it was hard to make two arms co-wok together. We needed to find a proper time to connect the USB so that they could work in one direction.

wechatimg87wechatimg72

So we installed the potentiometer to the Tie Point Interlocking. And then we could perfectly control  the arms by controlling the potentiometer 🙂

 

 

 

 

  • Pens that fit the laser-cut mechanisms

 

Midterm(Moon): Chinese New Year Xiyan Cai(Ariana)

Chinese New Year (by using Processing)

Professor Moon

Ariana (Xiyan Cai)

Oct 28th 2016

I was searching for some ideas online and found a picture like this 👇 from http://www.geek-workshop.com/thread-7243-1-1.html.

screen-shot-2016-10-21-at-16-39-25

This dull can be called “Chinese Doll” and it reminded me of my hobby, Chinese Painting. So that I decided to use many Chinese elements in my project. The ideas of Chinese New Year came to my mind. As for the background, I used array to create snow. At first, I made the chopsticks move and added some moving snow 👇.

screen-shot-2016-10-21-at-17-16-20

But I realized that the project made no sense. I needed to create a story. The first idea was that this was a poor girl and had no chance to feed herself to survive. And the chopsticks without food meant that she was eager for food.

However, that was too simple as a project. I abandoned that weird idea.

As I wrote, I wanted to add some Chinese elements. And the red clothes of the dull reminded me of Chinese New Year. I added some elements like lanterns, fireworks and some typical plants in winter 👇.

screen-shot-2016-10-25-at-10-13-28

If mouse is pressed, the fireworks will work and the expression of the girl will change. The code is written in the first box at the bottom.

After that, I thought the picture was too drab. I then added a piece of calligraphy whose theme is Chinese New Year.

screen-shot-2016-10-25-at-10-11-08

In addition, I realized that only pressing mouse to change all the elements’ states is too simple and also made no sense. So I limited the squares of mouse pressing. Finally, there will have different effects if mouse is pressed in different places. And I wanted to make the lantern bright. At first, I drew an ellipse beneath the lantern but it was not like the light so that I added an ellipse above it and used transparency.

Finally, to make is more complicated, I inserted a piece of music. It was in English, showing culture difference between western countries and China. I met some problems. I wanted to use the keyboard to control the music, playing or stopping. But I can only achieve to play.

After asking several professors, the code was changed into this 👇.

screen-shot-2016-10-25-at-11-00-53

Thanks to all the efforts professors and I made, the project was done. The code is here

[ gist id = “2d0248bce6cf8112ba4cbd773901cc11” ]

 

 

Carnival(Moon): maker carnival Xiyan Cai(Ariana)

2016-10-15-111950

This is a remote power. These boxes are the power and can be installed in a specific board and can be removed. Sometimes we complain about that the power is too far from us and this invention perfectly avoid this problem.

2016-10-15-110856

This is a personal DIY studio. The inventor made various transistor clocks which are so beautiful!

2016-10-15-110053

NYU Shanghai IMA! Interestingly, he did not notice that I was from NYUSH and explained a lot to me.

2016-10-15-102850

I was experiencing VR to watch a movie.

2016-10-15-095203

It is a machine that can support the development of plants and goldfishes. There is a power that provides voltage.

2016-10-15-092302

These funny things are made by 3D printers.

2016-10-15-093031  2016-10-15-092642 2016-10-15-092504 2016-10-15-092328 I

I drew something and wrote my English name by using the VR. It was a little bit hart but truly interesting.

 

 

 

 

Lab5(Moon):Yuxin Zhou & Xiyan Cai’s Group Color Selector and Led Controller

Arduino:

processing:

3-pic4-pic 2-pic 1-pic

Yuxin and I cooperated to transmit information from Arduino to Processing and from Processing to Arduino.

First, we used the read information from Arduino and switched it to the processing. In processing, the background color changed according to the Arduino. To vary the colors, we made the “color” decided by a or b.

In the next exercise, we used an example to make the LED light. Moving the mouse over the background, the voltage changed into “HIGH” and the LED lit.

Thanks to my partner, he helped me a lot on the basic knowledge and the lab. As well, thanks to the Professor Dan, she figured out the problem in our circuit by trying a lot of methods, from which I learnt a lot.