Interaction Lab

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

In this recitation,  I did a lot of things. I firstly create the “bubbles” in this example posted in the recitation cite:

Here is my code:

float r,g,b;
int ran;
int [] cw;
int [] ch;

void setup(){
  cw = new int[10];
  ch = new int[10];
  size(600,600);
  background(0);
}

void draw(){
  if (mousePressed == true){
    drawCircle();
  }
  fill(255);
  textSize(20);
  text("Press UP arrow to clear",50,50);
}

void drawCircle(){
  ran = int(random(1,4));
  r = map(mouseX,0,width,0,255);
  g = map(mouseY,0,width,0,255);
  noStroke();
  fill(r,g,255,random(100,255));
  circle(mouseX,mouseY,int(random(20,35)));
  for (int i = 1; i <= ran; i++){
    //fill(r,g,255);
    cw[i] = int(random(-50,51));
    ch[i] = int(random(-50,51));
    circle(mouseX+cw[i],mouseY+ch[i],int(random(5,20)));
  }
}

void keyPressed(){
  if (key == CODED){
    if (keyCode == UP){
      background(0);
    }
  }
}

And this is the video of my final result:

And then I finished the additional homework. I put two different tasks into two parts and use “button” to open it. I think maybe I can add another “back button” but I didn’t put it there. Here’s my code:

int d1 = 100;
int d2 = 70;
int i = 0;
int timesI = 1;
boolean check1 = false,
        check2 = false;
int speedX, speedY;
int posX,posY;

void setup(){
  size(600,600);
  speedX = 5;
  speedY = 3;
  posX = int(random(150,width-150));
  posY = int(random(150,height-150));
}

void draw(){
  if (mousePressed == true && (mouseX>250 && mouseX<350 && mouseY>200 && mouseY<260)){
    check1 = true;
   }else if(mousePressed == true && (mouseX>250 && mouseX<350 && mouseY>300 && mouseY<360)){
     check2 = true;
   }
  if (check1 == false && check2 == false){
    colorMode(HSB, 100);
    background(0,0,100);
    fill(0,0,100);
    rect(250,200,100,60);
    rect(250,300,100,60);
    fill(0,0,0);
    textSize(15);
    text("Additional", 262, 235);
    text("Bonus",278,335);
  }else{
    if (check1 == true){
    Additional();
   }else if(check2 == true){
     Bonus();
   }
  }
}

void Additional(){
  background(0,0,100);
  ring1(300,300);
}

void Bonus(){
  background(0,0,100);
  posX+=speedX;
  posY+=speedY;
  if(posX+d1/2>width || posX-d1/2<0){
    speedX = -speedX;
  }
  if(posY+d1/2>height || posY-d1/2<0){
    speedY = -speedY;
  }
  ring2(posX,posY);
  fill(0,0,0);
  text("push UP and DOWN arrow to change the size",50,50);
  
  if (keyPressed && key == CODED){
    if (keyCode == UP && d1<=150){
      d1 = d1+5;
      d2 = d2+5;
    }
    if (keyCode == DOWN && d2 >=10){
      d1 = d1-5;
      d2 = d2-5;
    }
  }
}

void ring1(int x,int y){
  i = i + timesI;
  if (i < 0 || i > 100){
    timesI = -timesI;
  }
  push();
  noStroke();
  fill(i,100,100);
  circle(x,y,d1 + i);
  fill(0,0,100);
  circle(x,y,d2 + i);
  pop();
}

void ring2(int x,int y){
  i = i + timesI;
  if (i < 0 || i > 100){
    timesI = -timesI;
  }
  noStroke();
  fill(i,100,100);
  circle(x,y,d1);
  fill(0,0,100);
  circle(x,y,d2);
}

This is the final result: 

I further more tried to use object to create a bunch of “bouncing bubbles” with random size, alpha and original speed and here’s my code: 

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, 240, 245);
  //if (mouseIsPressed){
  for (Bug bug : bugs) {
    bug.move();
    bug.display();
    bug.bounce();
  }
}


class Bug {
  float x;
  float y;
  float speedx;
  float speedy;
  int dia;
  int t;
  float ran1,ran2;

  Bug() {
    x = random(25,width-25);
    y = random(25,height-25);
    speedx = random(1, 3);
    speedy = random(1, 3);
    dia = int(random(20, 50));
    t = int(random(0, 100));
    ran1 = random(-1,1);
    ran2 = random(-1,1);
    
    if(ran1 < 0){
      speedx = -speedx;
    }
    if(ran2 < 0){
      speedy = -speedy;
    }
    
  }

  void bounce() {
    if (x - dia/2 < 0 || x + dia/2 > width) {
      speedx = -speedx;
    }
    if (y - dia/2 < 0 || y + dia/2 > height) {
      speedy = -speedy;
    }
  }
  void move() {
    x += speedx;
    y += speedy;
  }
  void display() {
    noStroke();
    fill(250, 128, 144, t);
    circle(x, y, dia);
  }
}

This is the result video:

I think I can add more interactions to this project like every time I clicked the mouse, there will be a new “bubble” or something like this.

Among all these functions, I think mousePressed() and keyPressed() are the most useful because our class is called “interaction lab” so these two functions are very obvious with interaction identity. So I think these two function would must be very useful for our further project making.

This is the picture I chose. I saw this picture from a blogger I follow on the social media account but this mills wall really impresses me a lot. So I wanted to draw a mills wall myself using processing.

This is what  I drew during recitation:

This is my code:

float [] angle;
int [] r;
int [] g;
int [] b;
int m = 0, c=100;
float v = 1;

void setup() {
  size(600, 600);
  angle = new float[50];
  r = new int[50];
  g = new int[50];
  b = new int[50];
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
  for (int j=1;j<26;j=j+1){
    angle[j]=0;
  }
}

void draw() {
  // fill(255);
  // textFont('Georgia');
  background(255);
  
  for (int a=0;a<height;a++){
    push();
    stroke(map(a,0,height,100,255));
    line(0,a,width,a);
    pop();
  }
  for (int x = 0; x < width + 10; x = x + 100) {
    for (int y = 0; y < height + 10; y = y + 100) {
      m = m + 1;
      triRotate(x, y, m);
    }
  }
  m=0;
  fill(c);
  textSize(30);
   text("Click the mouse to blow the wind",45,550); 
  c=c+1;
  if (c>255){
    c=100;
  }
}

void triRotate(int x, int y, int k) {
  if (mousePressed == true && v <= 10){
    v = v+0.01;
  }else if(v > 1){
    v = v-0.01;
  }
  push();
  float posX = map(mouseX, 0, width, -10, 10);
  float posY = map(mouseY, 0, width, -10, 10);
  translate(x + posX, y + posY);
  rotate(radians(angle[k]));
  angle[k] = angle[k] + v;
  //console.log(angle[k])
  Tri();
  pop();
}

void Tri() {
  for (int i = 0; i < 9; i = i + 1) {
    fill(r[i],g[i],b[i]);
    triangle(0, 0, -30, 0, -30, -30);
    rotate(radians(45 * i));
  }
}

void mousePressed(){
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
}

Reflection  

I think basically, the picture drawn by processing is not as real as the photo and was monotonous. But by using “rotate” function, I can create a mill by only drawing one triangle. Then using two “for” loops, I can create a wall of mills. So compared to drawing by hand, coding by processing is a much faster and convenient way. Maybe with more advanced knowledge, I can have my drawing in processing much more beautiful.