Final Project Proposal Chloe Wang

After my research, I found that I am very interested in screen or projected images interacting with human movements. So my project ideas will be around this general strategy of having an interactive screen. Furthermore, all my projects are centered on one general theme of human’s “blindness” online. The first project is about our blindness on fame, the second is about blindness on our own conducts, and the third is about our blindness on truth. These three projects would be relevant to all internet users since we have all participated or witnessed such phenomenons actively or passively. 
  1. First, I want to build an interactive set up that reflects on the current trend of everyone wanting to be famous. I will call it â€œ15 minutes”. As Andy Warhol once said that: â€œIn the future, everyone will be famous for 15 minutes”(15 minutes of fame). The project would start off being a blank canvas, or with a natural looking background. When someone walks in the fame, eye-shaped icons will slowly appear in rows and the eyeballs will turn towards that individual standing in the frame. After a while, maybe around 30 seconds, those eyes will slowly fade away meaning that people have lost interest in that individual and are seeking new ones. Indeed, there are many ways for one to be famous nowadays with social media applications such as Tik Tok or Instagram. But rarely can someone sustain their fame . This project is aimed to emphasize that instead of wanting to get famous online, maybe we should rather focus on something else that makes our lives meaningful. 
  2. For my second idea, I want to explore internet violence. It is called “Snowfall“. There will be a toy with a motion sensor in it. When someone punches it, there would be a snowflake coming down on the screen. As more people punch the toy, the snowflake would accumulate and eventually create an avalanche. I hope this project could signify that we normally ignore the impact of our actions. The toy represents someone on the internet who s being bullied. Instead of being on the internet, they would be shown in real life as puppets to show that we believe our actions do not actually have an effect on the person at the other side of the internet. Earlier this semester, news broke out that the K-pop star Sulli was found dead at age 25(Allen, 2019). This tragedy has made many people noticing the toxic online abuse scene that exists everywhere in the world. People described internet violence as snowflakes to avalanche, that all snowflakes are responsible for the avalanche. This project visualizes the seemingly harmless effects of individuals’ participation in online abuse. 
  3. My third idea is about the idea of truth. I want to call it “Truth about Truth” or “In Eyes”. With this project, I want to emphasize how difficult it is to achieve the whole truth. The basic idea of this project is to have a blurred photo that is originally showing a very contrasted scene, such as a kid playing soccer on a green field, but outside of the field is a destroyed city. The whole picture would be blurred in the beginning, but as someone walks into the frame, the area where the person is standing will be the focus, or not blurred anymore. I want to show that we are seeing and interpreting things from our own perspective. We are seeing only what we want to see, and it is almost impossible to see the real picture at once and decide what is the truth. I got this idea while talking with my friends regarding the Hong Kong protests happening recently. The news we see in China and the trends on Twitter completely represent two opposite sides of the violence. People on both sides are only willing to read the news they believe are true. So the truth is always what they want to believe in. This is determined in media study as “selective exposure”(‘Selective exposure theory’, 2019) . The scary part of selective exposure is the “third-person effect”. We have a tendency to think that we are not easily influenced by the internet as individuals. 
References:
Allen, F. (2019) ‘K-Pop star Sulli found dead at 25 after online abuse forced her to quit band’, The Sun, 14 October. Available at: https://www.thesun.co.uk/news/10130043/sulli-dead-25-k-pop-singer-korea/(Accessed: 15 November 2019).
15 minutes of fame – Wikipedia(no date). Available at: https://en.wikipedia.org/wiki/15_minutes_of_fame(Accessed: 14 November 2019).
‘Selective exposure theory’ (2019) Wikipedia. Available at: https://en.wikipedia.org/w/index.php?title=Selective_exposure_theory&oldid=925657827(Accessed: 15 November 2019).
 

Recitation 7: Arrays Chloe Wang

As the first step of this recitation, I wanted to draw a weird looking face on the canvas, but it took me a while to figure out all the positions. So I did the array function first and then edited the fact to what I intended it to be. So for the first step, I made a face consisting of two small circles as eyes, one triangle as the mouth, and a bigger circle as the face. Here is the code for the face I drew. 

void display(float x, float y, color c) {
  ellipse(x, y, 100, 100);
  stroke(c);
  ellipse(x-25, y-25, 10, 10);
  ellipse(x+20, y-25, 10, 10);
  triangle(x, y+30, x-40, y+20, x+40, y+20);
}
For step 2, I put in a for loop “  
  for (int a=0; a<100; a++) {
    display(x, y, c);}
