Week 14: Final Project-Rahmon Chapoteau (Madsen)

http://imanas.shanghai.nyu.edu/~tz1180/finalproject/go.html

Project Partner: Angie

Our project was a text conversation between a hacker and a robber; the robber has a plan to rob a corrupt bank in order to save orphanages that the bank decided to take money from. We first started writing a story based on two endings: one where the hacker helps the robber, and another ending where you deceive the robber. We then made one storyline, where the options you choose do not change the reply of the robber, but only the final ending/outcome. In order to make it like this, we made a counter for the number of “good” and “bad” choices the user would choose; if the user chose more options from the “good” outcome, the robber and the hacker would successfully complete the heist. If the user chose more options from the “bad” outcomes, the hacker would deceive the robber.

image.png

Overall, I think we did a good job in the design of our web page. We wanted to make sure that we accurately represent a text conversation between a robber and a hacker. In order to do this, we made sure that we only showed the phone screen and the text conversation that was going on. The small details of the website layout -like finding a right phone size image and putting it in the middle, as well as contrasting a black background with the white phone- would help the users stay fully engaged with the text conversation between the robber and the hacker.

image.png

Another detail I really liked about the design of our website is how we had a starting “Homepage” of the hacker being informed to check his/her message. We initially did not intend to add this. We thought that it would make a lot more sense for the hacker to receive a message from the robber, and not having the hacker to wait for the robber’s message, so we decided to add this part in.

I also really liked the design of the “confidential information” pop-up, as well as the layout of the page itself as seen here:

image.png
image.png

One piece of advice we received during our presentation was to make the pop-up link within our web page instead of having it go to a different page. The viewer thought that reading the conversation grabbed their attention and interest, but having this part of the story presented in a different web page disengaged them from this immersive experience.

For the ending video/audio, I thought the best way would be to test out only using audio; I thought that if we were to show a face or outline of the robber and hacker, the mysteriousness and fascination of the robber and hacker would be gone. Instead, through audio, we encourage the user to create their own visualization of the situation that the robber and hacker are in. For this part of our project, I had to create a short storyline of each, which would then help me determine which sounds to use. For example, for the “good ending” (successful heist), I visualized the hacker “hacking into the bank security systems” to let the robber enter the bank; when the robber entered, he walked to the vault that was filled with cash and coins, which was then stashed in big bags. These bags were put in the robber’s car and driven to give back to the orphanages.

Overall, I think we did a very good job. We first started with a meaningful, interesting story, and tried to see how we can make this a project that someone can interact with, and make an impact on. One thing I would improve is the coorelation between the text conversation content and the Orphan message at the end of our project; I did not feel that our project strongly related to or gave a compelling message to save orphans; the end message did not really relate strongly with the text conversation. The text conversation mainly focused on the dynamic between the robber and the hacker, and not necessarily focused on whether the should save an orphanage.

Screen Shot 2018-12-17 at 2.24.31 AM.png

If we relate and focus our content with saving orphans and orphanages, I think this would improve the overall communication and presentation of our message to help orphans out. I like how we included information about children without a home, as well as provide way in which one can help out children in need through UNICEF.

Interactions Lab: Final Project Documentation-Rahmon Chapoteau (Leon)

One of the biggest problems I have is working for long hours, and forgetting to eat or drink. After finishing a project, I would realize that I forgot to eat lunch, dinner, or drink water. My parents would tell me that this is unhealthy, and would specifically remind me to drink water. This was one of the inspirations that helped me to dig deeper into why and for what reason it was unhealthy not to drink water; one of the main reasons was dehydration. From learning about how “Dehydration can adversely influence cognitive function and this is important when considering tasks such as studying” from a study presented by the Natural Hydration Council and reading the suggestion of how “Water should be available throughout the day and drinks should be taken regularly especially if the environment is warm” from the European Hydration Council stemmed the idea of the HydroTimer. Although I have been working hard, I was not working smart; Creating a device that would remind me to drink water would be an efficient way to solve the problem that me, other students, and other people who work hard, long hours might have.

One of my first design choices was to make my project as small and compact as possible. The first thing I did was buying an actual water bottle, and see what hardware components I could use; I decided to use the Arduino nano, and a smaller breadboard.

Then came the functionality parts, and a basic overview/walkthrough of the process I would want the HydroTimer to go through:

I would need 4 main hardware components in total: bluetooth Module, external power source, LED and Ultrasonic Sensor. I would Use Bluetooth for serial communication between Arduino and Processing; the processing part would act as a “pop-up window” that would help remind the user to drink water. The RGB LED would help tell the user whether s/he should keep drinking, and when s/he is done. The Ultrasonic sensor would measure how much water is in the cup.

 

 

