The research I did was quite influential on my definition of interaction and my thought of the purpose of an interactive device. For now, I feel like the interactive device must deliver fun or some deeper reflection to the user and the audience around. So I think I will focus on the game format to make the interaction or deliver more deeper insights on current environmental problems.

1. Butterflies.

An individual game using the Joystick module to control the butterflies flying across the polluted mountains, burnt forests, drought fields, and finally arrives at their destination. Butterflies are beautiful. The monarch butterfly is a milkweed butterfly. The eastern North American monarch butterfly is famous for its annual southward autumn migration from the northern and central United States and southern Canada to Florida and Mexico. During the fall migration, monarchs cover thousands of miles, with a corresponding multi-generational return north. The western North American population of monarchs west of the Rocky Mountains often migrates to sites in southern California but has been found in overwintering Mexican sites as well. (Cite from Wiki) However, the species is threatened by pollution and deforestation. By making this game, it may realize the sense of protecting the environment for those players who are originally only interest in the game. The challenge for this project is obvious that drawing a butterfly and make the animation of the butterfly flying is hard. Also, it is also hard to control the time and process of the game. I have not considered how to set the challenge and the trigger to win/lose, so that will be something I need to work on.

2. Elude monitors.

A competitive game using infrared-ray distance monitor and buttons. In order to win, the player needs to avoid getting too close to the distance monitor while holding the button for more than 5 seconds. The players are allowed to disturb the competitor. This game is greatly inspired by the video about the interactive game BUTTON I researched in the last documentation (also shown in class). However, what I want to do is to add more restrictions on players’ moves and abandon too many rules for the player. It is simple, but I think it will trigger some funny interactions between the players, which I might not expect when making it. However, here is the challenge. The players may not feel fun. Meanwhile, the setting of monitors needs lots of user testings and adjustments.

3. Flowing river.

An interactive animation is shown on a big screen while the audience can interact with it using different keys on the keyboard. The color of the river will gradually change as the user keep using the resources from the river. When the river turns black, there will be no longer interactions. This one also wants to remember the player, who originally is only interested in the game, the importance of protecting the environment. Though the mechanism seems simple, there may also be challenges. For instance, the implications for how to have interaction may be not obvious enough for the user. The users may not get the reflection and fun from it. It takes time for the user to observe the purpose, which may not be possible since lots of the users actually lack patience.

Overview:

This week our recitation focused on the codings like functions and arrays which we learned in class. It is quite similar to the codes we had in our classes so that this time it is not hard.

Step 1:

The first step is just drawing a new graphic of my own design.  By including parameters such as x position, y position, and color to display the graphic, the graphic can run in the following steps. But for now, it is still. I use ellipses, rectangles, and triangles to create a cute rabbit. 

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

For step 2, create arrays to contain 100 x, y, color, and size for the rabbit. It will be still, countable, 100 rabbits on the canvas. 

But if we move the same function to the draw loop, it will repeat so that 100 rabbits keep appearing on the canvas. 

Step3 & 4:

Actually I did not understand what was the third step about so I directly went to the fourth step. I feel like the third step (which is already included in step two) is just building up the foundation for later use steps by steps. 

Step 4 is adding the speed to make the rabbit move. It is essential to add new arrays to contain different speeds for x and y so that those rabbits will move in different directions at different speeds. 

float[] x = new float [100];
float[] y = new float [100];
float[] speedX = new float [100];
float[] speedY = new float [100];
float[] size = new float[100];
float red[] =new float[100];
float blue[] =new float[100];
float green[] = new float[100];

void setup() {
  size(800, 800); 
  background(255);
  for (int n=0; n<x.length; n++) {
    x[n]=random(width);
    y[n]=random(height);
    speedX[n]=random(-15, 15);
    speedY[n]=random(-15, 15);
    size[n]=random(5, 60);
    red[n]=random(0, 255);
    blue[n]=random(0, 255);
    green[n]=random(0, 255);

  }
}

void draw() {
    background(255);
    for (int n=0; n<x.length; n++) {
      display(x[n], y[n], size[n], color(red[n], green[n], blue[n]));
    x[n] = x[n] + speedX[n];
    y[n] = y[n] + speedY[n];


    //// check the edges
    if (x[n] > width || x[n]< 0) {
      speedX[n] = -speedX[n];
    }
    if (y[n] > height || y[n]< 0) {
      speedY[n] = -speedY[n];
    }
    }
}

