Amber Kong

A. Project Title

Drink Water!

Very clear and obvious that urging people to drink water.

B. Project Statement of Purpose

This project is designed for the people who usually forget to drink water but want healthier lifestyle. And I think with visual effect of a tree (or other plant) and sound effect to remind the user to drink, the user could definitely drink enough water every day and have a healthier life. As for the main challenge for this project, I think is how to make it more interactive as we discussed in class. We should design something like water adding device or something similar to make the form of interaction more diverse.

C. Project Plan

This is my plan for each part.

The physical part and the overall structure:

The Arduino part and the possible elements that I need:

Processing part and the basic visual design:

D. Context and Significance

Actually neither of Mia’s and my research had relevant thing about water drinking reminder. We originally both wanted to make a game like Super Mario. But when we were discussing on our proposals, she also mentioned about electronic pet (I remember something made something similar in the midterm). But I think to draw a pet dog/cat in processing is not a good idea because using these basic shapes, the thing we build is usually childish. So I advised that maybe we can draw plants instead as plants like tree could be presented in a more abstract but artistic way. Then we brainstormed and come up with the idea of urging people to drink water. This project, as I mentioned in part B, is mainly designed for those people who want to have healthier lifestyles but usually forget to drink water. Eric mentioned that our preliminary idea about this is somewhat not that interactive. The actual interaction between user and device is to pick up the cup and drink and put it back. So we are considering adding more interactions like adding a water storage pot. The user either press the button to add water to the cup or waiting for itself to add water automatically every one hour.

Step 1&2

This is what I built based on the Taichi I made for the last recitation:

And here is my code:

float []angle;
float []Scale;
int []tScale;
int m=0;
color []colors;

void setup(){
  size(600,600);
  angle = new float[50];
  Scale = new float[50];
  tScale = new int[50];
  colors = new color[50];
  for (int i = 0; i<30; i++){
    tScale[i] = 1;
    Scale[i] = 1;
    colors[i] = color(random(255),random(255),random(255));
  }
}

void draw(){
  background(255);
  for (int a = 1; a<5; a++){
    for (int b = 1; b<5; b++){
      rotateTaichi(75+(a-1)*150,75+(b-1)*150,m,colors[m]);
      m = m+1;
    }
  }
  m = 0;
  //println(m);
}

void taichi(color c){
  fill(c);
  arc(0,0,100,100,0,PI,PIE);
  fill(255);
  arc(0,0,100,100,PI,2*PI);
  
  noStroke();
  fill(c);
  circle(-25,0,50);
  fill(255);
  circle(25,0,50);
  
  noStroke();
  fill(c);
  circle(25,0,20);
  fill(255);
  circle(-25,0,20);
}

void rotateTaichi(int x,int y,int k,color c){
  Scale[k] = Scale[k]+0.01*tScale[k];
  if (Scale[k]<0.3 || Scale[k]>1){
    tScale[k] = -tScale[k];
  }
  //println(k,Scale[k],tScale[k]);
  push();
  translate(x,y);
  rotate(radians(angle[k]));
  angle[k] = angle[k]+1;
  
  scale(Scale[k]);
  taichi(c);
  pop();
}

Step 3

In this step, I planned to make many bouncing Taichis in the screen but I have already made the bouncing smiling faces in class. So I made all the Taichis to rotate and the center is the center of the screen. This is what I made:

This is my code: 

color []colors;
float []x;
float []y;
float []dia;
float []angle;
float []Scale;
float []spd;


void setup(){
  size(600,600);
  colors = new color[50];
  x = new float[50];
  y = new float[50];
  dia = new float[50];
  angle = new float[50];
  Scale = new float[50];
  spd = new float[50];
  for (int i=0; i<50; i++){
    colors[i] = color(random(255),random(255),random(255));
    x[i] = random(100,width-100);
    y[i] = random(100,height-100);
    dia[i] = random(15,40);
    angle [i] = 0;
    Scale[i] = random(0.5,1);
    spd[i] = random(0.5,2.5);
  }
}

void draw(){
  background(255);
  for (int i=0; i<50;i++){
    taichi(x[i],y[i],colors[i],Scale[i],angle[i]);
    angle[i] = angle[i]+spd[i];
  }
}