It was difficult learning to set up the bluetooth, but once I understood how a few things worked (like how the Bluetooth could only receive 3.3V, which was the reasoning behind creating a voltage divider) and help from many professors and fellows, I got the bluetooth running smoothly. I then used the external power source to test out to see if the Arduino would read the values that the bluetooth is sending:
I then added and programmed the RGB LED, which would tell the user whether they should drink, and when they should stop drinking based on the distance the ultrasonic sensor was detecting:
I set up the ultrasonic sensor with ease, and copied code from a a tutorial website. Here is a credit to Rui Santos, the guy I copied the code from: https://randomnerdtutorials.com/complete-guide-for-ultrasonic-sensor-hc-sr04/ .
The next step was to fabricate the container. With most of the help from professor Leon, I was able to create a circular container that would sit on the cup.
Some of the IMA professors suggested that I try to attach everything to a perfboard. Although I tried to do so, it took a lot more time than necessary to solder a few wires and make the connections; I went back to using the small breadboard. If I had more time, I would try to use the perfboard.
Unfortunately during the last few days before the final presentation, the Arduino nano broke, so I had to use the Uno. Luckily, it fit perfectly inside of the 3D fabricated container.

I tried to use a logic using booleans in order to create both a timer and number of times that an RGB LED would blink. For the presentation, I used the code that I originally created, telling the arduino to keep blinking red until the “inches” (ultrasonic sensor value) reached a certain point, which would then turn green.

The pop-up Processing sketch served to remind the user to drink water, and gave visual feedback on how much the user drank, and whether it was sufficient enough. When it is sufficient enough, the program would say “Great Work!”. Since most students and workers use portable digital devices, I thought I would implement my project with this aspect, which might help remind the user to drink better than having an LED light that flashes red; if you forget the bottle that has the HydroTimer on it, at least it still provides value by reminding the user that it is time to hydrate.

Explain in further detail what your project aims to do. Flesh out your project process through careful description, analysis, and with specifics.  What steps will you take to empathize with your intended audience and analyze their needs/requirements? Compose a detailed project plan that explains each of the steps you will take in the next few weeks to deliver your project.

In the process of creating my project, Professor Rudy and Professor Marcela wanted to see more of a story and compelling reason behind my project. This helped me think more about how my project could save someone who is living a difficult life, or is going through a difficult situation. One of the ideas for the usefulness of my project was giving it to people with a mental disease like Alzeimer’s. To further improve my project and to help people with this mental disease, I would try to make a bracelet that lights up, buzzes, and tells the user that it is time to drink.

My definition of interaction remains the same:”a specific thing is done when a specific action happens”; my idea and understanding of interaction has been broadened, though. Interactive projects like the ones we have done can be used for fun, and can also be used to save people’s lives; creating an object that gives a user feedback and is essential for something to be interactive. Another very important aspect of interaction that was emphasized in creating such projects was feedback from the computer. I think my project is very interactive; it gives the user feedback of how much water the user has drank, and tells the user when they should drink and how much they should drink. As the user performs the action of drinking, the HydroTimer gives the user feedback.

Through successful completion, I see my project being used by people with Alzheimers. I would also think that it would be sold to places with high stress and high amounts of work, like colleges and law firms. It would be targeted to entrepreneurs, business people and engineers, who are almost always busy with projects, and might not have time to think about re-hydrating. Through this small change of encouraging the user to stay hydrated, the HydroTimer will provide great value by making sure that the user is at his/her best physical and mental state, and able to perform and complete tasks thoroughly and outstandingly well.

One project that is very similar to the one I made is called the GlowCap, made by a company called Vitality. The GlowCap basically has a similar concept to the HydroTimer; it tells elderly people when they should take their pills, and whether they have already taken it or not. This was one of the later inspirations of the HydroTimer.

My video presentation helped show the functionality portion of my project in a very clear manner. If I had more time, I would try to connect the processing with the Arduino part, which was one of the main objectives of this project that I did not fulfill. I would also make sure that the laser-cut container looks more aesthetically pleasing, since it was a little big crooked, and dried up glue could be seen on the outside of the container.

Final Presentation of the HydroTimer!

//Arduino Code (used in video)

#include <SoftwareSerial.h> //library for bluetooth 
SoftwareSerial mySerial(4, 5); //class and object for bluetooth
int redPin = 6;
int greenPin = 7;
int bluePin = 8;
boolean a = true;
boolean blinkOneTime = true;
int prevTimer;
boolean val;
int trigPin = 11;    // Trigger
int echoPin = 12;    // Echo
long duration, cm, inches;
//seconds counter
unsigned long prevMillis = 0;
int interval = 1000;
int timer = 0;