I first put the for loop in draw(). When I ran the program, I saw the faces I drew popping up on my screen randomly, and they did not stop at 100. However, when I changed it into setup(), the program stopped creating new faces at 100. 
In step 3, I started using arrays in determining the position that these faces will appear on the canvas. I defined the number of instances as 100 and put in the array for x, y, and c: 
int numberofinstances = 100;
float[] x = new float [numberofinstances];
float[] y = new float [numberofinstances];
color[] c = new color [numberofinstances];
The “new” in the array is to make sure that the spots in the array are created. 
Then I created two for loops, one in setup and one in draw to include the array function in my program. So the for loop in setup looks like this: 
  for (int a=0; a<numberofinstances; a++) {
    x[a] = random(51,width-50);
    y[a] = random(51,height-50);
    c[a] = color(random(255), 255, 255);}
and the for loop in draw look like this:
  for (int a=0; a<100; a++) {
    display(x[a], y[a], c[a]);}
Now the 100 faces I create would appear on the canvas in different colors, but they would not move. To do step 4, I added 
float [] xSpeed = new float [numberofinstances];
float [] ySpeed = new float [numberofinstances];
before setup. I also included xSpeed in the two for loops to control its movement. In the end, to restrict the faces that they would only bounce inside the canvas, I used an if statement restricting the width and height of the canvas. Furthermore, to make sure that the edge of the faces would bounce on the sides instead of half of the faces will leave the canvas, I used 50, the radius of the circle as the minimal border for the faces to travel. Here is the if statement:
    if (x[a]>width-50||x[a]<50) {
      xSpeed[a]=-xSpeed[a];
    }
    if (y[a]>height-50||y[a]<50) {
      ySpeed[a]=-ySpeed[a];
    }
Here is my final code. 
int numberofinstances = 100;
float[] x = new float [numberofinstances];
float[] y = new float [numberofinstances];
color[] c = new color [numberofinstances];
float [] xSpeed = new float [numberofinstances];
float [] ySpeed = new float [numberofinstances];

void setup() {
  size(700, 700);
  colorMode(HSB);
  for (int a=0; a<numberofinstances; a++) {
    x[a] = random(51,width-50);
    y[a] = random(51,height-50);
    c[a] = color(random(255), 255, 255);
    xSpeed[a] = random(-10, 10);
    ySpeed[a] = random(-10, 10);
  }
}



void draw() {
  background(255);

  for (int a=0; a<100; a++) {

    display(x[a], y[a], c[a]);
    x[a]+=xSpeed[a] ;
    y[a]+=ySpeed[a];
    if (x[a]>width-50||x[a]<50) {
      xSpeed[a]=-xSpeed[a];
    }
    if (y[a]>height-50||y[a]<50) {
      ySpeed[a]=-ySpeed[a];
    }
  }
}


void display(float x, float y, color c) {
  //x,y,c local variable
  ellipse(x, y, 100, 100);
  stroke(c);
  ellipse(x-25, y-25, 10, 10);
  ellipse(x+20, y-25, 10, 10);
  triangle(x, y+30, x-40, y+20, x+40, y+20);
}
 
 Here is the working project.
 
 
 
Question 1: When I put the for loop into draw(), the pattern that I created continuously popped up on the canvas. However, when I put the pattern in setup(), the image I created only appeared 20 times, as that was the number I wanted it to appear. The images appeared in order but moved quite fast. After all of them were on the canvas, they stopped popping up. 
 
Question 2: By using arrays,  it is easier for defining various variables at the same time. I wouldn’t need to define a value every single time. By changing a single value in the for loop I could change the number of images appearing on the screen. 

Final Preparatory Research – Chloe Wang

   The Chronus exhibition is not only technology-heavy but it also requires a lot of thinking on the audiences’ side. In this exhibition, all of the artworks have to be closely observed for a long time to understand some of its ideas. My favorite work was “Genesis” by Li Xuezhi.

Genesis by Li Xuezhi
Genesis by Li Xuezhi

 It is composed of many retro media or daily objects. The whole structure is based on an old sewing machine. On top go it, there is a gramophone, an old video recorder, and other secret components. The whole thing was painted silver.  When I looked at the installation from beneath, I found a QR code,  and when I scanned it, it displayed a message: “Machinery is the subconscious mind of the world-Gerald Lee”. Although this project is mostly outputting information for its audiences, I found it interesting to explore the various aspects of this installation. qr code
 It had a short film projecting on the wall from the old film tape, and the gramophone was actually turning and making marks on the vinyl shaped disk. There was also an embroidery flag that has the shape of the sound wave of when someone says the sentence “Machinery is the subconscious mind of the world”. There were quite a lot for a viewer to explore in this artwork. The artist was turning several media objects and reassemble them into a new, multimedia, monster machine. Other non-technology based art exhibitions such as those at national galleries in different countries or specific visual artists’ exhibitions. I remember visiting the “Too Fast to Live, Too Young to Die” exhibition in New York. The whole exhibition was about Punk Rock graphics from the 70s to the 80s. When I entered the museum, I saw various punk and rock concert posters hanging on the wall, and two vinyl players on the table.

