Author: kc4158

The epic of us

  This will be a game involves two people to throw dice on Processing to obtain their weapon to attack others. The weapon will be fictitious and both players will have a blood stripe to show their states using Arduino. Also, in the process of the game, the player will also get objects to protect himself from the attack of others. Players need to try to kill each other to win the game.

  The game seems to be simple but confused people about the purpose of the game. Actually, we want to make people reflect on the wars between countries for their own benefits and also the fight between people for their own interests. We need to collaborate and share resources instead of fight to occupy all the resources. The weapon players get will be more and more powerful which represents how does the development of the technology increase the collapsing force of the weapon such as the atomic bomb. And players’ ability to protect themselves will relatively increase but when one of the players choose to use the most powerful weapon they will both die. This represents if we human beings do not stop fighting with each other, we will finally go astray

See from inside

  This is a game involves two players who both draw one of them by choosing the image and show it in processing or to directly draw each other. With the help of Arduino, we can tell the player who draws himself or herself to adjust the part of his or her face which he dissatisfied with and allow the other people to judge.

  This aims to show that people now are affected by the mainstream of beauty and are always dissatisfied with their outlook. But through this, it allows people to realize that not only the appearance decides one’s beauty, other people can feel the inside of you which is more than the only see from the appearance.

Revolution

This is a game that only allows people to draw things using straight lines using processing and it is shown using Arduino to make the other people guess what it is. It is hard to explain meanings using straight lines and we want to show the difficulty when using the machines to communicate and the misunderstanding causes by it. We want people to think about how to balance the use of machines and avoid being controlled by them.

  During the recitation, I made the shape of the mushroom and use arrays and function to make it bounce randomly and change color. Here is the video:

recitation 7

Optional homework:

I used the append( ) and mousePressed ( ) to add a mushroom each time I click the mouse. Here is the video:

optional

Q1: In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

Answer: When you put for loop in setup( ), it only creates a certain number of spots you need and execute the loop only once. When you put for loop in draw(), the code is executed over and over again until you stop it.

Q2: What is the benefit of using arrays?  How might you use arrays in a potential project?

Answer: Arrays allow us to largely simplify the code when creating the same type of variable. It gives us easy access to change a group of objects by changing may be only one single number. Arrays can be used to control variables which need to be changeable in numbers.   

Code :

int mushroom = 100;
float[] x = new float[mushroom];
float[] y = new float[mushroom];
color[] c = new color[mushroom];
float[] size = new float [mushroom];
float[] speedX = new float[mushroom];
float[] speedY = new float [mushroom];



void setup(){
 size(600,600);
 background(255);
   for(int i=0; i < x.length;i++){
    x[i] = random(10,100);
    y[i] = random(200,300);
     speedX[i] = random(-5,5);
     speedY[i] = random(-5,5);
    
    
    size[i] = random(10,200);
    
    c[i] = color(random(255),random(255),random(255));
    
    print("y["+i+"] = ");
    println(y[i]);
  }
}
void draw(){
  background(255);
  for (int i=0; i<x.length; i++){
    display(x[i],y[i],size[i],c[i]);
    
    x[i] = x[i]+speedX[i];
    y[i] = y[i]+speedY[i];
    
  if (x[i] > width || x[i]< 0) {
    speedX[i] = -speedX[i];
  }
  if (y[i] > height || y[i]< 0) {
    speedY[i] = -speedY[i];
  }
}
}
void display(float u,float v,float size, color c){
  noStroke();
  fill(c);
  rectMode(CENTER);
  rect(u,v,size*0.4,size*0.4);  
  arc(u-size*0.01, v-size*0.1, size*0.8, size*0.8, PI, TWO_PI);
  fill(255);
  ellipse(u-size*0.1,v-size*0.4,size*0.08,size*0.08);
  ellipse(u-size*0.02,v-size*0.25,size*0.1,size*0.1);
  ellipse(u+size*0.1,v-size*0.35,size*0.1,size*0.1);
}
  

Code of the optional homework:

int mushroom = 0;
float[] x = new float[mushroom];
float[] y = new float[mushroom];
color[] c = new color[mushroom];
float[] size = new float [mushroom];
float[] speedX = new float[mushroom];
float[] speedY = new float [mushroom];