boolean redBool = true;
boolean runOnce = false;


void setup() {
  Serial.begin (9600);
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  mySerial.begin(9600);
  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
  mySerial.println("Hello, world?");
}
void setColor(int red, int green, int blue)
{
#ifdef COMMON_ANODE
  red = 255 - red;
  green = 255 - green;
  blue = 255 - blue;
#endif
  analogWrite(redPin, red);
  analogWrite(greenPin, green);
  analogWrite(bluePin, blue);
}
void loop() {
  unsigned long currentMillis = millis();
  if ((currentMillis - prevMillis) >= interval) {
    prevMillis = currentMillis;
    timer = timer + 1;
    Serial.print("timer:");
    Serial.println(timer);
  }

  if (inches < 5 && timer > 20  ) {
    redFunction();
 
  }

  if (inches >= 5 && inches < 20  ) {
    digitalWrite(redPin, LOW);
    blinkLEDGreen();
    if (redBool == true) {
      timer = 0;
      redBool = false;
    }


  }
  if (inches >= 8 && inches < 15 && timer >=5) {

        redFunction();

  }



  
  digitalWrite(trigPin, LOW);
  delayMicroseconds(5);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  pinMode(echoPin, INPUT);
  duration = pulseIn(echoPin, HIGH);
  inches = (duration / 2) / 74;
  mySerial.println(inches);
  Serial.print("inches:");
  Serial.println(inches);
  delay(250);
}




void redFunction() {
  //  if (runOnce = false) {
  //    delay(10000); // You want this to happen once
  //    runOnce = true;
  //  }
  setColor(255, 0, 0);
  if (timer - prevTimer >= 1) {
    val = !val;
    prevTimer = timer;
  }
  digitalWrite(redPin, val);

}

void blinkLEDGreen() {
  if (blinkOneTime == true) {
    for (int x = 0; x < 2; x++) {
      digitalWrite(greenPin, HIGH);
      delay(1000);
    }
    blinkOneTime = false;
  } else {
    digitalWrite(greenPin, LOW);
  }
}





//Processing Code (controlled by mouse)

void setup() {
  
  size(1000,1000);
  background(255);
}

void draw(){

  fill(0);
  textSize(32);
text("Nice work!!", 10, 30); 


noStroke();
fill(0,0,255);
rect(350, 350, 300,mouseY);

noStroke();
 fill(255,0,0);
rect(350, 150, 300,mouseY);

}





// Arduino Code (working with using boolean values)



#include <SoftwareSerial.h> //library for bluetooth 

SoftwareSerial mySerial(4, 5); //class and object for bluetooth


// LED pin values
int redPin = 6;
int greenPin = 7;
int bluePin = 8;


//timer
boolean a = true;

int prevTimer;
boolean val;


  //boolean values for different states (top, drinking, middle, drinking, bottom).
  boolean stateI = false;

  boolean stateII = false;

  boolean stateIII = false;

  boolean stateIV = false;

  boolean stateV = false;

  
//ultrasonic sensor values

/* created by Rui Santos, https://randomnerdtutorials.com

   Complete Guide for Ultrasonic Sensor HC-SR04

    Ultrasonic sensor Pins:
        VCC: +5VDC
        Trig : Trigger (INPUT) - Pin11
        Echo: Echo (OUTPUT) - Pin 12
        GND: GND
*/
int trigPin = 11;    // Trigger
int echoPin = 12;    // Echo
long duration, cm, inches;

//seconds counter
unsigned long prevMillis = 0;
int interval = 1000;
int timer = 0;




void setup() {
  //Serial Port begin
  Serial.begin (9600);
  //Define inputs and outputs
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);

  mySerial.begin(9600);

  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);


  // set the data rate for the SoftwareSerial port
  mySerial.println("Hello, world?");
}

//MAKE SURE BAUD RATE IS SAME

//setColor class that changes LED color
void setColor(int red, int green, int blue)
{
#ifdef COMMON_ANODE
  red = 255 - red;
  green = 255 - green;
  blue = 255 - blue;
#endif
  analogWrite(redPin, red);
  analogWrite(greenPin, green);
  analogWrite(bluePin, blue);
}






