Author: rw2440

1. Waste classification game
We believe the interaction process must include “thinking”, it should distinguish from “response”. Therefore, we decided to integrate “learning” in our project. As the waste classification becomes more and more popular, we plan to design a game that can help citizens know better about the classification of waste. We want to use processing to create a scenario which has four dustbins. There will be trash falling down from the “sky”. We will also use fabrication and adurino to make a box with four buttons. Users will choose which to press when they see the trash. The trash will come to the dustbin in which the corresponding button is pressed. when they press the wrong button, there will be a voice of alarming, the dustbin will tremble. And when they press the right button, the trash will come into the garbage and there will be a voice informing the right choice. After five same kinds of garbage is thrown into the dustbin, the five garbage will be eliminated, the player will get five points. Each round takes 60 seconds.
2. Bouncing ball
We decide to create a board, a ball, and several bricks to make a game named “Bouncing ball”. Basically, the users need to bounce the ball to the bricks with the board. After the ball hit the brick, the brick will disappear. Users need to catch the ball with the board and eliminate the bricks, or the users will fail. We will make the game on the screen and the board you use to control the ball will have a physical substitution, like a gamepad. We want the users to have a stronger physical interaction with the screen. Through the gamepad instead of the mouse, users can have a stronger sense of control over the board.
The inspiration for our project comes from the classical bouncing ball game. http://www.4399.com/flash/51753.htm#search3

3. Let’s dance!
The inspiration comes from the dancing machine in the amusement arcade. We want to create a dancing game that encourages people to exercise more and have fun during the process. This game can help people to exercise or warm-up before doing intense sports. It can also train our agility and reaction ability. We will use the screen to give instructions. And we will make four to five buttons and set them on the floor. Users will step on the button according to the instructions shown on the screen.

Q1. Loop in setup() make the image appear once. Then it is still. While loop in draw() will repeat infinitely.
Q2. arrays help us to arrange and control multiple variables. I may use arrayes to create an image with multiple graphics.

int numbers = 50;
float[] x=new float[numbers];
float[] y=new float[numbers];
color[] c=new color[numbers];
float[] speedX =new float[50] ;
float[] speedY = new float[50];
float[] x1=new float[numbers];
float[] y1=new float[numbers];
float[] speedX1 =new float[50] ;
float[] speedY1 = new float[50];
color[] c1=new color[numbers];
float[] x2=new float[numbers];
float[] y2=new float[numbers];
float[] speedX2 =new float[50] ;
float[] speedY2 = new float[50];
color[] c2=new color[numbers];
color[] c3=new color[numbers];
void setup(){
  
  size(1000,1000);
  for(int i=0; i<x.length; i++){ 
  x[i] = random(width);
  y[i] = random(height);
  c[i] = color(255,0, 0,random(255));
  x1[i] = random(width);
  y1[i] = random(height);
  speedX[i]= random(-10, 10);
  speedY[i]= random(-10, 10);
  speedX1[i]= random(-10, 10);
  speedY1[i]= random(-10, 10);
  c1[i] = color(255,255, 0,random(255));
  x2[i] = random(width);
  y2[i] = random(height);
  speedX2[i]= random(-10, 10);
  speedY2[i]= random(-10, 10);
  c2[i] = color(121,180, 255,random(255));
  c3[i] = color(178,130, 247,random(255));
 }
}  