void setup(){
 size(600,600);
 background(255);
   for(int i=0; i < x.length;i++){
    x[i] = random(10,100);
    y[i] = random(200,300);
     speedX[i] = random(-5,5);
     speedY[i] = random(-5,5);
    
    
    size[i] = random(10,200);
    
    c[i] = color(random(255),random(255),random(255));
    
    print("y["+i+"] = ");
    println(y[i]);
  }
}
void draw(){
  background(255);
  for (int i=0; i<x.length; i++){
    display(x[i],y[i],size[i],c[i]);
    
    x[i] = x[i]+speedX[i];
    y[i] = y[i]+speedY[i];
    
  if (x[i] > width || x[i]< 0) {
    speedX[i] = -speedX[i];
  }
  if (y[i] > height || y[i]< 0) {
    speedY[i] = -speedY[i];
  }
}
}
void mousePressed(){
    mushroom = mushroom + 1;
  x = append(x,random(100,400));
  y = append(y,random(200,600));
  c = append(c,color(random(255),random(255),random(255)));
  speedX = append(speedX,random(-5,5));
  speedY = append(speedY,random(-5,5));
  size = append(size,random(10,200));
}
void display(float u,float v,float size, color c){
  noStroke();
  fill(c);
  rectMode(CENTER);
  rect(u,v,size*0.4,size*0.4);  
  arc(u-size*0.01, v-size*0.1, size*0.8, size*0.8, PI, TWO_PI);
  fill(255);
  ellipse(u-size*0.1,v-size*0.4,size*0.08,size*0.08);
  ellipse(u-size*0.02,v-size*0.25,size*0.1,size*0.1);
  ellipse(u+size*0.1,v-size*0.35,size*0.1,size*0.1);
}
  

The comparison between technology-based art pieces and non-technology based art pieces

  After the field trip to the Chronus exhibition, I had a totally new understanding of art. For a long time in my life, I have never considered machines, or to say, those technological devices to be art. Since they are usually very rational and lack the visual beauty which the non-technology based art can show. During my experience of appreciating art pieces(though I nearly know nothing about them), I saw many famous pieces and sense some of their beauty but are confused about the most of them. The pieces which I can understand usually belong to realism and those I have no idea about is usually abstract. Here are some examples:

The Last Supper by Leonardo da Vinci

The Picture of shrimps by Qi Baishi

Black Square by Kazimir Malevich

  As we can see, though we sometimes can not fully understand what the painter or the sculptor tries to convey, the non-technology based art pieces can still show us the direct visual impact through colors and shapes. And it doesn’t require the audience to have any background knowledge to feel the beauty of them from different levels. While seeing the technology-based art pieces, if one knows nothing about those components, it will be confused for him or her to understand and appreciate the work even with the help of the description of it. This is a picture of the inverted machine by Rechnender Raum. If I know nothing about technology, I will describe it as a sculpture constructed from sticks, strings, and little plumbs. But if I know more, I could probably understand the meaning from the description: “At the same time it is a full functional logic exact neural network, and a strict self-referentiality and ignorance to the viewer is realized.” After the field trip, though I did not understand most of the art pieces, I began to think about the beauty of those machines and components. From my perspective, the biggest difference between technology and none-technology based art is that the former requires more logic and background knowledge to appreciate and the more we know, the way we view and understand it will change. While the latter one requires more emotional feelings.

Online research

  I saw more projects online and find these two to analyze:

Smile TV – It works only when you smile https://www.creativeapplications.net/maxmsp/smile-tv-works-only-when-you-smile/

Click Canvas

https://www.creativeapplications.net/member-submissions/click-canvas/

  From my perspective, the Smile TV provides a successful interactive experience. Though the process of the whole interaction is simple, it is very clear and gives continuous feedback according to the changes of the user’s facial expression. When the user smile, the TV shows clear images. When the smile disappears, the images disappear. We can see from the video that the change of the expression and the TV is almost at the same time and it forms a loop when the user constantly changes facial expression. The reason why Click Canvas is less successful is that it only includes interaction every time the user press the button. If the user presses the button, the color of the button changed. The user can create an image they want by pressing buttons at different positions. The problem is that the whole process of creating an image is subjective which shows less interaction with the device.

  My definition of interaction is a cyclic process that requires at least two objects (both animate and inanimate are accepted) individually has its input-analyze-output. Also, the whole process needs to be meaningful and forms a loop that allows the user to continually interact with it. Base on this, my midterm project successfully made a device that can serve the food to you when you place your phone at the appointed place and withdraw the food if you take your phone away to use. That is a loop the same as the Smile TV and according to Crawford, “the value of the interaction exits at the moment someone feels connections-engagement, entertainment and so on”(Crawford,4). But, be careful, interaction should be interesting but more importantly, it should focus more on the input-analyze-output part.