void loop() {
  //After five seconds, start blinking red.
  unsigned long currentMillis = millis(); 

  if ((currentMillis - prevMillis) >= interval) {
    prevMillis = currentMillis;
    timer = timer + 1;
    Serial.print("timer:");
    Serial.println(timer);
  }
  //after 5 seconds, the LED should blink red.
  //  if (timer == 5 ) {
  //    a = false;
  //    Serial.println("test");
  //    // digitalWrite led high
  //
  //
  //
  //
  //  }
  //  if (a == false) {
  //    blinkLED();
  //    timer = 0;
  //    // digital write led low
  //    a = true;
  //    Serial.println("test2");
  //
  //  }






  //different states = range and specific values.



//StateI: Bottle is filled; count/wait 5 seconds, and blink the LED. 
if (stateI == true && stateII == false && stateIII == false && stateIV == false && stateV == false && timer >= 5) {



    blinkLED();




  }

  //StateII: keep blinking red while person is still drinking (or maybe do yellow)?
  else if (stateI == false && stateII == true && stateIII == false && stateIV == false && stateV == false ) {

    blinkLED();


  }


  //turn green when person is finished drinking water; set the timer = 0, StateIV to true and State III to false to break out of State III timer=0 loop.
  else if (stateI == false && stateII == false && stateIII == true && stateIV == false && stateV == false) {


digitalWrite(redPin, LOW);
blinkLEDGreen();
timer = 0;
stateIV = true;
stateIII = false;

  //  Serial.println("State 3");


    //
    //    timer = 0;
    //
    //
    //    if (timer == 0 ) {
    //      a = false;
    //      digitalWrite(greenPin, HIGH);
    //      Serial.println("test");
    //      // digitalWrite led high
    //    }
    //    if (a == false) {
    //      digitalWrite(greenPin, LOW);
    //      timer = 0;
    //      // digital write led low
    //      a = true;
    //
    //    }


  }

  //drink water, blink LED red.
  else if (stateI == false && stateII == false && stateIII == false && stateIV == true && stateV == false && timer >=5) {

    blinkLED();

    
 //Serial.println("State 4");

  }


  //blink red when water is low.
  else if (stateI == false && stateII == false && stateIII == false && stateIV == false && stateV == true && timer == 60) {
 //Serial.println("State 5");


  }




  //When certain value is reached from ultrasensor, LED will turn green, then off.


//if inches <5, state 1 is true; blink red LED after 5 seconds. 
  if (  inches < 5) {

    stateI = true;
    stateII = false;
    stateIII = false;
    stateIV = false;
    stateV = false;



    //If inches between these two middle values, LED will continue blinking red. 
  }

  if (inches >= 5 && inches < 8) {
    stateI = false;
    stateII = true;
    stateIII = false;
    stateIV = false;
    stateV = false;
   
  }

  //if inches between these two middle values, LED will blink Green (STATE 

  if (inches >= 8 && inches < 15) {
    stateI = false;
    stateII = false;
    stateIII = true;
    stateIV = false;
    stateV = false;
  }

  if (inches > 15 && inches < 20) {
    stateI = false;
    stateII = false;
    stateIII = false;
    stateIV = true;
    stateV = false;
   
  }


  if (inches >= 20) {

    stateI = false;
    stateII = false;
    stateIII = false;
    stateIV = false;
    stateV = true;
   


  }

  Serial.print("stateI:");
  Serial.println(stateI);









  //After person drinks to a certain amount, the LED should light green, and then stop blinking.

  //Ultrasonic Sensor constant values

  // The sensor is triggered by a HIGH pulse of 10 or more microseconds.
  // Give a short LOW pulse beforehand to ensure a clean HIGH pulse:
  digitalWrite(trigPin, LOW);
  delayMicroseconds(5);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  // Read the signal from the sensor: a HIGH pulse whose
  // duration is the time (in microseconds) from the sending
  // of the ping to the reception of its echo off of an object.
  pinMode(echoPin, INPUT);
  duration = pulseIn(echoPin, HIGH);

  // Convert the time into a distance
  // cm = (duration/2) / 29.1;     // Divide by 29.1 or multiply by 0.0343
  inches = (duration / 2) / 74; // Divide by 74 or multiply by 0.0135

  mySerial.println(inches);
  Serial.print("inches:");
   Serial.println(inches);
  // Serial.println("in, ");

  //  Serial.print(cm);
  //  Serial.print("cm");
  //  Serial.println();
  //
 delay(250);

}




//function for blinking red LED

void blinkLED() {

  // LED ON
  // DELAY
  // LED OFF
  //DELAY

  setColor(255, 0, 0);  // red

  if (timer - prevTimer >= 1) {
    val = !val;
    prevTimer = timer;
  }
  digitalWrite(redPin, val);


}



void blinkLEDGreen(){
  
  setColor(0, 255, 0);


  digitalWrite(greenPin, HIGH);


  

  }