void display(float x, float y, float size, color c) {
  //Use these parameters to create your graphics
  noStroke();
  fill(c);
  rect(x, y, size, size*3, 50);
  rect(x+size*1.6, y, size, size*3, 50);
  ellipse(x+size*4/3, y+size*3.5, size*4, size*3);
  fill(255);
  ellipse(x+size/3, y+size*3.5, size*0.35, size*0.35);
  ellipse(x+size*5/3, y+size*3.5, size*0.35, size*0.35);
  triangle(x+size, y+size*3.8, x+size*2/3, y+size*4.2, x+size*4/3, y+size*4.2);
}

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

The benefit of using arrays is to contain large amounts of variables and avoid using the same functions repeatedly. Once the arrays are used in the codings, it will be quite clean and direct. It also makes the revision easier. 

I think I may use it to set up the background of my instruction and let it be interactive when people trying to respond by pressing the mouse. For instance, letting lots of butterflies flying out when the user presses the keys. (I am not so sure about the project yet).

Optional Step:

I added some interactive functions when the key or the mouse is pressed.

    if (mousePressed) {
      if (x[n] > mouseX) {
        speedX[n] = -10;
      }
      if (x[n] < mouseX) {
        speedX[n] = 10;
      }
      if (y[n] > mouseY) {
        speedY[n] = -10;
      }
      if (y[n] < mouseY) {
        speedY[n] = 10;
      }
    }

    //// check the edges
    if (x[n] > width || x[n]< 0) {
      speedX[n] = -speedX[n];
    }
    if (y[n] > height || y[n]< 0) {
      speedY[n] = -speedY[n];
    }
  }
  if (keyPressed) {
    if (key == 'b' || key == 'B') {
      for (int n=0; n<x.length; n++) {

        red[n]=random(0, 255);
        blue[n]=random(0, 255);
        green[n]=random(0, 255);
      }

    }
    if (key == 'v' || key == 'V') {
        for (int n=0; n<x.length; n++) {
    x[n]=random(width);
    y[n]=random(height);
    speedX[n]=random(-15, 15);
    speedY[n]=random(-15, 15);
    size[n]=random(5, 60);
    
  }
  }
  }

Chronus Exhibition

Chronus Exhibition interests me by its feature that all of the artwork exhibits are based on some kinds of advanced technologies. As the ideology conveyed by this exhibition, the technologies evolve nowadays make people confused. What are our connections with these machines? “Just what is it that makes today’s computers so intriguing, so nonsensical?”Comparing to the traditional art form, such as drawings, the devices in Chronus Exhibition are moving. Comparing to films, they are three-dimensional. These features make the ideologies better conveyed to the audience in a rather direct way but the form itself is still an art. Besides the ideologies that the exhibition conveys, what differentiates the exhibition with other pure art exhibitions is the interaction is inside of the machine itself but brings reflection to the audience. 

There is only one device called Artificial Intuition that is directly interactive. According to the audience’s position and whether they are moving or not in front of the sensor, the plastic, black tentacles move and scratch. However, the subjects of interaction may not be a human being. This idea is clearly revealed by showing the interaction within the well-developed, advanced, intriguing machines. For instance, The Form of Being is a device that is comprised of “a system of intelligent agents in a simple environment with a defined number of possible states to be in and a choice of actions to be exerted”. There may be no interaction for the device with the audience. Nevertheless, inside the machine itself, there is a simple objective for each agent to achieve, with a system of punishment versus reward in the artificial intelligence program. By showing the process of agents’ movements, the audience is able to see how AI evolves by itself. It also reveals the process of learning, which is similar to our learning processes. The reflection of the audience is one of the most important parts of the interactive devices. Chronus Art exhibition achieves this and brings the question of technology into the audience’s minds.

Research

Besides the exhibition, I researched on several projects and exhibited artworks, but lots of the artworks were not interactive by my definition. Here are three of the most representative projects in my consideration.

First, the game B.U.T.T.O.N. (Brutally Unfair Tactics Totally OK Now), which is an interactive game based on four gamepads and one screen. Using four different characters to represent the players and giving the instructions through the screen, the player who holds the button on his/her gamepad for several seconds will win the game. The rules and the mechanism seem to be simple. However, the fun is not. The players will not only interact with the device but also the other three players, who may disturb and stop each other from the gamepads. This is definitely a successful interactive device. When we see people laughing when they are playing the game, we also get entertained through this process. It inspires me that the mechanism and the rule of the device itself have no need to be complex or too advanced. The most important idea behind the interactive device is too bring fun or improvement based on current technologies and understandings on particular events. 