void draw(){
  background(255);
  for(int i=0;i<x.length;i++){
  display(x[i],y[i],c[i]);
  x[i] = x[i] + speedX[i];
  y[i] = y[i] + speedY[i];
  display3(x[i],y[i],c3[i]);
  x[i] = x[i] + speedX[i];
  y[i] = y[i] + speedY[i];
  display1(x1[i],y1[i],c1[i]);
  x1[i] = x1[i] + speedX1[i];
  y1[i] = y1[i] + speedY1[i];
  display2(x2[i],y2[i],c2[i]);
  x2[i] = x2[i] + speedX2[i];
  y2[i] = y2[i] + speedY2[i];
  if (y[i] > height || y[i]< 0) {
    speedY[i] = -speedY[i];
  }
  if (x[i] > width || x[i]< 0) {
    speedX[i] = -speedX[i];
  }
  if (y1[i] > height || y1[i]< 0) {
    speedY1[i] = -speedY1[i];
  }
  if (x1[i] > width || x1[i]< 0) {
    speedX1[i] = -speedX1[i];
  }
 if (y2[i] > height || y2[i]< 0) {
    speedY2[i] = -speedY2[i];
  }
  if (x2[i] > width || x2[i]< 0) {
    speedX2[i] = -speedX2[i];
  }
}
   
    
}
void display(float x,float y, color c){
  noStroke();
  fill(c);
  ellipse(x, y, 30, 30);
  
}
void display3(float x,float y, color c3){ 
  beginShape();
  fill(c3);
  quad(x-25,y-18,x-25,y+18, x-13,y+5,x-13,y-5);
  quad(x+25,y-18,x+25,y+18, x+13,y+5,x+13,y-5);
  endShape();
}
 void display1(float x1,float y1, color c1){
  fill(c1);
  beginShape();
  vertex(x1,y1);
  vertex(x1+10,y1);
  vertex(x1+15,y1-10);
  vertex(x1+20,y1);
  vertex(x1+30,y1);
  vertex(x1+20,y1+5);
  vertex(x1+18,y1+15);
  vertex(x1+13,y1+10);
  vertex(x1+5,y1+10);
  vertex(x1+10,y1+5);
  endShape();
 }
void display2(float x2,float y2, color c2){
  fill(c2);
  arc(x2+60,y2+60, 40,40, PI,PI*2, CHORD);
  noFill();
  stroke(0);
  curve(x2+60,y2+60,x2+60,y2+ 60, x2+60, y2+90, x2+50,y2+90);
  arc(x2+60,y2+60, 45,45, PI,PI*2, CHORD);
 }  

A. The Chronus exhibition we have seen uses technology and scientific elements to express scientific or artistic thoughts.

As the pictures show, exhibits uses electron device, metal, gears, etc. Normally, those materials are used for making industrial products. We, at least I, would not connect these materials with “art”. The exhibit using gears conveys the origin of the universe and expresses the long evolving time of the earth. The twirl of the gears symbolizes time. Each gear represents different stages of the universe.
The complex structure with sticks and motors shows the complexity and the logic operation of computers.

I can’t understand some of them even if I read the introduction. They are the art of science.
The non-technology based artwork, for example, paintings, normally shows the beauty of lines and colors.

Paintings usually describes the beauty of the landscape, still life, portrait, etc. Paintings often combine with the painters’ emotion and tendency. They are more individual oriented. While the Chorus exhibition relates more to the thinking and reflection on human development.
B. The first interactive project I choose is “Self-Choreographing Network – Cyber-physical design and interactive bending-active systems”. As Mathias Maierhofer and Valentina Soana sho, “This project proposes a hybrid approach: a real-time, interactive design and operation process that enables the (material) system to be self-aware, fully utilizing and exploring its kinetic design space for adaptive purposes”. “self-aware” and “adaptive” show the project’s capability of “thinking”. With “robotic joints” and digital set, the project can accomplish “kinetic purpose”. More importantly, the kinetic outcome is unpredictable. The outcome will differ according to the users’ reactions. The project has a purpose and autonomous reaction, which I believe makes it a great interactive example.

The second one which I believe is less interactive is called “Neo-Natur – A space for thought, about and for Nature”. The interaction part lies in the building process of this architecture. it uses Rhino/Grasshopper which is based on a mathematical principle to complete the creation. However, after the building process is done, it can not change. In other words, it lacks adaptiveness. It is not capable of changing according to the influence of the eternal environment.


C. In the description of the article “Interaction, design and new media”, it says “The real revolution of art and design is not happening with contents but with tools”. In other words, how we present matters more than what we present. Interaction relates more to the way we interact. The concept and content may be simple. But the method and the medium we use create interaction. Use the Choreography project I mentioned as an example. The kinetics that the machine shows is simple. But it uses complicated digital devices and it is adaptive. Therefore, it is interactive. Looking back at my midterm project, we lack the interactive tool. The opening of boxes does not interact with the user because the outcomes do not relate to the input directly. There is no necessary correspondence between the input and output. The input is like a switch, telling the computer that we can open a box. But which box we can actually open have nothing to do with the input. To wrap up, a successful interaction should contain a reasonable relationship with the input and the output. Each input should have a specific output. Through the interactive tool, each input gains an output that only belongs to itself.