Final Project Proposal-Rahmon Chapoteau (Madsen)

Text Conversation Project

Partner: Angie Zhang

Our project is a text conversation between a bank robber and an experienced hacker, the user. The robber explains to the user that a certain bank is stealing and harassing orphanages around town to pay an unfair amount of money for the rent or leave, and the orphans are at risk of being homeless. The robber will try to convince the hacker to help him in his robinhood-like heist, that will try to take money from the bank and give back to the orphanages.  The hacker will have the ability to either assist or go against the bank robber based on the conversation options the user choose. If the user chooses to help out the robber, then the heist will happen successfully, where authorities will not be able to find any traces of the two criminals. If not, the hacker will take certain measures to send the robber to jail.

One of the main projects/entertainment that inspired me was watching the horror text conversation stories on Facebook and YouTube; one really interesting short movie was called tEXt, by Tye Gibson & Nick Johnson, where there was a build up between two characters (the ex boyfriend and ex girlfriend), and an unexpected twist ending from a third character (the ex-girlfriend’s friend). I thought this was a very good example of a film that combined text and film to create an interesting story. This combination of film and text helped create more suspense, and encouraged the viewer to continue watching. We do not think that we will have time to film, so we will have to tell a very good story through the text conversations.

Another inspiration is “The Watson-Scott Test”, which is a psychological multiple choice horror game that tries to blur the line between reality and fiction. The game asks the user creepy, disturbing questions, and make the users feel fully responsible for the answer that they put in the game. The game makes you feel like you are speaking with a crazy person who has the capabilities to hurt you at any time, during any moment. I think that the creators did a very good job of making the user feel helpless and scared, evoking a panic response from most of the people who play the game (check out a lot of the YouTubers who played this game!). We want to make sure that our project makes the user feel accountable for each option that they choose.

We want to make sure that the user wants to stay engaged and know more about the events each time. To make our project more interesting, we plan to make the story in away so that the hacker and the robber already know each other. We are not too sure whether we will have time to create the texting platform, so we are planning to screen record conversations. We will screen record multiple conversations, and use Javascript for the interactive part of the project, where when the user is given an option to click on a certain text to send, the button will link to a given screen-recorded conversation. There will ultimately be two outcomes from the options you choose. For the code, we might need a counter between two sets of options “help” and “don’t help”, which will ultimately determine the outcome of the story. The user will have two options. When the user chooses one option, then there is a “point” awarded for that particular option they chose. In other words, if the count for help is greater for the count for don’t help, then the story will lead to the hacker helping the robber. If the count for don’t help is greater, then the hacker will report the robber to the police.

Recitation 9: Serial Communication-Rahmon Chapoteau (Leon)

Exercise 1: Make a Processing Etch A Sketch

One of the things that was confusing for me was where and how to put in the values for the circle. At first I did not understand the use of arrays in this exercise, but had a better understanding when someone explained to me that the array values in the ellipse values are from the Arduino, and that sensorValues[0] was the first potentiometer while sensorValues[1] was the second potentiometer. Here is the video of the etch a sketch project:

 

 

Exercise 2: Make a Musical Instrument with Arduino

Again, I had difficulties understanding how the code worked; One of the main issues with this project was syncing the different pitches of the buzzer with the mouse. One solution I came up with was to map the values from the mouse to match with the Processing screen’s width. One of the professors helped out with the mapping part, and I got this as my final result:

 

Hopefully as I work more with Arduino and Processing, I can have a better understanding of how this code (Arduino to Processing and vice versa) works.

//Exercise 1 

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

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

import processing.serial.*;

String myString = null;
Serial myPort;


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


void setup() {
  size(500, 500);
  background(0);
  setupSerial();
}


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

ellipse(sensorValues[0],sensorValues[1], 200, 200); 
//Which variable do I use for X and Y arduino? 

  // use the values like this!
  // sensorValues[0] 

  // add your code

  //
}



void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[3], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = 'n'  Linefeed in ASCII
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}



void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = 'n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}



//Arduino Exercise 1 Code 

int pot1 = A0;

int pot2 = A1;

int a = 0;

int b = 0;

void setup(){

  Serial.begin(9600);
  
  }

  void loop(){

a = analogRead(pot1);

b = analogRead(pot2);

Serial.print(a);
Serial.print(",");
Serial.println(b);

    
    }



//Exercise 2 

//Arduino 

// IMA NYU Shanghai
// Interaction Lab
// This code receives one value from Processing to Arduino 


char valueFromProcessing;


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


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueFromProcessing = Serial.read();
  
  tone(8,map(valueFromProcessing, 0,500, 50, 7000));    
  }
  
  
  
  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
}