Second, Playing Wall Tetris is also an interactive game involving visualized and playable technologies. However, this one is not as successful as the BUTTON since it lacks improvement. Why not just play Tetris on your phone? Meanwhile, the visualization is not so comfortable. The lights of LED lights seem to be too strong that makes this Wall Tetris a little bit of annoying. This reminds me that the outfits of the interactive device need to be good for the audience because this is closely related to the experience they will have during the usage. Also, it reminds me of my midterm project, which is questioned by one of the teaching fellows that what is the meaning and the purpose to replace the Book of the Answer with this complex, huge device to get the answer. We see that if we want to build up a new interactive device, we must research on previous, existing devices and improve them. 

The last one is an interactive video example. It is a successful interactive experience for me and this technology is applied in many films and video games. This is a way to get the audience involved in the situation and let them empathize with the situation. This inspires me that the interactive device we build must involves in something that can be reflective, empathetic, or fun.

Interaction

“Listening, thinking, and speaking” in human terms from Chris Crawford’s perspective and “input, processing, and output” in computer terms (XX). This is the first quote I use to interpret the term “interactive”. Since the beginning of the semester, we work on the definition and understanding of “interactive” and the understanding of mine changes a lot after making the group project and the midterm project. In the group project, what is interactive to me is ” a procedure of two or more objects affecting each other in various ways in a short period of time”. It adds a restriction on the original interpretation that the influence on the other object must be in a short period of time. It needs to be clear and obvious. In the midterm project “Boxes know the answer”, I adds “bring reflections and new understandings on some bigger, theoretical questions for the audience” into the definition of “interactive”. The significance of certain interactive devices needs to be clear so that the audience can understand the reason and the meaning of the author creating this project.

Using the words from Making Interactive Art: Set the Stage by TIGOE, Then Shut Up and Listen, “Don’t interpret your own work”. This is the most profound lesson I learned in the midterm project user testing session. It is hard to let the audience understand your original meaning and what you want them to do. So actually you need to carefully design your project, giving obvious implications and automatic feedback by the device itself instead of you. This is shown in the exhibition that the interactive inside of the device is understandable for the computer and in the game BUTTON, instructions and the rules of the game are clearly given by the screen. “Think of interactive artwork, don’t think of it as a finished painting or sculpture.  Think of it more like a performance.” This is what TIGOE says about interactive devices, and what I understand about interaction.

Reference:

Crawford, Chris. “Art of Interactive Design.” Art of Interactive Design | No Starch Press, nostarch.com/interactive.htm.

http://www.tigoe.com/blog/category/physicalcomputing/405/

https://www.youtube.com/watch?v=Hki5YKPoOQY

https://www.youtube.com/watch?v=RRXkeP-lxWY

https://www.youtube.com/watch?v=aAOplz5ri5k&feature=youtu.be

During this recitation, we worked individually in processing to make the processing animation. There is an option to work based on the last recitation’s output. However, the drawing from last recitation was too complex that is hard for me to do some revision. I tried to change the color of the drawing when clicking the button, but I failed. So I changed to work on a new drawing and the additional recitation homework. 

Recitation Exercise (The New Drawing):

The inspiration for this drawing came from class, in which we learn how to make an ellipse move freely. I added some interaction functions inside, such as “keyPressed” to change the direction of ellipse movements and “mousePressed” to change the color of the ellipse. The aim of the player is to keep the moving ellipse inside of the canvas so that they will not lose the way. To make the purpose more clearly, I name it “lost among stars” and add a few dots in the background so that it will be more likely to a galaxy. 

Here is the code and how it works:

Screen Recording 2019-11-01 at 1.51.04 PM

Additional Recitation Homework:

The first step of the additional recitation homework is to set up the canvas and draw an ellipse on it. This part is not hard.

The second step is to let the circle periodically expands and contracts, which is also easy. Just define two new variables to control the speed and diameter, which visually make the circle expands and contracts.

The third step gets a little hard for me since we didn’t learn the HSB mode in class. I tried to use the HSB mode but found the stroke color was not so bright as the one shown in the sample gif. So I changed into RGB mode and added three variables, which controlled red, green and blue. 