void taichi(float x,float y, color c,float Scale,float angle){
  push();
  translate(300,300);
  rotate(radians(angle));
  scale(Scale);
  fill(c);
  arc(x,y,100,100,0,PI,PIE);
  fill(255);
  arc(x,y,100,100,PI,2*PI);
  
  push();
  noStroke();
  fill(c);
  circle(x-25,y,50);
  fill(255);
  circle(x+25,y,50);
  
  noStroke();
  fill(c);
  circle(x+25,y,20);
  fill(255);
  circle(x-25,y,20);
  pop();
  pop();
}

I think the most challenging part is to use the function translate() and push(), pop() properly to make each Taichi rotate.

Additional

Instead of rectangles, I use some loops instead. Actually they are just circles with stroke that weighs 1/3 diameter of the circle. This is what I made:

This is the code:

float []x;
float []y;
float []dia;
float []dis;
int []colors;

void setup(){
 size(600,600);
 colorMode(HSB,100);
 x = new float[24*24];
 y = new float[24*24];
 dia = new float[24*24];
 colors = new int[24*24];
 dis = new float[24*24];
 for (int i=0; i<24*24;i++){
   colors[i] = int(random(0,100));
 }
}

void draw(){
  background(0,0,0);
  for (int i = 0; i<23; i++){
    for(int j = 0; j<23; j++){
      int index = i + j*23;
      dis[index] = dist(mouseX,mouseY,x[index],y[index]);
      dia[index] = 15;
      x[index] = i*25+25;
      y[index] = j*25+25;
      colors[index] = colors[index]+1;
      if (colors[index] >= 100){
        colors[index] = 0;
      }
      //if (dis[index]<=100){
      //  dia[index] = map(dis[index],0,100,5,15);
      //}
      dia[index] = map(constrain(dis[index],0,100),0,100,5,15);
       dot(i*25+25,j*25+25,dia[index],color(colors[index],50,100));
    }
  }
}

void dot(float x, float y,float d, color c){
  strokeWeight(d/3);
  stroke(c);
  fill(0,0,0);
  circle(x,y,d);
}

I actually misunderstood the hint of using function constrain() as in my assumption, I should use map() and an if statement. Later I found out that does this mean. I should get the distance of each circle to mouseX and mouseY and I only need the distances that are smaller than 100. Then I just need to use constrain instead of using a long if statement to save spaces. I keep my if statement here to remind me of the process and effort I’ve made.

Project 1: Running running

We got this inspiration from the parkour games like Super Mario. And we want to make a physical one. We would use pressure sensor/distance sensor to detect the user’s movement and translate into the instruction “jump”, “crash the blocks” or maybe some more interesting actions. This project could serve as an exercise game for people who love playing games while lacking or are too lazy to do exercise. And also during quarantine, people couldn’t go out so this could also be a funny exercising game for them to do some interesting exercise at home. I think the main challenge we would overcome is how to design each sensor to detect and distinguish people’s different movement.

We actually built a assumed model for this: https://editor.p5js.org/yk2308/sketches/ftL7AgdCq

Project 2: Good good study, day day up

For this project, we want to make something for children education. We have several cards with some pictures or words or short articles and a “machine” that could distinguish different cards. When kids put the card in the machine, they could see the relevant information and vocal introduction of the content on the card. I’m wondering whether I could even add some quizzes. The main challenge we would overcome is how to distinguish different cards. My current assumption is that I would attach glass paper of different transparencies to each card and when the light goes through that glass paper, the light sensor will read different numbers. And I detect the range of number in advance to realize this. As for how to present different content according to the input from the “card reader” in processing, I knew there’s a “case” that might be helpful according to my research.

Project 3: Drink water!

This is a project that could urge the user to drink water. Because drinking 8 glasses of water (about 2500mL) is the most beneficial for the sake of a healthy body but according to our research, most of people couldn’t reach this standard. So we want to design a tree (maybe some other plant) in processing. When user drink different amount of water,  the tree would be present in different status to urge the user to drink water(too less water-the leaves dried up  proper amount-the leaves are green and healthy  too much water-the root would rot). I think the most challenging part for this project is to find a proper way  to detect how much water the user had already drank. I originally thought about putting humidity sensitive resistors in the cup or water jar but this is  not clean. I’m still trying to find out what other sensors could be used to detect the water level change.