//Processing

// IMA NYU Shanghai
// Interaction Lab
// This code sends one value from Processing to Arduino 

import processing.serial.*;

Serial myPort;
int valueFromArduino;


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

  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.
  
  myPort = new Serial(this, Serial.list()[ 3 ], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.
}


void draw() {
  // to send a value to the Arduino
  
  myPort.write(mouseX);
}



Week 11: Hackers and Painters Response-Rahmon Chapoteau (Madsen)

Hackers and painters destroys the stereotypes of hackers as “computer scientists”, and associates them more as artists. I really liked how the author placed an emphasis on one of the important qualities of being a good hacker: empathy. A hacker, just like a painter, must empathize with the user/viewer by seeing from their point of view. I also liked how Graham stated that programming language is something that should be learned by doing, not by simply watching, giving the analogy that programming languages are like pencil rather than pen. I liked the fact that Graham explains how hacking/computer programming is something that you learn by doing and is mostly open-source, where you can learn from different hackers and companies on how to improve your code, or modify it to make it do something else that is interesting. This reminds me a lot of the time Joe Rogan and Niel Degrasse Tyson spoke about education on the JRE Podcast, stating how it is important to create an environment that stimulates and encourages students to learn more about science and the world; the way subjects are taught by teachers and perceived by students do matter. If both the teacher and student have no passion or is unable to connect with one another, then the curiosity from the student starts to deplete. This encourages me to explore more about the things I might not find interesting.

Week 11: Video Project-Rahmon Chapoteau (Madsen)

Team: Zoe, Rahmon, Lynn, Clara

Project Website: http://imanas.shanghai.nyu.edu/~lz1825/videoProject/index.html

Idea: Small Change, Different Outcome.

About

We first came up with an idea to create an interactive story game,  similar to the Telltale Games style. After further discussing, we determined that it would require a lot of filming, and we would not have enough time to shoot each of the options. We wanted to maintain the concept of having a differing outcome based on the small choices that you choose, but to make it more simpler and relatable with most students’ and workers’ daily routine. We wanted to express how a small, simple change to one’s daily routine may lead to a different outcome.

After watching the original, monotonous routine of the student’s life, the user is given two options: to relive the monotonous day, or to change it. If the user decides to relive the day, s/he will be taken back to go through the original, boring cycle of the student. If the user decides to make a change, s/he will be taken to a page presented with options on how the user would like to change the student’s life. There are three ways that the user can change the student’s life: Change clothes, order food online, and cook dinner. Each of these options changes the outcome of your day.

Process

We first agreed that the format of our story would be like a loop, where we would be re-using a lot of the scenes to show the monotony of the original day. Making a simple storyline really helped us in creating a good storyboard, which in turn helped us see which scenes we could efficiently re-use. We all had the same story concept down, but different storyboard ideas; we eventually went with this one because it was well developed:

We first made a general story outline (listed part of the left page), then proceeded with the storyboard once the general outline was agreed upon. The scenes with a start next to them would be re-used, which helped us out a lot!

Idea of how we wanted our interaction to look like (right page)

After storyboarding, we assigned each other tasks. I filmed and edited the original video, Zoe did the sound, Lynn was the note-taker and made the Website, and Clara was the actress and edited the video for the different options.

Filming was a fun process, and took some planning; we had to find a good environment (both visual and audio aspect) and angle to shoot from, as well as act out everything before we would actually start filming. Sometimes I would hold the camera really shakily, or cut out part of the actor’s body, which would make us have to re-shoot a scene. I also improvised the camera angles when we did not have a tripod; for the classroom scene in the “change clothes” option, I had to put a chair on top of a table, and the camera on top of the chair to get this shot:

I thought I would be able to stand up and shoot this, but I was too short, and I would have held the camera even more shakily. Next time, I could try to use the stabilizer!

After we had all of our scenes shot, it was time to edit using Adobe Premiere CC 2018. In the original “mundane day” scene, you can see how the student’s life starts off very slow, and starts to become faster and faster as the day goes on; I trimmed down the re-used clips to create the effect that the day is becoming faster and faster.

Pros and Cons

Pros: Our planning was excellent, and the execution went pretty smoothly. Luckily we had a good storyboard that told us which scenes we could re-use. After shooting about 7 of the scenes that we would re-use for 23 out of the 42 scenes in our video, the rest of the filming went mostly as planned.

Cons: Some of the shots were too bright, and were shaky. I would try to add more “appropriate” effects for the original scene to help the audience relate and engage more with the story. Also, I think it would have been more efficient to meet and come up with one storyboard together, so we could spend more time on polishing up more things.

 