The last step is to modify the sketch to let the circle moves around the canvas based on the mouse position input. It is also easy since we only need to change the position of the center of the ellipse as the variable “mouseX” and “mouseY”.

However, the added bonus, which lets us make the canvas’ edges a border that the circle or square cannot pass, is really hard. I first try the epllipseMode(CENTER) and epllipseMode(CORNERS) to let the circle be inside of the canvas when the mouse moves to the edge. But it doesn’t work.

So then I try to let the mouse position input remain at the previous point. It doesn’t work either. But the conditions to change the code I calculated was correct. 

After consulting my classmate Xueping, I found that I only need to add two new variables to control the center position of the circle and let the position be fixed once the circle exceeds the borders. 

One important point here is to float the variable inside of the draw function so that the change will be smooth.

Codes are the following:

float speed =5;
float x = 250;
float colllorA = 0;
float colllorB = 0;
float colllorC = 0;
float colorSpeedA = 3;
float colorSpeedB = 4;
float colorSpeedC = 5;

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

void draw() {
float hahax = mouseX;
float hahay = mouseY;
background(#FFFFFF);
strokeWeight(20);
stroke(colllorA, colllorB, colllorC);
if (colllorA>255||colllorA<0) {
colorSpeedA = – colorSpeedA;
}
colllorA = colllorA + colorSpeedA;
if (colllorB>255||colllorB<0) {
colorSpeedB = – colorSpeedB;
}
colllorB = colllorB + colorSpeedB;
if (colllorC>255||colllorC<0) {
colorSpeedC = – colorSpeedC;
}
colllorC = colllorC + colorSpeedC;
if(x>300||x<50){
speed = -speed;
}
x = x+speed;
if(hahax<x/2){
hahax=x/2;
}
if(600-hahax<x/2){
hahax=600-x/2;
}

if(hahay<x/2){
hahay=x/2;
}
if(600-hahay<x/2){
hahay=600-x/2;
}

ellipse(hahax, hahay, x, x);

}

Screen Recording 2019-11-01 at 12.28.27 PM

Step 1: Choose an image to be your motif

In the suggested sources below I picked the penetrating (B) from the website “Computer Graphics and Arts”:

• • • Computer Graphics and Arts (1976 – 1978)
    • https://www.guggenheim.org/artwork/162

I chose this because though it was only made up of a few quads, it was full of orders. The contrast between the colors is also interesting while the yellow, bright lines catch most of my attention. 

Step 2: Draw your image in Processing

I decided to directly emulate my motif’s design because the order of coding must be very logical. I started with the background first and then the blue quads. The lines were the last part I drew. It was really difficult to calculate those points to make sure each line was parallel to the others. 

I drew the draft on the paper first and did all those calculations. However, there were still some mistakes and deviations, which made the final product different from the original one. 

The ratio is absolutely different and it is hard to simulate the same texture of those fills, which make the whole look so different from the original picture. I feel like processing is hard to use while other websites or apps can directly create a shape and fill the color I want without any coding and calculations. Though it is a funny experience, once it applies to a big project, which may need massive amounts of drawings, it may not be funny for its struggling calculations.

Here is my code:

size(800,600);
background(#670917);
fill(#3B010A);
stroke(#3B010A);
quad(100,50,500,50,450,300,50,300);
quad(790,150,765,300,365,300,390,150);
triangle(0,300,50,300,0,500);
quad(0,500,350,500,325,600,0,600);
quad(0,600,0,550,800,550,800,600);
quad(765,300,800,300,800,600,715,600);
fill(#1C2440);
stroke(#1C2440);
quad(200,150,300,150,275,300,175,300);
quad(300,150,400,210,400,300,275,300);
quad(400,210,650,210,635,300,385,300);
fill(#313E6C);
stroke(#313E6C);
quad(290,210,275,300,450,300,455,270);
triangle(455,270,290,210,400,210);
triangle(400,210,455,270,460,240);
stroke(#FAF7B8);
strokeWeight(5);
line(200,150,300,150);
line(300,150,460,240);
line(460,240,434.17,425);
line(434.17,425,350,390);
line(350,460,160.67,356);
line(160.67,356,200,150);
line(290,210,650,210);
line(650,210,620,390);
line(620,390,350,390);
line(350,390,260.67,345);
line(290,210,260.67,345);
line(350,390,350,460);