Reference
Posada, Álex. Interaction, Design and New Media. 2016. EBSCOhost, search.ebscohost.com/login.aspx?direct=true&db=edsrac&AN=edsrac.310536&site=eds-live.

Neo-Natur – A space for thought, about and for Nature / ART+COM

Self-Choreographing Network – Cyber-physical design and interactive bending-active systems

My first animation is based on the image I made in the last recitation. With help from my classmate and learning assistant, I use “mouseX” and “rotate” to make an animation. At first, We couldn’t change the color no matter how we changed the numerical value. Then it turns out that we didn’t add the “void draw” function. We try to rotate the broader of the pattern and change the color of the pattern as we move the mouse.

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

void draw(){

background(108, 35, 8);
beginShape();

fill(11, mouseX/4, mouseY/4);
triangle(100, 280, 140, 280, 100, 400);
endShape();
beginShape();
fill(mouseX/4, mouseY/4, 11);

quad(140, 280, 220, 60, 480, 60, 400, 280);
fill(mouseY/4, 11, mouseX/4);
endShape();
beginShape();
quad(400, 280, 580, 280, 640, 100, 460, 100);
fill(mouseX/4, 11, mouseY/4);
endShape();
beginShape();
quad(360, 500, 380, 460, 520, 460, 500, 500);
fill(mouseX/10, mouseX/10, mouseY/10);
endShape();
beginShape();
quad(100, 400, 400, 400, 365, 500, 100, 500);
fill(mouseY/10, 11, mouseX/10);
endShape();
beginShape();
quad(500, 500, 700, 500, 700, 280, 580, 280);
fill(mouseX/10, 11, mouseY/10);
endShape();
noStroke();
beginShape();
fill(mouseX/4, mouseX/4, mouseY/10);
quad(300, 100, 360, 100, 270, 280, 210, 280);
endShape();
noStroke();
beginShape();
fill(37, 66, 106);
quad(360, 100, 500, 160, 490, 180, 320, 180);
endShape();
beginShape();
fill(mouseX/10, mouseY/10, mouseX/10);
quad(270, 280, 440, 280, 490, 180, 320, 180);
endShape();
stroke(251, 255, 196);

line(200, 300, 300, 100);
line(300, 100, 360, 100);
line(360, 100, 500, 160);
line(500, 160, 400, 360);
line(400, 360, 260, 300);
line(260, 300, 320, 180);
line(320, 180, 560, 180);
line(560, 180, 480, 340);
line(480, 340, 350, 340);
line(200, 300, 340, 360);
line(340, 360, 350, 340);
stroke(0, 0, 0);
translate(300, 300);
rotate(PI/mouseX*1000);
line(100, 20, 100, 500);
line(100, 500, 700, 500);
line(700, 500, 700, 20);
line(700, 20, 100, 20);

}

The additional homework is as follows:
float x=55;
float c=2;

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

strokeWeight(10);
colorMode(HSB, 100, 100, 100);

}

void draw() {
background(0, 0, 100);
stroke(color(x, 100, 100));
ellipse(300, 300, x, x);
x = x+c;
c= c+0.05;

if(x>=150 || x<=30){
c=c*-1;
}

}

The reason why I choose this motif is that I find this image is composed of different lines and color blocks. Lines shapes and colors are what we just learned so I can practice how to use them and be more familiar with them. The pattern of this image contains some connections and turns with the basic elements. Therefore, this image is neither too complicated nor too simple. The collocation among the line, pattern, and color also impresses me. As a result, I decided to draw this image.
At first, I want to draw the exact same image as the one I picked. Then I noticed that if I want to “copy” the original one, I will spend lots of time on calculating the size and fitting it in my sketch. However, I believe I should focus on the application of the Java language. In this way, I adjust a little of the shape and leave out some details. Overall, mine looks similar to the original one.

During the processing, I found I couldn’t use the black blue to cover the bottom color with “fill()” function. After asking professor Marcela, I realized my order of the instructions was wrong. The “fill()” function is supposed to be in front of the shape function. However, it still remains a question because I put the “fill()” function behind the “triangle()” and it still works!

I find using processing to draw is really fun. When we draw by hand, the painting is created directly by ourselves. while processing creates a sense of control. By writing codes, we instruct the computer to draw for us. We can also create more results with special techniques in processing.