Too Fast to Live, Too Young to Die
Too Fast to Live, Too Young to Die

The exhibition was quiet, with little punk rock spirits. The exhibition as set up just for people to examine the posters and maybe listen to one or two songs by themselves. It was different from the Chronus exhibition where talking to other people and listening to the sounds of the machines were acceptable.  

    There are several other interactive projects that served as inspiration for my final project. First, I am glad to have visited the “Borderless” exhibition by teamLab in Shanghai. The exhibition consisted of two floors that took visitors to an imaginary universe that is filled with colors, lights, and sounds. There were different parts of this exhibition. The majority of this exhibition were flowers, animals, waterfall, or other animated components projected onto the blank walls. When we touched the wall, these animations would respond.

teamLab
teamLab

For example, flowers would change their color, waterfall would be cut off, and some animal and human figures would turn into flowers or stop walking and nod(I didn’t take pictures of them as I was too busy looking at them). Other parts of the exhibition include “light sculpture”, where they created shapes with lights, and visitors would feel as if they are walking among a forest of light beams.

teamLab
teamLab

One of the most interesting installations in the whole exhibition is a stone shaped object. When someone touches it, it would turn red. However, if it turns blue, it means that someone else in Tokyo or other places touched it as well. The whole experience was extremely magical and uplifting for me. I think teamLab created a new world for people to escape their reality and slowdown.  

    There are other three works that I found inspirational and their ideas align with my final project idea.  One of the projects I love is Rafael Lozano-Hemmer’s “Standards and Double Standards” (2014).

The project is reflecting on authority and the invisible surveillance that we can’t escape in this modern society. When someone walks into the field of hanging belts, the buckles would turn toward that person, creating an invisible pressure for those individuals interacting with the piece. Belts could not only represent authorities, but also men. I think other than surveillance, this project is also reflecting on people’s vulgar needs of trying to peek into other people’s lives. Nowadays almost everyone wants to become famous, to have the 15 minutes fame of their lives earlier and longer. At the same time, most of us have this unavoidable and inherent curiosity into other people’s lives. I want to further develop this idea in my project. Another project I found is one of Daniel Rozin’s mirror series, his “Penguins mirror”.

In this project, a group of toy penguins with white belly and black back can turn according to the movement of the person standing in front of it. This project is playing with the black and white on those penguins’ bodies. The audience observing this piece can feel as if they are being watched by those penguins. The movements of penguins turning towards the audience can also leave a strong impression to the viewer. However, I think the level of interactivity for this project is less than the previous one. Sure it leaves an impression, but it lacks the intimidating “being watched by invisible authorities” that “Standards and Double Standards” gives to its audience. The third project I found is called “Beluga”.

It is an installation of sea waves projected to huge blank walls. The waves respond to two dancers running around in the space. However, the interactivity in the last project is not so obvious. Although the scale of this project is huge and can give views a feeling of being half underwater, the waves do not have a direct and instant response to the dancer’s movements. It is still interesting to see these three interactive arts. They are all responding to the audiences’ movements. But by taking different forms, using different materials, these pieces can explore different ideas and provide different levels of interactivity for the audiences.  

    For my two previous projects, I defined interactivity from Tom Igoe’s essay “Making Interactive Art: Set the Stage, then Shut up and Listen”. For an artwork, what the artist wants to express does not matter so much. However, it is what the audiences receive from looking at the artwork that counts. Just as Igoe wrote: “The thing you build, whether it’s a device or a whole environment, is just the beginning of a conversation with the people who experience your work”(Igoe). During midterm, I defined games and video games as the most interactive forms of art. After researching these four projects and visiting the Chronus exhibition, I realized that the most interactive arts would respond to whoever is in front of it. A reward system or competition is not necessary for an interactive installation as long as people can have fun with it, be aesthetically pleased, or if the installation is thought provoking. An interactive experience can have deeper connotations to it, but it does not have to be that meaningful. Just like those in the Chronus exhibition, the installations are displayed but their statements are not so obvious. The artists’ goals are not to have audiences understand the way the artists wants, but instead is to trigger their imagination and have their own understanding of the projects. 

Bibliography:

