Week 8: Response to “The Danger of a single story” (Szetela)

After watching a video, I came clear to me that how dangerous the single story of a person can be. it can impact people with false facts and build stereotypes. when we listen to only a few or a single story of any events, we might unintentionally make a false assumptions and misunderstand the whole truth or other aspects. It is not surprising to me to see how much I agree with Chimamanda about this idea. Because this happens always but we don’t often take a serious step to solve it, what she said in the talk take me to a further step to first realize the danger of our “single story” and therefore we need to try to keep a diversity and openness to the whatever stories that we hear.

Sonic Environments| Asiya Gubaydullina| Sense of a Person

For this project, our assignment was to collect sounds at the water village during the field trip and create a piece titled under a sense of a person. Ellie and I decided to work in a pair and make a project about a fictional figure. At the water village, we collected the sounds of traditional Chinese instruments since we were lucky to pop to a music shop and talk to an owner. He played the instruments for us and talked about the history of the shop. However, our Chinese is not as good so out of 20 minutes recording, we didn’t understand much. The choice we had was either to translate everything or utilize the music sounds. We were actually more interested in the latter.

As a result, we came up with a story about Chinese maiden who lived in the water village. She was obviously very beautiful and very different from the rest of the villagers. She wished for adventures and big love. In order to show that difference, we used the instruments sounds to describe her and mundane sounds to describe the villagers. Finally, one day the waiguo ren sailor arrived at the village; he was a melody as well. We used piano sound to describe him while the maiden was described with traditional Chinese instruments sounds. So, everyone had a distinct identification sounds.

Overall, I believe this project was rather interesting to work on. It turned out to be an entertaining creative outlet we very much enjoyed. After Ann’s comments, we have a few corrections to make and polish it out.

Midterm Documentation

Title: Jump Drake

By Zayna Quader

Elevator Pitch: An interactive installation where the individual attempts to make a stick figure jump over a moving car, which they are also controlling, resulting in either the sound of triumph or of defeat.

Description: The player has two controllers–the switch located on the arduino, and the keyboard located on the computer. When the player clicked the arduino switch, the car on the animation moves forward, and the green light on the arduino turns on. When the player touches a key on the keyboard, the stick figure jumps, and when the key is released, the figure returns to the starting position. If the car crashes into the stick figure, the stick figure screams and the game resets. If the stick figure jumps over the car, the player is rewarded with a “yes” sound.

Project Demo

Final Product


Conceptual Development


Originally, there wasn’t a lot to my idea. I was planning on just making a car that moved when a button on the arduino was clicked, but once I finished that, I felt like I could do more, and make the game more interactive (as explained in prototypes section)



For my research, I used Getting Started with Processing e-book, and I used processing.org. I used a few functions I was unfamiliar with, so I had to look up how to use them on the website and in the book. There were also a few functions we used at the beginning of the semester that I didn’t fully remember, so I had to research those again as well.

Technical Development


The design started out pretty simple. My initial goal was to make a car-type shape that was on a road, and had some sort of background of a sky and grass.


The first thing I did was make a blue background for the sky.


Then, I added a green rectangle for the grass.


I added a grey rectangle to represent the road.


A yellow rectangle to make the road look more like a road.


And finally a car.


After I had done all that, I decided that i actually wanted to have the car driving at night, which resulted in a new look.


I then decided that I wanted to add some blinking stars, and maybe change the size of the car, which resulted in the final look and background.


At this point, I felt like my project should have something more, so I added a person, and I made him jump if a key is clicked.


And finally, Drake.

And here is a photo of my final arduino set up:


In total, while making the objects was easy, it took a while to make sure everything was in the position I wanted it to be in and to pick the size of each object.



Materials: Wires, 1 red LED, 1 green LED, 2 220K resistors, 1 10K resistor, and 1 switch.



In terms of the arduino, I had to make 2 LEDs light up and make a button switch between them. I used this schematic to set that up, except I had 2 LEDs instead of one. I also needed the arduino button to make the car move, so I had to make sure that information was sent from the arduino to processing.



Prototype 1:

The first prototype I made was just the car moving across the screen, as well as the LEDs on the arduino changing from red to green, as my original goal was to animate a car that moves when a switch is pressed on the arduino, and to have the switch change between a green and red LED (aka stoplights without the yellow one)

Prototype 2:

However, this evolved quickly, and I added the person to to the mix. Then I decided to change the animation so that if the person and the car are in the same position, the car would reset in its initial position.

Prototype 3:

Then, I decided to make the person scream if they were hit with the car.

Prototype 4:

And then, I added a “YES” noise if the person jumped over the car. I also had the song “Little Red Car” playing in the background after this trial, but quickly scrapped it as the song is really annoying after listening to it more than once. To do that, I had to download the music library, which came in handy for the final prototype/ product.

Prototype 5/ Final:

At this point, I started working on my documentation, thinking I was done. However, when I called my project “Jump Man”, it reminded me of Drake. So, I decided to add some Drizzy to the background through his song Jump Man. After I added that I decided it would be funny to make the stick figure Drake, and after a conversation with someone, renamed the game “Jump Drake”.

Lessons Learned

User Test

Through user testing with myself and others, I figured out that the car and the person had to move at certain speeds in order to make it possible for someone to jump over the car. I also learned that people like using Drake more than a stick figure through the addition of his head and the increased interest in my project based on this change.