Conclusion

Overall, we did a good job on our project. I think we got our message across very well, especially by the filming and interaction decisions we made: we had three button options the user would select to choose the story s/he would like to see. If we had more time, I would edit the lighting for some of the scenes, and try to learn more about how to make the shots look nicer. Maybe next time I could use the stabilizer to take more clean, less shaky shots. One thing within the video I would change is the consistency of going in and out of the bus-Clara went into a blue bus, but got out of a white bus. I think we would also try to make the reverse scene a lot smoother. Other than this, we made a solid interactive video project. Lynn did a really good job of making the website look aesthetically pleasing, user-friendly, and match with the style of our story. Clara did well in acting, and in making the editing choices (especially for the happy part). Zoe gave really good insight for not only the audio, but also the visual aspects of what we should use to match perfectly with our story. I did relatively well in filming, and did well in planning out the storyboard and how we should shoot.

Final Project Proposal-Rahmon Chapoteau (Leon)

Hydro-Bottle

B. Project Statement of Purpose

Water is vital to most organisms on planet earth, especially plants and human beings. According to the United States Geological Survey, up to 60% of the human adult body is water, making up most of the human body. Unfortunately, according to a 2015 article written by One Green Planet, about 75% of Americans were dehydrated. Dehydration is unhealthy, leading to higher chance of kidney stones and fatigue; dehydration is even more deadly for children and infants: Dehydration caused by diarrhoea is one of the biggest single killers of children in the modern world and diarrhoea itself is one of the major causes of nutritional loss and poor growth”  (http://rehydrate.org/dehydration/). This is why it is important to stay hydrated in order to maintain a healthy body.
The Hydro-bottle is a simple, fun way to remind a person to hydrate, telling the person how much they should drink, when they should start and stop, and when they should start refilling their bottle. After doing some research, I found one Arduino project that monitors the amount of fluid remaining and consumed from the bottle:
(https://www.hackster.io/taifur/arduino-powered-water-bottle-42ee43)
One really good thing this project did was making the physical components compact, where there are no wires or hardware seen; the placement of the sensor (on the inside) is also very interesting, and might be a way I will use to attach my sensors as well.

C. Project Plan

The Hydro-Bottle will monitor when and how much the person should and will drink. The bottle will have three levels: the bottom, middle, and top levels. When the bottle is empty, the screen (using processing) will tell the user to refill to the top. If the water is filled to anywhere above the bottom level, it will tell the user to continue drinking; I hope to add a timer between each of the levels (ex: after 30 minutes, the user will drink from the top to the middle level; after another 30 minutes, the user will drink) in order to create a “schedule” and habit for the user to drink water. One thing I will have to figure out is whether it is more sensible to have three sensors on the side, or one sensor on the top, as used in the project presented above. Here is a draft of what I intend to do:
D. Context and Significance
Hopefully after the basics are working (the three levels and the messages for each level), I can include LED lights that change based on the amount of water left, similar to displaying a battery’s power. If the water is filled to the top, the color of the bottle would be green; At the middle, the color would be yellow; at the bottom, the color would be red. Hopefully the portrayal of the bottle as a battery would encourage people to both use and “recharge” the bottle. Through this project, I hope to encourage individuals to stay hydrated, as well as take initiative to learn more about hydration and create a schedule to drink water. This project is very interactive; I intend for the water bottle to give feedback/outputs like the messages and LED lights based on the input-the sensor that tracks the amount of water in the bottle-received.

Preparatory Research And Analysis-Rahmon Chapoteau (Leon)

A. Go back to your definition of interaction as you defined it during the group project. How has your work in this course involved that definition?

In the group project, I defined interaction as a specific input that results in a specific output. Learning more about coding through Processing and Arduino helped build my original understanding of what interaction is. Learning more about user inputs and how to create functions to do/follow certain things during a certain event helped me better understand what interaction was. Creating many circles when hovering your mouse over the canvas in processing was something that helped me better understand what interaction was; it is the user who has and creates what s/he can based on the tools (objects) given. The ball that bounces across the Processing display was not really interactive, since I did not influence how the ball moved. This distinction gave me a better idea of what interaction is, and what it is not.

B. Based on the initial definition and your experience developing and executing your midterm project, how has your definition of interaction evolved? Be as specific as possible.

While coding, I thought that the bouncing ball part would be considered “interactive”, since it is performing a specific output for a specific input. The only critical issue was that it was not user-guided; this is when I realized how no matter how flashy or how many animations you might create, if the user is unable to create a change within the created environment, then it would not be considered interactive. This is why it is essential to include and emphasize the user-guided aspect of interaction.

C. Research two other interactive projects, one that aligns with your definition of interaction and one that differs from it.

  • Discuss why the first project lines up with your definition and why the second one clashes with your definition of interaction. Be precise, as always.
  • In your research process, you are strongly encouraged to consider interactive projects and experiences drawn from and in a variety of sources, media, materials, formats, etc.

1. https://www.hackster.io/vikkey321/change-rgb-led-connected-to-esp12e-from-web-page-using-knob-87ad2e 

There are analog inputs that give analog outputs; in this case, the rotating knobs give the user the ability to put in a specific input, which will then give a specific output, like changing the LED Lights. The user uses their finger to touch and rotate the knob, which will in turn make the red, blue, or green values higher or lower. This reminds me a lot of a project I made in Arduino, using the potentiometer to change the brightness of an LED. This was definitely interactive, especially since the potentiometer acted as something that would take in specific values (as you turn the knob, you get different analog values), that would translate into the values for brightness of the LED (output). 

2. http://superficie.ink/possible-structures/

Although these portraits made using Processing are really nice, they are not really interactive. A user would not be able to click on them, or make a change in any way to the portraits and sculptures presented in this website. Overall, there are no inputs or outputs that the user can change. This does not make the project interactive, based on my definition of what interaction is. This reminds me of when we learned to “manually” code in some random shapes, and had a still image and/or animation that the user could only appreciate by watching. The user did not have the ability to change anything.

D. Write a “new” definition of interaction in your own words. Draw from your account above and try to evolve your definition beyond the current convention. It should be polished and professional: imagine it will be printed on IMA Interaction Lab’s next course syllabus!

  • This definition should reflect the evolution of your understanding of interaction through both the above research and analysis process as well and your semester engagement with course readings, discussions and work.
  • Your definition may not replicate something you have read. You are an original, you will arrive at this semester’s end with an understanding and practice of interaction of your own—not others’—making!
  • Again, as in every step, be specific, give details.
A more revised definition of interaction would be a specific input given by the user to produce a specific output. Including the user is the most essential part; you can program a ball to bounce across each of the corners in processing and have the ball change into different shapes and colors, but if the user is unable to do anything but watch, then it would not be interactive. A simple circle that is dragable, on the other hand, would be considered interactive, since there is a specific output-the circle object moving-for a specific input-clicking and dragging circle object. It is the relationship between an outside source, which gives an input-like human-and the specific instrument-in this case computer-that reads the input and gives an output. Overall, my revised definition tried to make it clearer that user interaction is key to inputting something specific that will give a specific outcome.

Processing Functions and Arrays Exercise One-Rahmon Chapoteau (Leon)

At first, I wrote my code like this:

int[] eightVarArray= {int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100))};

