Recitation5: Documentation

Instruction: https://wp.nyu.edu/shanghai-ima-interaction-lab/recitation-5-processing-basics-2/

Photo:

I took this photo last year when I was waiting for a PCR test at Lujiazui, February, 2022. There are hundreds of people standing in the chilly wind in one of the most prosperous districts in Shanghai. No one could have predicted what happended later, the 2022 pandemic outbreak. 

I Selected this photo because right now queuing for a PCR test has become a social phenomenon and this photo hightlights the contradiction between people and building s, light and shadow, and most importantly, I wanted to experiment on the “for loop” function to create a mass of people and create a thrilling efficacy. 

I first drew a draft. I later realized that I made mistakes on the aspect ratio. I also drew a draft of the man that I wanted to duplicate. I intented to use two perameters to draw one man. One is for position and the other is for size.

I firstly implemented the drawpeople() function, using 9 vertex expression to constitute the man. Then I wrote a loop funtion to run the drawpeople() function with different perameters each time. I also assign random color to each man when the function is called, which made an effect out of my expectation.

 

 An LA walked by and told me maybe I should create an array to store the colors. I came up that I should generate the color in setup(), because draw() is looping and will change the color each time it runs. I didn’t have Java experience before, so I search the Internet for the Java syntax of Array. 

Next, I drew the road with 6 vertexs. But the program drew like this:

The problem was that I parenthesized the fraction, and (1/3) will return 0. Realizing that, I removed the parenthesis and it worked. 

I changed the perameters of the road, and also changed the position of men to a cubic function. (Adjusting numbers are really time-consuming! ) I also drew three rectangles to represent the buildings behind. 

Then I drew the wall and the lawn. I used a ellipse to simulate the shape and resized the stroke to simulate the margin with number adjustment.

(Remember to initiate the stroke!)

Finally, I want to make the queue move, so I add a global value “count” , added it once every loop and moded it by 20.

This is how it looks finally:

Code:

void drawpeople(int posx,int posy, int size, int[] Color){
  fill(Color[0],Color[1],Color[2]);
  beginShape();
  vertex(posx+size*0,posy+size*0);
  vertex(posx+size*1,posy+size*3);
  vertex(posx+size*2,posy+size*3);
  vertex(posx+size*1,posy+size*0);
  vertex(posx+size*1,posy+size*(-4));
  vertex(posx+size*(-1),posy+size*(-4));
  vertex(posx+size*(-1),posy+size*(0));
  vertex(posx+size*(-2),posy+size*(3));
  vertex(posx+size*(-1),posy+size*(3));
  endShape(CLOSE);
  fill(0,0,0);
  circle(posx+size*(0),posy+size*(-5),2*size);
}


int colors[][];
void setup(){
  size(750,900);
  colors = new int[21][4];
  for(int i = 1; i<=20;i++){
    for(int j = 0;j<3;j++){
      colors[i][j] = int(random(0,125));
    }
  }
}
int count = 1;
void draw(){
  background(25);
  
  stroke(0,0,0);
  strokeWeight(0);
  //buildings
  fill(90,87,85);
  rect(210,0,200,400);
  fill(98,93,90);
  rect(375,0,200,400);
  rect(0,0,200,400);

  //road
  fill(#56B9B2);
  beginShape();
  vertex(0,height);
  vertex(0,height*1/2-30);
  vertex(width,height*2/5-30);
  vertex(width,height);
  endShape(CLOSE);
  
  //people
  for(int i = 1;i<=20;i++){
    //fill(random(255),random(255),random(255));
    drawpeople(width*2/3+50-i*i*3,height*2/5-20+i*i*i/5,8+i*i/3,colors[(i+count)%20+1]);
  }
  
  //wall
  
  fill(71,45,21);
  stroke(215,194,157);
  strokeWeight(16);
  ellipse(700,950,800,1200);
  
  fill(129,109,85);  
  stroke(0,0,0);
  strokeWeight(0);
  beginShape();
  vertex(width,100);
  vertex(630,150);
  vertex(600,400);
  vertex(width,height);
  endShape(CLOSE);
  
  count++;
  delay(500);
}