Lawrence Arts Center (2017) Daniel Rozin: Penguins Mirror. Available at: https://www.youtube.com/watch?v=QlrnjjfLkTI (Accessed: 6 November 2019).

Li, X. (2019) Just What Is It That Makes Today’s Computers So Intriguing, So Nonsensical? Genesis. Available at: http://www.chronusartcenter.org/en/cac-jwistmtcsisu/ (Accessed: 6 November 2019).

Lozano-Hemmert, Rafael (2004) .Standards and Double Standards. Available at: https://vimeo.com/33931469 (Accessed: 6 November 2019).

Tom, I. (2012) ‘Making Interactive Art: Set the Stage, Then Shut Up and Listen’, 21 August. Available at: http://www.tigoe.com/blog/category/physicalcomputing/405/.

Zhu, G. and Yu, M. (2012) Beluga. Available at: https://vimeo.com/47124314 (Accessed: 7 November 2019).

Recitation 6: Processing Animation Chloe Wang

In this recitation, I wanted to use processing with my project in the last recitation.

Image from last recitation
Image from last recitation

There was a pink circle in my last project that is the only round object on the canvas, and it looked like it does not belong. In the beginning, I wanted to have the mouse touch the dot and the dot disappears. Later, I decided that make the circle changes color when the mouse touches it. 

Based on my older codes, I added a float value=0, and changed the first number in “fill” to “value”. I added a “void mouseMoved” function, so Processing knows that it should follow the position of my mouse. In mouseMoved, I defined the position of the circle with ” float d = dist(280, 180, mouseX,mouseY)”, and used an if statement to change the outputs of the movement. 
Here is a video of the finished effect:
 
Here is my code:
 
We also needed to create a moving circle that changes color smoothly and moves according to keys on the keyboard. To startoff, I had trouble figuring out how to make the circle expand and contrast periodically. After setting up the background color and canvas size, I added a keyPressed to put in a keyCode for the four directions. In the setting up the ellipse, the two position variables have “—“, or “++” to indicate the direction the circle would go on the x and y coordinates according to arrow keys. After getting help, I understood that I need to add a condition with a if statement to the code so that when the circle has expanded or contrasted to the size I wanted it to be, it would automatically change the direction of its movement. The last part is to have the circle change color smoothly. I set the colorMode to HSB and changed the first color of the stroke to a variable a. In this practice I used the HSB color mode, keyPressed with keyCode to indicate which key I am pressing, and if statement to constantly change the color. 
Here is my code for the homework part:
Here is a video of the finished effect:
 
 
 

Recitation 5: Procession Basics-Chloe Wang

I chose this painting called â€œAXL II” by LĂĄszlĂł Moholy-Nagy, an Austria-Hungarian artist. This painting was created in 1927, almost a century ago. 
 “AXL II” by László Moholy-Nagy
“AXL II” by László Moholy-Nagy
I found the image somehow relatable to my current position. The general shape of the central object created by four sets of lines are like two beams of light trying to light up the black dot in the middle. Or, they create a boundary for the black dot in the middle. The half-transparent colors in the middle quad create more levels to the painting, as if the painting has a three-dimension space within the quad, and the black dot is something in the middle that doesn’t belong to the same dimension. The cross next to the dot looks intrusive as if it is going to break the black dot. The painting is minimalistic yet captivating. 
I want to recreate this painting in Processing, but make it with different colors so it would look more cheerful. I first set the size to 600×600, then made the background a beige. I drew the shape on paper first to approximated their coordinates. After putting the actual coordinates in Processing, I realized that the drawing  will be way too small. So I doubled all the numbers so the drawing would fit the 600×600 canvas.  

draft
My draft

 Then I used triangles and quads to construct the basic shape, so it would be easier to fill them in with color later. I also used some lines within the shape. I changed the black dot in the middle to a transparent pink dot. I thought in this way, the dot will no longer look like it belongs in a different dimension from the beams of light surrounding it. The intrusive black cross is turned into a gray cross with no sharp edges(two lines with strokeWeight(8)), yet it is breaking the boundary. To make the colors transparent, I added the fourth constant in “fill”, and choosing from 0 to 255 to determine the transparency I wanted for particular shapes. Here is the code I used for recreating this drawing.

1
Code for the drawing

If possible I would make the red dot in the middle disappear or escape the trap of lights when a user drags on it.

final
My final creation

My final creation is still similar to the one by LĂĄszlĂł Moholy-Nagy, but with changes in color, shapes to change the resulting picture from a rather depressing sharp image to a softer and colorful image. However, because I used a quad for one of the general shapes, the final result does not look like two beams of light.