Research

Project 1: https://create.arduino.cc/projecthub/sowmith/visualising-sensor-data-using-arduino-and-processing-e707f0?ref=tag&ref_id=processing&offset=2

This project is successful because it visualize the data to show the changing trend. As we learned from math class, making a graph with statistic could make the data more visualizable and the analysis more convenient. So recording and showing the data is a good idea in many field with wide application. However, this project is the interaction mainly between environment and computer. Maybe people are not that involved. I would prefer to add “search function” to make it more interactive.

This is a project that use processing to visualize the data read by Arduino. This actually remind me of a data visualization project I did last semester(https://wp.nyu.edu/shanghai-amber_kong/2020/11/29/data-visualization-project/). For the data  I want to visualize, I might choose the temperature and humidity. To record these two data and visualize the real-time statistic and changing curve using processing on computer could definitely help professionals to predict the weather. I’m also wandering if I can link the database so that I could put all the statistics into the database and people could search the history record.
For more details, maybe I can add LEDs and buzzers to warm people when there’s extreme weather like extreme high/low temperature, storm, etc.

Project 2:https://editor.p5js.org/yk2308/sketches/gx6D5L_qo

This is actually an example in p5.js library. The function of this project is to draw beautiful symmetry center figure like this:

This is a project only using code but is still interactive. It allows people to create beautiful drawing as the computer would automatically execute symmetry and the symmetrical figure is beautiful. And this project also allows users to change the size of the “brush”, clear the screen and save the drawing with buttons (sorry I didn’t include these in my screen recording), which are really interactive and practical.

I’m wondering I could use two 10K ohm pots as the adjuster to take the place of mouse. One controls the distance to the center of the circle and one controls angle. Users could choose the shape and color via computer (processing) and adjust the distance to the center and finally draw with two 10K ohm pots.
This is only my preliminary assumption and I will come up with more details.

Analysis

1. Again, I think I would firstly put my definition of interaction: a process when a person/device(I call it A) do something and is detected by another people/device(I call it B), B could react and A is able to know that reaction. So according to my definition, my project would be better if I could involve the users as much as possible, not only let the users to see what happened. This is why for the first project I researched, I said that this is more like an interaction between environment and computer. People could only see the computer screen and see what happened. I think this is not interactive enough.
2. From the experience I gained from midterm project, I think the project should not only be interactive and involving, but it should also present the use it of clearly. Just like the feedback we got from the Q&A session in the midterm presentation, our project sought to be not really easy to understand how to use it. So we must make the instruction clear and easy to be understood. And this is actually what we were asked to do during user testing session. Don’t explain how your project works and just let others to find out how it works. If others could figure out how it works, you succeed.
3. Each action leads to a response that, in turn, encourages or enables another action (Ernest Edmonds,7). My understanding of this is that the interaction of the project must be interesting and attractive so that users have the motivation to continue doing this interaction. And I think the feedback we got from Eric for our midterm project could prove this well. If there is a skull with and instruction “please put your hand in my mouth”, almost no one would do so because nobody would want to put his/her hand into such a horrible thing. So we need to make it interesting and attractive so that the users would have the motivation to interact with it. So we put a candy in the mouth of the skull so the users would have the motivation to take that candy out.
4. Ernest Edmonds concludes three terms of approaches of the physical way the audience interact with projects: direct, facilitated and ambient. This just remind me the importance of the audience’s experience. Maybe this point has some intersections with the previous one. But I must say it again that the user’s experience is so important. That’s why we have users testing session. We need more investigation about thee audience rather than only introspect them just as Ernest mentioned that using artists’ (in our case, ourselves) experience as the typical example might be one-sided and subjective.

During this week’s recitation, I drew several things according to the instruction.

Firstly this is the shape I drew. This is a rotating Taichi and its size would changes.  I originally planned to only make it rotate but I realized that it was very similar to the rotating mills I drew for the first recitation task. So I tried scaling them as well. This is the Taichi I drew:

And here is my code for building this:

float []angle;
float []Scale;
int []tScale;
int m=0;

void setup(){
  size(600,600);
  angle = new float[50];
  Scale = new float[50];
  tScale = new int[50];
  for (int i = 0; i<30; i++){
    tScale[i] = 1;
    Scale[i] = 1;
  }
}

void draw(){
  background(255);
  for (int a = 1; a<5; a++){
    for (int b = 1; b<5; b++){
      rotateTaichi(75+(a-1)*150,75+(b-1)*150,m);
      m = m+1;
    }
  }
  m = 0;
  //println(m);
}

void taichi(){
  fill(0);
  arc(0,0,100,100,0,PI,PIE);
  fill(255);
  arc(0,0,100,100,PI,2*PI);
  
  noStroke();
  fill(0);
  circle(-25,0,50);
  fill(255);
  circle(25,0,50);
  
  noStroke();
  fill(0);
  circle(25,0,20);
  fill(255);
  circle(-25,0,20);
}

void rotateTaichi(int x,int y,int k){
  Scale[k] = Scale[k]+0.01*tScale[k];
  if (Scale[k]<0.3 || Scale[k]>1){
    tScale[k] = -tScale[k];
  }
  //println(k,Scale[k],tScale[k]);
  push();
  translate(x,y);
  rotate(radians(angle[k]));
  angle[k] = angle[k]+1;
  
  scale(Scale[k]);
  taichi();
  pop();
}

Then according to next step, I built this. But I realized that I couldn’t present a rotating and scaling Taichi at the place where  I clicked the mouse. Even though I tried to use object- every time I clicked the mouse, there would be a new object presenting on the screen-I failed. I was only able to present the static one. Here’s what I built:

I found that if I only use mousePressed() as the only condition, every time I click, there will be many Taichis presenting on the some position. So I added another boolean preCheck to make sure there will be only one Taichi at one position every time I click. Here is my code:

boolean preCheck = false;

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

void draw(){
  if (mousePressed && preCheck == false){
    taichi(mouseX,mouseY);
    preCheck = true;
  }
  if(mousePressed == false){
    preCheck = false;
  }

  if(keyPressed && key ==CODED){     
    if(keyCode == UP){       
      background(255);     
    }   
  }
}

void taichi(int x,int y){
  fill(0);
  arc(x,y,100,100,0,PI,PIE);
  fill(255);
  arc(x,y,100,100,PI,2*PI);
  
  push();
  noStroke();
  fill(0);
  circle(x-25,y,50);
  fill(255);
  circle(x+25,y,50);
  
  noStroke();
  fill(0);
  circle(x+25,y,20);
  fill(255);
  circle(x-25,y,20);
  pop();
}

Here is my failed attempt to use object. I just record it here and I will try to fix this with more knowledge about object.

int m=0;
boolean preCheck = false;
Bug[] bugs;

void setup(){
  size(600,600);
    bugs = new Bug[50];
  for (int i = 0; i < 50; i++) {
    bugs[i] = new Bug();
  }
}

void draw(){
  background(255);
  if (mousePressed == true && preCheck == false){
    bugs[m].rotateTaichi(mouseX,mouseY,m);
    m = m+1;
    preCheck = true;
  }
  if (mousePressed == false){
    preCheck = false;
  }
}

class Bug{
  int x,y;
  float []angle;
  float []Scale;
  int []tScale;
  
  Bug(){
    angle = new float[50];
    Scale = new float[50];
    tScale = new int[50];
    for (int i = 0; i<30; i++){
      tScale[i] = 1;
      Scale[i] = 1;
    }
  }
  
  void taichi(){
    fill(0);
    arc(0,0,100,100,0,PI,PIE);
    fill(255);
    arc(0,0,100,100,PI,2*PI);
    
    noStroke();
    fill(0);
    circle(-25,0,50);
    fill(255);
    circle(25,0,50);
    
    noStroke();
    fill(0);
    circle(25,0,20);
    fill(255);
    circle(-25,0,20);
    }
    
  void rotateTaichi(float x,float y,int k){
    Scale[k] = Scale[k]+0.01*tScale[k];
    if (Scale[k]<0.3 || Scale[k]>1){
      tScale[k] = -tScale[k];
    }
    //println(k,Scale[k],tScale[k]);
    push();
    translate(x,y);
    rotate(radians(angle[k]));
    angle[k] = angle[k]+1;
    
    scale(Scale[k]);
    taichi();
    pop();
  }
}

Then in the third step, I create many Taichis to let them present randomly on the screen. To make it more diverse, except for randomizing the position, I randomized the color, rotating angle and size as well. Here is what I built (something strange just happened to my computer’s screen recording so I took this video with my phone):

Here is my code:

float r,g,b;

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

void draw(){
  r = random(0,255);
  g = random(0,255);
  b = random(0,255);
  taichi(int(random(width)),int(random(height)),r,g,b,radians(random(360)),random(0.3,1.5));
  if(keyPressed && key ==CODED){
    if(keyCode == UP){
      background(255);
    }
  }
}

void taichi(int x,int y, float r,float g,float b,float angle,float Scale){
  push();
  rotate(angle);
  scale(Scale);
  fill(r,g,b);
  arc(x,y,100,100,0,PI,PIE);
  fill(255);
  arc(x,y,100,100,PI,2*PI);
  
  push();
  noStroke();
  fill(r,g,b);
  circle(x-25,y,50);
  fill(255);
  circle(x+25,y,50);
  
  noStroke();
  fill(r,g,b);
  circle(x+25,y,20);
  fill(255);
  circle(x-25,y,20);
  pop();
  pop();
} 

Questions:

1. The first part of my work is definitely dynamic-passive. Every Taichi rotates and scales, but this movement would not be influence by any audience. 
   For the second part of my work, I think it is dynamic-interactive (varying) because this mini project could react to the audience when the audience click the mouse and the position of each Taichi depends on the position of the mouse when clicking, this shows “varying”. And when pressing up arrow on the keyboard, the screen would be clear, this is also an interaction.
   And I think the third part of my work is dynamic-interactive. Taichis are presented on the screen with random position, color, size and rotating angle and every time when the user presses the up arrow, the screen would be cleared. Here, pressing the key to clear the screen is interactive, but the only way of interaction is clearing the screen. There is no other kind of interaction. So I think this part is dynamic-interactive but not varying
2. This Taichis in circle just remind me of the chess. Maybe I could build a chessboard on the screen and the users could place the chess by pressing the button and the position would be sensed by distance sensor. At the same time the press the button, the chess would be places on the corresponding place on the screen. This could help people who want to play chess but don’t have chess pieces or board.
3. I think I could use distance sensor and pressure sensor to get the information of pressing and the position. With these, I think I could build I drawing board with Arduino and processing. I could even change the size of the brush when the pressure changes to make is more real.

Research

For loading, I could load my own image, audio, video or gif into the processing. I could read the color information of each pixel of one image, the amplitude of the sound and the information of each pixels of a video as well. And not only can I put my image, sound or video files into the corresponding folder and load it in my project, but I could also use microphone or camera to input image, sound or video as well.

Here are the detailed functions I found:

Loading image:

loadImage();

Loading video:

import processing.video.*;
Movie myMovie;

void setup() {
  size(200, 200);
  myMovie = new Movie(this, "totoro.mov");
  myMovie.loop();
}

void draw() {
  tint(255, 20);
  image(myMovie, mouseX, mouseY);
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
}

Load sound:

import processing.sound.*;
Sound s;

void setup() {
  size(200, 200);
  SinOsc sin = new SinOsc(this);
  sin.play(200, 0.2);
  sin = new SinOsc(this);
  sin.play(205, 0.2);

  // Create a Sound object for globally controlling the output volume.
  s = new Sound(this);
}

Get pixels:

get();
updatePixels();

Get amplitude (and show it with a graph):

float amplitude = map(mouseY, 0, height, 0.4, 0.0);
s.volume(amplitude);

Camera:

import processing.video.*;

Capture cam;

void setup() {
  size(640, 480);

  String[] cameras = Capture.list();
  
  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }
    cam = new Capture(this, cameras[0]);
    cam.start();     
  }      
}

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  image(cam, 0, 0);
}

Microphone:

I found something on this discourse website but I’m not sure about it:

https://discourse.processing.org/t/using-sound-input-from-mic/21448