Besides the constant evolving and changes to my project (aka the failures of previous versions) there was one major issue: once Drake jumped over the car for the first time, the car would stop recognizing the “crash” into Drake, and stop resetting, as well as playing the screaming noise. While I did not have a chance to fix this before the project was due, I did speak to Dan afterwards, who said that I should try collision and maybe it would fix this problem.

Trials and Errors

I had a lot of trial and error for this project, most of it having to do with the position of objects and the speed of Drake and the car. Initially, I had Drake going up at +20 and the car moving vertical at +5. This however, make Drake jump too fast, and he would be back on the ground (possibly for the second or third time) by the time the car made it to him. After a few more changes–first Drake to 15 then 10, then the car to 10, 6, and 8–I was able to make them each a speed that still provided a challenge while making the game fun.

Another thing I had to figure out through trial and error (besides the location of every shape in the animation) was the car’s position relative to Drake for the crash period as x+290 (the position of the left leg of Drake) was not working. So, after a bunch of trial and error, I settled on x+94 for the crash location of the car relative to Drake.


Make the hardware and the animation separately and then connect them. I did this and it helped immensely because the entire time that I was animating processing, I knew that if there was an issue, it would be in the processing code and not the arduino code because I knew the arduino code was 100% accurate.

Make all the parts in processing and then go over them with pictures, etc. Again, you then know it all works, and you don’t have to pour over your entire code to make sure everything is working–just the new code.


Thanks for reading!



PImage img;
import processing.serial.*;
Serial myPort;

import processing.sound.*;
SoundFile soundfile;
SoundFile yaas;
SoundFile jumpMan;

int x, y, r, x2, y2, r2, pts;
int val;
int a= int(random(100));
int b= int(random(50));
int c= int(random(200));
int[] numbers = new int[15];

void setup()
  size(500, 500);


  //Load a soundfile
    soundfile = new SoundFile(this, "scream.mp3"); //scream for when person is crashed into
    yaas = new SoundFile(this, "yes.mp3"); //yes for when person jumps over the car
    jumpMan = new SoundFile(this, "jump.mp3");
    jumpMan.play(); //play jumpman in background

  String portName = Serial.list()[2]; //
  myPort = new Serial(this, portName, 9600);

} //end set up

void draw()
  background(15, 59, 104); //blue sky
  stroke(255, 255, 255);

  for (int i=0; i<numbers.length; i++)
      fill(a, b, c);
      int m=int(random (500));
      int k=int(random(500));
      ellipse(k, m, 10, 10); //stars

  fill(75, 191, 46);
  rect(0, 250, 500, 500); //green grass

  rect(0, 320, 500, 100); // grey road

  fill(247, 240, 25);
  rect(0, 365, 500, 10); //yellow line on road

  line(x2+300, y2+42, x2+300, y2+75);//person body
  ellipse(x2+300, y2+25, r2*2.3, r2*2.3); //person head (beneath drakes)
  image(img, x2+260, y2-50); //drake's head
  line(x2+300, y2+75, x2+290, y2+100);// left leg
  line(x2+300, y2+75, x2+310, y2+100);// right leg
  line(x2+300, y2+50, x2+310, y2+70);// right arm
  line(x2+300, y2+50, x2+290, y2+70);// left arm

  fill(255, 0, 0);
  rect(x, y+50, 100, 50); //car

  stroke(255, 255, 255);
  ellipse(x+20, y+97, r*2, r*2); //back wheel

  stroke(255, 255, 255);
  ellipse(x+80, y+97, r*2, r*2); //front wheel

  if (keyPressed) //make the person jump

    if (y2>height || y2<0) //if the person is higher than the edge of the screen
  } //keyPressed

  } // make person's position always the bottom when button not pressed

//make the car reset when it makes contact with the person

  if(x+10==x2+290 && y==y2)
    soundfile.play(); //play scream if person gets hit
  }//end of car crash
  //if car doesn't crash
  else if(x+10>x2+290 && y==y2 && keyPressed)


//end car reset working

//make the car move

  if (val==72)//this is the on number that comes through
    if (x>width || x<0) //keep car from going off screen too much
  //get info from arduino

  while ( myPort.available() > 0)
    println(val); //lets you know what came through
  }//end while my pirt
} //end of draw


//Pairs with Proccessing: MovingCar

// constants won't change. They're used here to set pin numbers

const int buttonPin = 2;     // the number of the pushbutton pin
const int ledPin =  13;      // the number of the green LED pin
const int RedPin =  12;     //red LED
//const int buzzerPin =  9;      //buzzer button

// variables will change:
int buzzButtonState=0;
int buttonState = 0;         // variable for reading the pushbutton status
void setup() {


  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);
  pinMode(RedPin, OUTPUT);

  // initialize the pushbuttons as an input:
  pinMode(buttonPin, INPUT);
  //pinMode(buzzerPin, INPUT);