void setup(){
println(eightVarArray[0]);
println(eightVarArray[1]);
println(eightVarArray[2]);
println(eightVarArray[3]);
println(eightVarArray[4]);
println(eightVarArray[5]);
println(eightVarArray[6]);
println(eightVarArray[7]);
}

 

Then, I used the printArray function to shorten the code, and came up with the code written below.



int[] eightVarArray= {int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100)),int(random(100))};

void setup(){
printArray(eightVarArray);

}

Processing Exercise Two-Rahmon Chapoteau (Leon)

At first, I tried using while loop using the s-value, but it would only work for one part of the code. This is when I asked Professor Leon for advice, and he showed me to look at the pattern, and taught me how to create a while loop based on the pattern.

In this set of code, the pattern is (s*value, constant, s*value, constant), where “value” is incremented by one each time.

Using this advice, I also created a new “value” variable (that would serve as the number that I would increment each time), and made a while loop based on this value number. I made the mistake of having the greatest value at 14, and my picture looked choppy like this:

I should change the statement inside the while loop to value <15 so that it includes and goes up to 14!

 

After changing value to less than 15, I got the final result (source code at the end):

 

int s = 20;

int value = 0;
strokeWeight(4);
size(600,600);
rect(0,0, width/2,height/2);
rect(width/2,0, width/2,height/2);
rect(0,height/2, width/2,height/2);
rect(width/2,height/2, width/2,height/2);

while(value<15){
line(s*value,0,s*value,width/2);
line(width/2,s*value,width,s*value);
line(0,height/2 + s*value,s*value,width/2);
line(s*value,height,width/2,height/2 + s*value);
line(width/2,height/2,width, height);
line(width/2+s*value,height/2,width+s*value, height);
line(width/2,height/2 + s*value, width - s*value, height);

value = value +1;



}