Work cited

The Art of Interactive Design, Crawford (pages 1-5)

  Having read the book”Learning with Processing”, I created my own animation. The name of my character is Nigo, and it can move with my mouse and the color of the background can change with the click of the mouse.

Here is my code:

void setup(){
size(600,600);
}
void draw(){
background(255);
smooth();
frameRate(30);
ellipseMode(CENTER);
rectMode(CENTER);
//head of the nigo
fill(#F5E12F);
ellipse(mouseX,mouseY-140,90,160);
fill(0);
ellipse(mouseX,mouseY-80,40,40);
fill(255);
ellipse(mouseX,mouseY-70,10,10);
//body of he nigo
fill(#6ABF7D);
rect(mouseX,mouseY,40,120);
//hands of the nigo
noFill();
strokeWeight(4);
arc(mouseX+3, mouseY-20, 70, 70, PI, PI+QUARTER_PI);
arc(mouseX+43, mouseY-20, 70, 70, PI, PI+QUARTER_PI);//bug!!the direction of right hand!!!But it is OK look like this.
//legs of the nigo
strokeWeight(4);
line(mouseX-20,mouseY+60,pmouseX-40,pmouseY+90);
line(mouseX+20,mouseY+60,pmouseX+40,pmouseY+90);
int r = int(random(0, 255));
int g = int(random(0, 255));
int b = int(random(0, 255));
if(mousePressed){
background(r,g,b);
}

}

Additional Homework:

Step 1:

Creating a circle in the middle is quite easy since we have learned in class:

Step 2: 

The circle need to be periodically expands and contracts, but I met some difficulties. The circle can expand and contract, but the diameter of the circle always go from 0 like this:

After carefully thinking, I found that the int circleSize should not be 0. And after I made changes, it look like this:

Step 3:

  Follow the hint, I search the HSB mode of color which each stands for hue,saturation and brightness and each value range from 0-360,0-100,0-100.

Step 4: 

  I used the keyPressed function to control the  circle and it looks like this:

The code:

int circleSize = 120;
int circleX = 300;
int circleY = 300;
int b = 2;
void setup() {
size(600,600);
colorMode(HSB);
background(255);
}
void draw() {
colorMode(HSB);
background(255);
stroke(circleSize,100,255);
fill(255);
strokeWeight(20);
ellipse(circleX,circleY,circleSize,circleSize);
circleSize = circleSize + b;
if (circleSize >= 300 || circleSize<=100) {
b = b * -1;}
if (key == CODED) {
if (keyCode == UP) {
circleSize–;
} else if (keyCode == DOWN) {
circleSize++;
} else if(keyCode == LEFT) {
circleX–;}
else if(keyCode == RIGHT) {
circleX++;}
}
}

The list of function I used and the notes I took(the picture is not clear enough but I can refer to my note when I need them ):

colorMode()

mouseX,mouseY

if()statement

keyPressed()

I found this images from  Victor Vasarely

I chose this because it gave me a sense of dizziness and I feel like I will be dragged into the image. And the colors it chooses are very beautiful. Aso, the center of the squares are all in the middle of the center of the image.

In order to create an image like this, I need to figure out how to rotate the squares in the same angle and find the same color. Here is my work:

 I fail to keep the center of the square at the same point which is the center of the image. I tried the translate() function but it did not work well for me. Here is my code:

size(600,600);
background(126,70,66);
noStroke();
rotate(-PI/144);
fill(78,59,55);
rect(20,20,560,560);
fill(55,50,52);
rotate(-PI/144);
rect(40,40,520,520);
fill(78,59,55);
rect(60,60,480,480);
rotate(-PI/144);
fill(122,69,63);
rect(80,80,440,440);
rotate(-PI/144);
fill(185,69,69);
rect(100,100,400,400);
rotate(-PI/144);
fill(203,65,73);
rect(120,120,360,360);
rotate(-PI/144);
fill(207,110,122);
rect(140,140,320,320);
rotate(-PI/144);
fill(219,135,138);
rect(160,160,280,280);
rotate(-PI/144);
fill(241,173,163);
rect(180,180,240,240);
rotate(-PI/144);

I think processing can help us to create countless shapes and combine them together to form a new shape which is a really useful tool. But you need to do a lot of calculation and be familiar with the code which is a long way to go for me.