void loop() {
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);
  //buzzButtonState = digitalRead(buzzerPin);

  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // turn LED on:
    digitalWrite(ledPin, HIGH); //turn green light on
    digitalWrite(RedPin, LOW); //turn red light on
    Serial.write('H'); //send bytes
  } else {
    // turn LED off:
    digitalWrite(ledPin, LOW);
    digitalWrite(RedPin, HIGH);
   Serial.write('L'); //send bytes to processing


Interaction Lab-Midterm Project-Antonius-Frank Xiang

Work mode:
Work in pairs. (Partner: Leslie).
Materials used:
A breadboard, an Arduino, 8*wires, 2*10k resistor, 2*flex sensors,2*FSR sensors, a pair of gloves.
Softwares used:
Arduino, Processing.

(1) Title:
Magic Glove

(2) Description:
This project combines most lessons that we have learned so far: Arduino, Processing, the use of sensor, and serial communication. It is inspired by the amazing visual effects in Marvel’s Superhero film, Doctor Strange, where Dr. Strange, along with other characters, used super cool magic matrix to fight with each other. We tried to make our own magic effects in Processing, and used a gloves attached with two flex sensors (the flex sensor worked well at first, and then it was broken, so we changed into FSR sensor) to control the magic effect. For sure, there is no way to obtain the ability that Dr.Strange has in films, but with the help of Arduino and Processing, we can fulfill the hero dream in our hearts.

(3) Demo:
The best way to show our project is using a video for sure, since it is really hard to show the beauty of those magic matrix merely in words. I cut this video the night before presentation, used the music from Doctor Strange to create a magical sense. As you can see in the video, once you press the FSR sensor attached on the glove, the magic matrix will show on the screen, and each sensor represents a different pattern.

As the demo video is quite large, I will provide two (one directly uploaded MP4 file, another YouTube, in case it doesn’t work.)

Continue reading


// I gave comments in all the parts of the code except pattern2() to help you understand
// Feel free to reach out to me to ask questions about my code
// Thanks to all amazing IMA staffs who helped us in different stages
// Antonius, Luis, Moon, Aven. Without you, this project will never be possible without your help

//*********************************Coding Part*********************************************

// First part, set up
import processing.serial.*;
Serial myPort;  // Create object from Serial class
int val;      // Data received from the serial port
int preval;

int counter, counter1, counter2;
float curvesin, curveSin;
float curveaddition, curveAddition;
int step = 15;
int x, y;
boolean drawMagic=false;
// boolean makes drawmagic() function possible to be controlled by key
PFont myFont;
// this is related to the text that we use

void setup() {

  printArray(Serial.list()); // In this case, I can see the port number, which is 1 
  String portName = Serial.list()[1];  
  myPort = new Serial(this, portName, 9600);

  smooth();// Draws all geometry with smooth (anti-aliased) edges.
  size(600, 600);
  counter = 0;
  counter1 = 0;
  counter2 = 40;
  curvesin = 0; 
  curveaddition = 0.1;

  // import font "AppleM yungjo" into the system
  myFont = createFont("AppleM yungjo", 50);
  textAlign(CENTER, CENTER);

// Second part, call either pattern1 or pattern2 according to arduino
void draw() {
  if ( myPort.available() > 0) {  // If data is available,
    val = myPort.read();         // read it and store it in val

    //make sure everytime the background go back to black
    if (preval!=val) {

    if (val==1) {
    if (val==2) {

//Frank's pattern
void pattern1() {

  // change the color mode in accordance with the color mode that lesie uses
  counter+=30; // increase counter by 30 every time, 
  noFill(); // make sure the pattern doesn't fill in 

 // the orange color similar to doctor strange
  stroke(255, 100, 20);

 // the γ circle
  //pushMatrix() and popMatrix() are used in conjunction with the other 
  //transformation functions and may be embedded to control the scope 
  //of the transformations.

  fill(255, 255, 255, 20);
  // (255,255,255) shows the white color, 20 shows the transparency.
  translate(width/2, height/2);
  //translate it in the middle of the screen so it can rotate well

 //rotate in the radius of counter+40, while counter = counter + 30.
 // if counter exceeds 360, for example, 390, it equals 30)

  text("γ", 30, 152); 
 //30, 54 are x,y coordinates
 //text imported from "AppleM yungjo"


  // the Dodecagram consisted of triangles
  stroke(255, 100, 20);
  triangle(127, 200, 473, 200, 300, 500);
  triangle(127, 400, 473, 400, 300, 100);
  triangle(200, 132, 200, 472, 500, 308);
  triangle(100, 300, 400, 473, 400, 124);

  //call xyposition() to check the xy coordinates, only used when write processing
  //comment it out so it will not be used during presentation

  fill(0, 2); 
  // 0 is the rgb-color variable
  // 2 is the alpha-opacity of the fill
  noStroke(); // Disables drawing the stroke (outline). 
  rect(0, 0, width, height);

  // the several circles used
  ellipse(width/2, height/2, 100, 100);
  ellipse(width/2, height/2, 200, 200);
  ellipse(width/2, height/2, 300, 300);
  ellipse(width/2, height/2, 400, 400);

  // the flower circle outside
  // pushMatrix inside pushMatrix
  translate(width/2, height/2);
  stroke(255, 100, 20);
  pushMatrix();// push another matrix
  scale(1.92); // increase the scale by 1.92
  translate(100, 20);//translate (100,20) to (0,0)
  rotate(radians(110));//translate staring at (0,0) to 110 degrees
  arc(0, 0, 28, 20, PI, PI+HALF_PI);
  arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
  arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
  arc(0, -20, 28, 20, 0, HALF_PI);

  // the smaller flower circle inside
  // pushMatrix inside pushMatrix
  translate(width/2, height/2);
  counter2+=140; // make sure it has different rotation speed with others
  stroke(255, 100, 20);
  pushMatrix();//push another matrix
  scale(1.05);// increase the scale by 1.05
  translate(100, 20);//translate (100,20) to (0,0)
  rotate(radians(110));//translate staring at (0,0) to 110 degrees
  arc(0, 0, 28, 20, PI, PI+HALF_PI);
  arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
  arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
  arc(0, -20, 28, 20, 0, HALF_PI);

  // the larger flower circle inside
  // pushMatrix inside pushMatrix
  translate(width/2, height/2);
  stroke(255, 100, 20);
  pushMatrix();//push another matrix
  translate(100, 20);//translate (100,20) to (0,0)
  rotate(radians(110));//translate staring at (0,0) to 110 degrees
  arc(0, 0, 28, 20, PI, PI+HALF_PI);
  arc(28, -20, 28, 20, HALF_PI, HALF_PI+HALF_PI);
  arc(28, 0, 28, 20, PI+HALF_PI, PI+HALF_PI+HALF_PI);
  arc(0, -20, 28, 20, 0, HALF_PI);

  // the blue rotating circle inside
  pushMatrix(); //
  translate(width/2, height/2);
  stroke(0, 100, 255);
  point(0, 70);

  // the spinning rectangle
  translate(width/2, height/2);
  counter1 += 8;
  stroke(255, 100, 20);
  rect(0, 10, 20, 20);
  translate(width/2, height/2);// translate the triangle to the center of the picture
  rotate(radians(counter*0.75));// make the triangle rotate 
  stroke(255, 100, 20);
  triangle(30, 10, 20, 30, 40, 30);

  // the blue dynamic flower part
  translate(width/2, height/2);
  stroke(0, 100, 255);
  point(0, 75+(sin(curvesin)*20));
  //point(x,y); float: x/y-coordinate of the point
  //if it is just point(0,75); then it will just be a point rotate in a circle, which I used above
  //add sin(curvesin) in the y-coordinate, 
  //thus it will give people the illusion of the sin curve 
  curvesin += curveaddition;


 if (mousePressed) {
    curveaddition = 0;
// this one is to make the blue dynamic flower stop generating and make it to form a blue circle
// so that the blue dynamic flower will not be having so many “petals”

//xyposition is created to show the xy coordiantes of each points at the top left screen
// when don't need it, just comment out xypositon(), so that it will disaapear
//thanks for chirstian to show me the code
void xyposition () {
  x = mouseX;
  y = mouseY;
  //the place for rectangle
  rect(0, 0, 100, 100);
  text(x, 45, 20);
  text(y, 45, 70);

//Leslie's pattern

void pattern2() {

  textSize(40);//the Greek letters going around the circle
  //different letters occupy different locations
  fill(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
  translate(width/2, height/2);
  text("β", 0, 170);
  text("γ", 30, 160);
  text("δ", 60, 160);
  text("η", 90, 140);
  text("θ", 120, 130);
  text("ξ", 140, 120);

  noFill();//the general shape of the patterns
  ellipse(300, 300, 450, 450);
  ellipse(300, 300, 425, 425);
  ellipse(300, 300, 300, 300);
  ellipse(300, 300, 121.132, 121.132);
  ellipse(300, 300, 150, 150);
  fill(0, 0, 0);
  ellipse(300, 118.75, 62.5, 62.5);
  ellipse(118.75, 300, 62.5, 62.5);
  ellipse(300, 481.25, 62.5, 62.5);
  ellipse(481.25, 300, 62.5, 62.5);
  ellipse(300, 118.75, 60, 60);
  ellipse(118.75, 300, 60, 60);
  ellipse(300, 481.25, 60, 60);
  ellipse(481.25, 300, 60, 60);
  rect(193.935, 193.935, 212.132, 212.132);
  quad(150, 300, 300, 150, 450, 300, 300, 450);
  fill(255, 100, 20);

  textAlign(CENTER, CENTER);

  //stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));//the four letters occupying the four small circles

  //the rotating, multiple rectangles in the middle
  translate(width/2, height/2);
  stroke(255, 100, 20);
  rect(0, 10, 50, 50);

  counter+=step;//increase 15 every time
  translate(width/2, height/2);
  stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
  rect(5, 10, 50, 50);


  translate(width/2, height/2);
  stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
  rect(10, 10, 50, 50);


  translate(width/2, height/2);
  stroke(map(frameCount % 255, 0, 255, 90, 255), 255, map(frameCount % 255, 0, 255, 90, 255));
  rect(15, 10, 50, 50);
  if (mousePressed) {

Midterm Project

Scary Toy Story

A Teddy Bear that becomes animated when you interact with it.


For this project I was inspired by the film Toy Story and I wanted to make my own animated toy. The teddy bear can perform two actions depending on what the child does with it: if the child hugs the bear then the eyes will turn on and blink and if the bear gets picked up then the bear’s tail will start rotating. In order to achieve this I built on what I already done for the stupid pet trick show.

Material Used: Arduino Uno, 2 breadboards, 2 red LEDs, an accelerometer, an ambient light sensor, a 130 motor.

Conceptual Development: 

I intended to have the bear vibrate when picked up but there was not enough room inside the bear to have all the wiring with the breadboards and the Arduino as well as the motor with a cardboard attached onto it. Thus, I decided to change my original idea and have the motor placed at the back of the teddy bear as a tail that move when picked up.


This was my first sketch of my project. I ended up not using the same sensors and not placing them as shown but this is what I first intended to do.

 Technical Development and Challenges
I used the same code that I had previously done for the stupid pet trick show and then found the code of the sharp distance sensor on the Arduino website.
Once the code was uploaded and working I needed to find a way to make the bear vibrate.
I did not know how to do the circuit for the motor and the accelerometer so Antonius and Moon helped me.
Screen Shot 2017-03-24 at 13.38.24
The circuit I used to connect the motor.
Screen Shot 2017-03-24 at 13.36.48Screen Shot 2017-03-24 at 13.37.32
In order to connect the motor correctly on the breadboard and Arduino uno I used a small 6v DC motor.
 A 2222 transistor
A 4001 diode and a 270 resistor.
I learned how to use a transistor.
The base has to be connected with the resistor to digital pin 9 on the the Arduino
The collector which is in the middle and is connected to 5v on the breadboard with the diode. The emitter is connected to ground on the breadboard.IMG_6195
I then found the code for the motor and uploaded it.
The only issue was to use the code for the motor simultaneously as the code for the LEDS and find a way to code the motor in relation to the the distance sensor.
The distance sensor was not working because it was too complicated to find the values that would determine the code for triggering the motor because the distance sensor gives too much data and did not read the values in a way that would allow me to use these values for my code.
Thus I decided not to use the distance sensor anymore but use conducting tape as a switch instead. I cut a piece of cardboard on which I placed some conducting tape to make a stand for the teddy bear.
The problem is that using conducting tape would force me to put the bear on a surface with conducting tape, it would no longer look like a normal teddy bear. Thus I decided to change all of my wiring and most of my coding to keep the real aspect of the bear.
This is the distance sensor I was using.
Thus I chose to use an accelerometer instead of a distance sensor to activate the motor and to change the light sensor into something more intuitive and less visible.  I stopped using the digital light sensor and replaced it with an ambient light sensor.
The problem is that the light sensor that I used to turn on the LEds in the eyes is connected on the same pins as the accelerometer (pin A5 and A4).
To solve this issue I decided to change the light sensor used: instead of using a digital light sensor I am now using a ambient light sensor.
Once all of the wiring was changed and the new code uploaded,  I had an issue with  the motor which was not working. It ended up being a problem of wrong wiring. The light sensor worked correctly because it was giving some output value but it was not linked to the LEDs because I had forgotten to update the PIN number I was using on the code.
I had a lot of trouble to have the wires stick on the breadboard and on the arduino because every time I would try to insert everything in my teddy bear it would move  a wire and I would have to start all over again which happened about five times.
I tried to tape everything together but it did not work out.
I figured that using a cardboard on the motor for vibration would not work inside the bear so used some polyester instead.
When I was using cardboard on the motor.
Then I glued everything so that it would not move within the bear but then both LEDs blew.
After changing the LEDs I glued everything one by one, checking each time if everything was still working. Then I put the breadboard with the LEDs in which I glued onto the inside of the bear.
Once I had verified that all was working, I decided to insert the rest of the wiring into the bear.
I realised that I could not use the motor inside because it would take up too much space and I would not have had enough space for the Arduino and the other breadboard.
Thus I changed my final aim by making the motor the tail of the bear: when the bear is moving (it gets picked up) the the tail moves. I glued the motor in the bear and then because that wasn’t enough I sewed it up. I left the ambient light sensor out and glued it to the bow in front of the bear.
And then all worked!!!!
(I am sorry for some reason the videos can only show up as links…)

Interaction Lab Midterm: Yun-Jui Hsieh & Maya Wang, Professor Mikesell

The Pharaoh’s Escape: A Maze Stimulation

This is an Ancient Egyptian-themed maze game controlled by a joystick. The objective of the game is to help the Pharaoh escape his tomb within the time limit.

Within the game, there are three parts: story, gameplay, and win/lose. The game starts off with a title screen, which one controls by clicking the button to move on to the story. After one finishes the story, the gameplay starts. Using the Scarab-themed joystick, the player guides the Pharaoh through the maze. If the player completes the maze within 99 seconds, a win screen will be displayed. Vice-versa, if one loses, a Game Over screen will be displayed, along with the option to restart the game and try again.


Since Jerry (Yun-Jui) came up with the idea of making a maze, he oversaw most of the concept. Originally he wanted to create a triangular maze because a square one was not as interesting. From there, the brainstorming process went: triangle – pyramid – Ancient Egypt – Pharaoh. Thus, we made the maze Ancient Egypt themed.

Creation (Processing):

Drawing the maze and Pharaoh was the first step in creating the game. The first maze Jerry drew had diagonal lines, but that later proved to be very difficult when implementing collision detection.

So we created a second maze that had rectangular paths, but a triangular shape. This way, the second part of the code could be made possible.

Collision detection also proved to be very difficult, but with the help of Jiwon, we were able to have a working color/collision detector.

Game logic and mechanics came afterwards. We needed to code a start screen, story screens, timer, and a win/lose mechanic. To carry these out, we created separate functions for each aspect of the game. Originally, there was no way to lose the game, so we added a timer to make the game more interesting. After including a timer, we were able to make a lose screen, and on that lose screen we added a restart button to allow the player to play again.

Creation (Arduino):

I was mostly in charge of the Arduino aspect. I originally wanted to make a tilt-sensing controller, but I couldn’t figure it out to make a neutral state. Afterwards, I was thinking of other ways of making our game interactive, but not boring. I had never used a joystick before, so I decided to give that a try. Using only an example joystick code, I was able to make a functioning 4-direction controller.

Since the original maze used the keypress function to control direction, I had to figure out the serial communication between the joystick and the maze controls. Switching out the keypress for serial values was very difficult, but I was able to connect them successfully without any external help in the end.

After the logistics were ironed out, I went on to make the joystick visually appealing and relevant to our game. Since the symbolic meaning of a scarab beetle in Ancient Egyptian culture represented rebirth, I thought it was fitting as our Pharaoh character was being “reborn” after escaping his perceived death. I housed the joystick in a box propped up with styrofoam, then covered it with a brick pattern with a scarab beetle printed on it.

Final Product/Reflection:

Despite the many problems we faced when coding, our game project was still a success. This was our first time creating a game from scratch, so I’m very proud of the work we did. I didn’t realize how many aspects went into creating even the simplest of games, such as design or game logic. We even had our friends test our game to make sure it worked well, like if we gave enough time or if it was too hard to win. Our final product worked well, and I learned a lot when working on it.

Below is a video playlist of the multiple stages of our game’s development.

int joyPin1 = 0;                 // slider variable connecetd to analog pin 0
int joyPin2 = 1;                 // slider variable connecetd to analog pin 1
int value1 = 0;                  // variable to read the value from the analog pin 0
int value2 = 0;                  // variable to read the value from the analog pin 1

void setup() {

void loop() {
  value1 = analogRead(joyPin1);
  value2 = analogRead(joyPin2);

  int val1 = value1 / 100;
  int val2 = value2 / 100;


//Coordinates (Processing)
float[][] coordinates = {

float[][] coordinates2 ={

float[][] coordinates3 ={
  //out layer
  //lines inside horizontal from bottom
  //lines inside vertical from bottom

class Maze{
  float x1,x2,y1,y2;
  Maze(float u, float i, float o, float p){
  void update(){
  //void checkCollision(float centerp, float centerq){
  //  if(x1 < centerp && x2 > centerp && y1 < centerq && y2 > centerq){
  //     println("centerp: " + centerp); 
  //  }


class Pharaoh {

  Pharaoh(float p, float q) {

  void render() {
    //draw a pharaoh
    fill(255, 196, 56);
    quad(p, q, p-5, q+48, p+15, q+48, p+10, q);//outside layer

    fill(0);//black part of the face
    quad(p-4, q+40, p-5, q+48, p, q+48, p, q+40);//left down
    quad(p-2.5, q+25, p-3.5, q+35, p, q+35, p, q+25);//left second
    quad(p, q, p-2, q+20, p, q+20, p, q);//left top
    quad(p+14, q+40, p+15, q+48, p+10, q+48, p+10, q+40);//right bottom
    quad(p+12.5, q+25, p+13.5, q+35, p+10, q+35, p+10, q+25);//right second
    quad(p+10, q, p+12, q+20, p+10, q+20, p+10, q);//right top
    rect(p, q, 2, 15);//top left
    rect(p+4, q, 2, 15);//top middle
    rect(p+8, q, 2, 15);//top right

    //draw eyes
    ellipse(p+3, q+22, 3, 9);//left eye
    ellipse(p+7, q+22, 3, 9);//right eye

    //draw mouth
    fill(255, 1, 1);
    rect(p+3, q+30, 4, 15);//mouth

//Arduino Code
int joyPin1 = 0;                 // slider variable connecetd to analog pin 0
int joyPin2 = 1;                 // slider variable connecetd to analog pin 1
int value1 = 0;                  // variable to read the value from the analog pin 0
int value2 = 0;                  // variable to read the value from the analog pin 1

void setup() {

void loop() {
  value1 = analogRead(joyPin1);
  value2 = analogRead(joyPin2);

  int val1 = value1 / 100;
  int val2 = value2 / 100;


Midterm Project: Draw your Life

Due Date: March 30, 2017

Instructor: Professor Dan

Lab Partner: Jacob Park

Title: Draw your Life

Elevator Pitch: A drawing program that paints using color sensed straight from real life.

Materials:  Arduino, Processing, color sensor, 4 jumper cables, USB cable, cardboard box, masking tape, box cutter


We connected a color sensor to the drawing program, so the color sensor would send the RBG values from arduino to processing. Our drawing program used these values to paint the same color detected by the color sensor. Aside from the different colors, we could also change the size of the paintbrush and we also had a eraser tool that could also change sizes.

Demo of Project:

20170323_165912  20170323_171505

Conceptual Development:


The idea of a color sensor, was just a random idea among many other ideas. When we were brainstorming during class, I randomly said that I wanted to create a color sensor and have that color display in a screen. However, I didn’t know if that was within my capabilities nor if we had any color sensors, so I tossed that idea aside. Before deciding anything, I decided to partner up with Jacob and we spend some time brainstorming before coming to a conclusion. As I was brainstorming, I kept remembering about the color sensor and though that I could develop it if we put the color values into a drawing program. So I brought it up with Jacob and he found my idea interesting. We confirmed if we had a color sensor, which we had, and moved on to it.

Also, throughout the project, we were still thinking of ways to develop our project and make it have more functions. We would consult different people and even thought about using leap motion, but since we were going to learn about it later on, we decided to add other functions. Since we were making a drawing program, we ended up thinking that it would be more important to have different paintbrush sizes and an eraser, so we added that into out project.


At first, the color sensor was very complicating because we could not get one working. The fellows were also researching it and helping us get a color sensor working. As for the color sensor, we received a lot of help from the fellows and we were finally able to make something out of it. Based on their research, we needed to download a library and connect the right cables.

After finishing the color sensor, we got some help for serial communication. We looked at previous class presentations and had fellows help us. However, since the library contained a lot of information and we went back to Dan’s examples, it was easier to understand and add a few data. We didn’t have to add a lot because we had an example from before, but we added different values for the color sensor and had it work.

As for the processing, it was the harder section and we had to do more research because there were a lot of moments we didn’t know which function we had to use. We had our ideas and place and knew which functions to use, so we used a lot of Dan’s presentation on mousePress and keyPress, as well as, building new functions as stepping stones. However, rather than researching, we also made a lot of inferences based on what we knew. Sometimes it would work, but many times we got stuck and had to receive help.

At first, we a fellow told us that we would have to find a way to stop our color sensor from inputting values all the time. So we decided to find a way to turn it on and off. As we were choosing between a switchbutton and the mouse right click, we decided that the mouse right click would be less messy and more efficient. We were introduced to the function mouseClicked() and were able to read the RBG values when the mouse right was clicked.

Then, we also wanted to draw only when the left mouse button was clicked. So we created another function called mousePressed(), but since we had mouseClicked() we had to differentiate between the right and left mouse click. To differentiate between each mouse took a while even with Dan’s presentation, but with time and help we were eventually able to solve the problem. We also added more into the draw function and added a line to the x and y position.

Then, we decided to add different sizes of paintbrush and wanted to use the keyboard arrows to change the sizes of it. We created a new function keyPressed(), looked at Dan’s presentation and CODED it. We added an int x and made it so that every time we pressed the right arrow it would increase and the left arrow would decrease.

Lastly, we added an erase and it was more confusing because we had so many things in our code. However, we decided that we would draw the same color as our background, white. So we made it so that when we pressed the letter e, we would draw with a white line. However, we put it in the same function as draw, so we noticed later that these two functions were colliding with each other. After we found out that, we separated it. Even then, we also had to add mousePressed() into the eraser because we wanted the eraser to work when we clicked the left button. After all these problems, we were finally able to finish it.

Technical Development: 

Since our project was made mostly on processing, the technical part was not too complicating. I knew I wanted to make it more organized by putting it in a cardboard box, so I went to the recycling room and saw which options of boxes I wanted. After picking a bigger box and cutting it into a smaller one, I also added necessary holes for the color sensor and for the cables. I noticed that I had to create more holes than I thought because of the structure of the color sensor, but it was a easy change. The box was still bigger than what I wanted, but it looked a lot nicer and easy to carry.

Lessons Learned:

I learned a lot about serial communication and the different functions in processing. As for serial communication, I learned how Serial.print would write out the different values we wanted to know and how it was named sensorvalues so we could use it in processing.

However, I understood a lot more about processing than anything else. We had a lot of failures in our side and had to try many things before we succeeded, but still managed to finish it. Through my problems, it would be good just to remind ourselves about separating each action into different functions. Also, that mousePressed and mouseClicked are different functions. To learn more about the key board functions, and just how processing works. And it is important that these can be learned only by practicing and doing it yourself.

// IMA NYU Shanghai
// Interaction Lab

 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html

int erase = 0;
import processing.serial.*;
int red, green, blue;
String myString = null;
Serial myPort;
int myMouseButton;

int NUM_OF_VALUES = 3;   
int[] sensorValues;      //this array stores values from Arduino
int x= 2;

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


void draw() {
  erase ();

  if (mousePressed && (mouseButton == LEFT)&&erase==0) {
    stroke(red, green, blue);
    if (x<0) {
    } //stroke weight should not be negative

    strokeWeight (x); 
    line(pmouseX, pmouseY, mouseX, mouseY); //draw if left mouse button is clicked

void erase() {
  if (keyPressed) { 
    if (key=='e'&&mousePressed) { // eraser if 'e' is pressed
      erase =1;
      stroke (255);
      line (pmouseX, pmouseY, mouseX, mouseY);
    } else {
      erase = 0;
    if (x<0) {
    } //stroke weight should not be negative
    strokeWeight (x);   //strokeWeight changes for erase

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

  // 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]);
//read values only when the mouse's right button is clicked
void mouseClicked() {
  if ( myMouseButton == 1) {
//draw when LEFT Button of Mouse is clicked
void mousePressed () {
  if (mouseButton == LEFT) {
  } else {
void keyPressed() {
  if (key == CODED) {
    if (keyCode == RIGHT) {    //Make Stroke thicker when right arrow is pressed
    } else if (keyCode == LEFT) {     //Make Stroke thinner when left arrow is pressed

 #include <Wire.h>
//#include <math.h>
#include <GroveColorSensor.h>

void setup()

void loop()
  int red, green, blue;
  GroveColorSensor colorSensor;
  colorSensor.ledStatus = 1;							// When turn on the color sensor LED, ledStatus = 1; When turn off the color sensor LED, ledStatus = 0.
  while (1)
    colorSensor.readRGB(&red, &green, &blue);		//Read RGB values to variables.
    Serial.print (red);
    Serial.print (blue);
    Serial.println ();

Video Project Proposal(Vasudevan)

Partners:Nancy and Jerry

After seeing the powerpoint in class, we decided we wanted to do a crime story/mystery. Perhaps the video will begin with a murder or just the crime scene. From the the user can choose the suspect and go through their story. The alibis of the three suspects might not necessarily be the actual truth, but some deviation from it. Since the story lines will intersect, the user will be able to guess at the end who is the actual murderer, kind of like the Clue board game. Perhaps, the ending will be different depending on if the correct suspect if chosen. Perhaps, the suspect will get away at the end if the wrong one is chosen. Either way, the truth will probably be revealed at the end. We definitely have more to discuss about the details though.

NOC Midterm Project – Kathy

Project: Patterns of Nature in p5.js

Date: Mar31, 2017

Instructor: Moon

I have always been inspired by all kinds of geometrical patterns existing in nature. For the Introduction to Studio Art course I am taking this semester, I actually used the traditional Chinese Gongbi painting technique to create an artwork, which is about celebrating the simplicity and complexity of patterns in nature.

Screen Shot 2017-03-28 at 10.20.50 PMScreen Shot 2017-03-28 at 10.20.12 PM

However, after learning oscillation in this class, I was thinking why can’t I do a project of similar concept in p5.js that allows people to freely explore geometry in just a few mouse clicks.

I did research online and found it totally feasible to create rhodonea curves in a two-dimensional coordinate system. I made some adjustments to the math formula, and here is the way I construct it:


r = s * cos(n / d * theta) + c

x = r * cos(theta) + r / p * cos(angle)

y = r * sin(theta) + r / p * sin(angle)

Imagine, hundreds of particles are floating weightlessly in a dark empty space. To a certain moment, they get attracted by some force and become part of a pattern shape. Play with different parameters to change the shape and influence particle movement. Press the space key to preview the complete pattern. If you want to observe frameRate, number of particles in the space and understand more about the curve formula, you can simply click the debugMode on the top right corner.

Screen Shot 2017-03-28 at 10.21.07 PMScreen Shot 2017-03-28 at 10.20.59 PM

I enjoyed doing this project so much, and it was exciting to see bugs fixed and features improved step by step, thanks to the support from Moon and Aven:) Below I documented a few challenges I have encountered when doing the project. Debugging is such a wonderful learning process.

  • Create gravity-free condition

My first step was to create a gravity-free physical environment for all the particles. I applied the vector and force structure we learned in class, but it is quite tricky to assign proper values to the wall and air resistance coefficients. What I did was simply testing the coefficients for many times to find the best combination.

  • Direct particles to the right position

I created the pattern display and floating particles separately, but had no clue how to put them together, and more critically, how to match each individual particle’s existing position with its target position of the pattern. The “count” and lerp() methods Moon taught me are very useful. So I let the program count for each draw loop, which records the number of target particles. Since the count value equals to the particle index value, we are able to tell each real particle in the array where the target position is. Next, the lerp() function is way more convenient than force in terms of directing particle movement.

  • Add and remove particles

When I adjusted the “t” and “step” parameters, i.e., how many times of circumference I repeat when drawing the pattern and the density of the pattern, the count value changes inevitably, which means I need to adjust the particle length so that not an extra particle stays on screen, plus every target position has a matching particle. Hence, I use if() statements to either push or pop particle when needed and it works smoothly.

  • Translate() function

I messed up with the translate function twice… and it generated so much confusion that i spent lots of time finding the logical flaw. The problem is, because I want new particles to be pushed from the center of the screen, I added the translate(width/2, height/2) to the draw loop, but I already used another translate(width/2, height/2) function when switching from the floating mode to the display mode, so there is an overlap section where I applied the translate function twice, which caused particles to stay at the top left corner when I shifted display to floating mode, and that at the bottom right corner when I shifted floating mode to display mode… I finally solved the problem by adjusting the location of translate function.

  • FrameRate issue

Due to the large quantity of particles I am generating, the frameRate stays around 20-35 when drawing sophisticated patterns. As mentioned before, I used pop() to delete one extra particle each frame instead of for() loop + splice(), because the former one is more intuitive and neater. The side effect it has is that it takes time to push and pop particles, so I need to wait a certain amount of time for the pattern to complete. It is not a big issue, but I would like to know if there are ways to improve.

Things to improve: 3D if possible?  fancier colour effect? frameRate


  1. zipfile: download
  2. concept presentation: link
  3. demo: stage

Pixilation animation, Ellie and Olesya


Here is our project. I wanted to post it on Monday but IMA website didn’t work.

We had so many cool ideas for that project but unfortunately because of the time constraints they were not realized.

I had an idea of bringing to life famous paintings, and Olesya wanted to put her flying self in Friends TV series. We had green screen only for 30 min, and it took 15 min to set it up, and then next 10 we spent on trying to capture Olesya jumping, and then we only had 5 to take picture of me screaming. I guess we should have planned and prepared better but at least we got smth 🙂

We were not satisfied with result and decided to practice pixilation technique by doing something else. So we came up with idea of M&MS, my friend was supposed to come and do professional make up for Olesya, but my friend got sick on that day, so in the end we just shoot it in the cafeteria not professionally on the random background haha.