Recitation7: Functions and Arrays-Andrew Xie

On this week’s recommendation, we need to use array and for loop to complete the code.

Q1

I think for loop in setup is a code that is completed in an instant. Since the tasks in setup are only executed once, the code in setup will be completed in an instant. Draw means that the whole big program runs in a loop.

Q2

When using array, you can simplify the code, such as arranging the numbers in order. Different numbers represent a value. The advantage of array is that you don’t need to set them one by one. In future projects, I think we can use array to simplify the program in coding or to design games.

The final code

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

void setup() {
size(600,500);
background(255);
for (int i=0; i < 100; i++) {
x[i] = random(width);
y[i] = random(height);
speedX[i] = random(-2, 2 );
speedY[i] = random( -2, 2 );
size[i] = random(10,500);
c[i] = color(random(255),random(255),random(255));
drawCircle(50,50,color((255),color(255),color(255)));



}

}

//void display(float x, float y, color c) {
//}

void draw() {
background(255);
for (int i=0; i< 100; i++){
drawCircle(x[i], y[i], c[i]);
circle(x[i], y[i], 100);
circle(x[i]-25, y[i]-25, 20);
circle(x[i]+25, y[i]-25, 20);
arc(x[i], y[i], 80, 80, 0, PI);
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 drawCircle(float u, float v, color c) {
//noStroke();
fill(c);
ellipse(u,v,50,50);
}

Preparatory Research and Analysis-Andrew Xie

Chronus Exhibition

This is the first time for me to visit the Exhibition with the interactive experience. Chronus Exhibition shows us the interactive relationship between people and objects, and calls on people to reflect on the current interactive relationship.What impressed me most was the first work of the pavilion, called artificial intuition. This work USES infrared induction to recognize the existence of human beings. What is interesting is that, unlike other works in which the interactive part serves human beings, this work has vitality and is offensive to human beings. I had expected the claws to fall back as people approached. Instead, these tentacles will try to hold you back, and this is the first time I’ve seen a work that’s not about people, but about trying to drive people away. The author’s intention is to make people rethink the relationship between intuition and reasoning.The most shocking work I have ever seen is the rehender Raum, which is made up of small wooden plumbers and electronic components. This work is very mysterious. Through the traction of the line, the small plumb bob will move offline in a certain period of time. The structure of the whole work is clear. The geometric basis of this work is from the inside to the outside, reflecting the machine’s sense of disregard for human beings.The exhibition that I recently visited without technology is the flying goldfish exhibition. This exhibition is different from the chronus exhibition by placing goldfish in fish tanks of different shapes and using neon lights of different colors. The goldfish exhibition makes me feel the beauty of life, but the chronus exhibition will make me feel the equality of life and the reverse view of things created by human beings.

001

002

003004

Research

The first interaction I found was called the shadow of a fan. The project is that when a person stands on a specific ground, the projector will display a fan on the ground in front of the person, the paper fan will expand when the person stays, and the paper fan will close when the person leaves. And when the fan is open, there will be animation works on the fan. The reason I chose this project is that it shows people the art of light and shadow, how to interact with the audience through lights, and how to spread some values.

“We hope that we can make a good use of all kinds of Japanese elements on the fan by using the contemporary creative methods with the fan as the carrier, and then integrate them into the large fan array to show them to the audience in a dynamic form. So that you can experience the main content and original intention of this activity from such interactive experience. In the overall area of nearly 6 meters wide and 10 meters long, we will set up 18 fan images to form a field space of fan array image. Under the background ripple, different stories hidden in 18 fans will meet participants unexpectedly, and then participate in the formation of a grand opening and closing scene.”

https://www.manamana.net/video/detail?id=1180

The second project is called transparent society. The author wants to express the lack of privacy for us living in the digital age. People live in a relatively real life, “happy” walking on a smooth road pieced together by digital information.
We quietly savor other people’s joys and sorrows on social media, while our lives are being chewed by others. In this era, we seem to be the God who can control everything, but we are also controlled by everything This is an endless game, and also a strange landscape created by the digital age.

https://www.manamana.net/video/detail?id=26047

At the same time, I also found an interactive work that was not very successful. The author used sand to form a human image on the screen through the photos of people passing on, and then let the sand pass. This is a very simple design, but it lacks the interaction with people, and transmits little value.

https://www.manamana.net/video/detail?id=30568

Definition

In the group project, my definition of interaction is that interaction includes two aspects of human and machine, and I focus on human-computer interaction, which is to make human life more convenient and can not harm human beings.According to my midperm project, I thought that interaction means that the work is practical and entertaining, but it is pointed out that it is simple interaction. It can’t bring anything to interact only through fans, and it is suspected that it discriminates against women. Therefore, my work can only be called interaction project, not interaction experience. After the search on the Internet and the experience in the period, I think that interaction experience It should be a continuous and repeatable experience, not a short interaction based on an action, and think about the meaning of the interaction.

“We don’t want our digital lives to fade away.
If we want to preserve them, we need to make sure that the digital
objects we create today can still be rendered far into the future”
– Vint Cerf, former vice president of Google

Just like his reflection on the data age, we need to ensure the future of interactive works, reflecting that people perceive the future in advance through interactive experience, which is to present innovation to the audience.

work cited

Interactive art

Recitation 6: Processing Animation-Andrew Xie

Introduction

In the recitation of this week, I chose keypress as the interactive condition. First, I drew a robot and then pressed the keyboard to trigger the random color change of the background.

01

And there are the code:

void setup(){
size(1000,800);
fill(255,128,0);
ellipse(575,650,120,120);
fill(0,204,204);
rect(500,460,150,10);
line(580,500,580,300);
line(600,500,600,300);
line(620,500,620,300);
fill(204,0,102);
rect(500,450,150,200);
fill(204,0,102);
rect(500,460,150,10);
fill(153,255,255);
ellipse(600,230,150,150);
fill(204,0,204);
ellipse(620,210,45,45);
fill(0,153,153);
ellipse(620,210,8,8);
fill(255,0,255);
ellipse(580,210,16,16);
fill(51,255,150);
ellipse(630,180,12,12);
fill(255,102,102);
ellipse(645,235,8,8);
line(660,260,700,270);
line(620,170,630,90);
line(570,180,550,160);
}
void draw(){
if(keyPressed == true){

background(0);

background(random(255),random(255),random(255));

}
size(1000,800);
fill(255,128,0);
ellipse(575,650,120,120);
fill(0,204,204);
rect(500,460,150,10);
line(580,500,580,300);
line(600,500,600,300);
line(620,500,620,300);
fill(204,0,102);
rect(500,450,150,200);
fill(204,0,102);
rect(500,460,150,10);
fill(153,255,255);
ellipse(600,230,150,150);
fill(204,0,204);
ellipse(620,210,45,45);
fill(0,153,153);
ellipse(620,210,8,8);
fill(255,0,255);
ellipse(580,210,16,16);
fill(51,255,150);
ellipse(630,180,12,12);
fill(255,102,102);
ellipse(645,235,8,8);
line(660,260,700,270);
line(620,170,630,90);
line(570,180,550,160);
}

2

4

The whole process is not difficult, but how to combine many shapes into a robot takes some time.

Additional homework

We need to draw a circle and have it change color randomly as the mouse moves.

There is the code:

float x=60;
float d=4;

void setup(){
size(600,600);
background(255);
strokeWeight(10);
colorMode(HSB,100,100,100);

}
void draw(){
background(0,0,100);
stroke(color(x,x,x));
ellipse(mouseX,mouseY,x,x);
if( ( mouseX<width) && (mouseY<height)
&&(mouseX>0)&&(mouseY>0) ){
x = x+d;

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

123

What recitation lets me learn is how to find the appropriate speed of circle change and how to use if statement. The difficulty for me is how to connect with each other when x and y meet the conditions and trigger the corresponding response.

interesting thing

colorMode()  HSB

keypressed()

mouseX

mouseY

Recitation 5:Processing Basics- Andrew Xie

The picture I chose is Josef Albers Homage to the Square: Homage to the Square 

R5 1

The reason why I choose this picture is that I have just been exposed to the processing software, and I don’t know how to use it very well. So I want to start from a simple way, and it can be easily modified by arranging rectangles of different sizes.Because the color discrimination of this picture is not high, I think it is difficult to make the color close to the original picture.

02

For example, I made this picture at the beginning, but I found that the color was wrong and the proportion between RBG was wrong, so I modified it several times.

003

I finally got the right color, but still didn’t get the rectangle in the right place.

004

So I delete the inner rectangle, I want to make a simple robot head, just add the circle and triangle.006

007

008 

009

The head of the robot with a red background is my final work. In fact, it is quite different from the original one which was just a rectangle. Because I didn’t solve the problem of moving the small rectangle to the middle of the picture, I changed my mind. Similar places only retained the background color is red, with the outermost large rectangle. I think processing is a good way to understand the design, because it is actually much more complicated than what you can see directly. Even just placing a few rectangles takes a certain amount of time, rather than drawing with a brush on paper. This makes me understand more about the difficulty of art creators, because I spent the whole recitation to complete this painting, and it was also based on the transformation of others.

Midterm Project: Be The Wind-Andrew Xie-Eric

CONTEXT AND SIGNIFICANCE 
First of all, what inspired me most in the previous Group Project was the entertainment of human-computer interaction. We named it Let’s dance, which is to realize the interaction between people through wearable intelligent devices and enhance entertainment. After all, I think it is an achievement to bring happiness to others with the project I created. My favorite interaction design is the Iphone4, and I’ve searched the files for it. The great thing about the Iphone4 is that it changed the smartphone landscape and really changed the world. For example, the physical and mechanical keyboard will be changed into a touch screen, and the keyboard will be replaced by fingers. The ios system will be independently developed to make the mobile phone become an ecology. Apple’s innovations have given me new ideas about interaction, such as simplifying complexity, removing unnecessary electronic components while maintaining the original interactivity, and improving the user experience. And my own definition of interaction is to reflect entertainment, usefulness, and convenience in the physical interaction between human beings and machines. After the presentation, I was glad to find my own project very unique and entertaining, because I can confidently say that laughter is the most when I present it, which is also my original intention to bring joy to others. I think my audience is all people. After user text, I have improved the way of interaction, which I will elaborate on in the next paragraph. 

  •  CONCEPTION AND DESIGN:    

My project is called be the wind. Inspired by the classic action of Marilyn Monroe, I want to use one or two sensors to trigger a fan to blow the 3d printed doll and make the skirt blow up. I think it’s just an homage to the classic movie scene. In the end, I chose the ultrasonic unit, which has a larger range and is more sensitive than the infrared range finder. At the same time, I used 3d printing and laser cut. Unfortunately, I wanted to build a story about the dragon blowing the princess’s skirt with the wind. However, due to the complicated structure of the dragon in 3d printing, I failed to print it . In order to enable users to interact with my project more clearly and easily, I chose to put the original on the outside of the whole decoration and used laser cut to build the chassis supporting the doll, although it was not easy to be found because I decorated it with stickers. In order to make the doll look more beautiful, I gave up the decoration of Led and changed to light belt. However, this greatly increased the difficulty of this project, because it was difficult to control the code and color transformation of the light belt, and it was difficult to make the light belt work with the fan with ultrasonic original because there were many delays. But I finally succeeded, but I have to give up another idea that a speaker is installed, when the dress fan blowing up, speaker will send a piece of music, or a sentence, but the technology is very difficult, I spent two days there is still no solution, and most difficult arrangements, in order to the overall effect is better, and make this project is not so strange, I give up the idea of the installation of speaker.

  • FABRICATION AND PRODUCTION

I want to emphasize the user test experience, because it help me to modify my project of the core concepts. The user text on Friday, I was shown at the core of the internal structure, because the doll is in print, I can’t be adornment, only ultrasonic and two fans are installed. But I explained here to experience my project people will also have a doll, her skirt will be blown up, a lot of people think this is an interesting idea.

mid 1

mid 3

mid2

mi'd 4

But others raise questions for me, although I’ve had a very interesting project, but may have some don’t respect women, after all, not all people will think it’s only a skirt of simple games, and will make a whole is not very beautiful. And the interactive with the audience is too simple. It is very important to me because I didn’t realize my project might offend others. Therefore, I made a lot of changes in the whole project. I fixed the doll’s skirt with adhesive tape to ensure that the skirt would not be affected by the wind and the whole skirt would blow up. I replaced the effect of the skirt with a veil to make the veil float in the air to create the scene of the bride’s wedding, but I had to give up the 3d printed dragon.In addition, in order to achieve a more beautiful effect, I gave up the idea of using a speaker to produce sound. Instead, I chose the light belt and placed it under the skirt of the doll to create a beautiful color for the long skirt when the fan works.

mid5

After all, I think respect is the most basic politeness. For me, the most difficult part is the code. The code of light band and the code of arrangement are very complicated, which took me a long time to write.Finally, I decided to control both the light belt and the fan with the ultrasonic element. The closer the person is, the faster the fan is, and the shorter the time for the light belt to change color.

The following picture is the code of my whole project, as well as the color-changing code of the light belt and the failed speaker code.1

23

  • CONCLUSIONS:

I think my project is basically consistent with my definition of interaction. It is entertaining, fun for most audiences and easy to operate. However, there is a slight lack of interactivity. My final plan is to use only the light with a ultrasonic original as the basic original, and the audience can only be controlled by the external ultrasonic original. Although it is difficult to control the direction of the wind, I can only constantly change the position of the headdress, and finally, my audience succeeded in floating the headdress in the air. If I have more time, I will change the shape of the doll into a jellyfish, in order to avoid other people’s misunderstanding, and play music during this period. Or to solve the problem of wind direction and lack of interaction, I will join the stepper to let the doll in the wind. When the fan works, it can rotate to make the headdress float better.I learned from many failures to learn how to program further, because many of the difficulties I encountered were that I could not write code, which led to giving up a good plan. Secondly, time management, because the communication time between me and my peers was rarely inconsistent with each other, which led to our final separate projects, and later I will plan the time in advance.

It’s true that this project can’t change anything, but I’m glad that it can bring happiness to some people, or attract the audience to think about what interaction is from the perspective of onlookers, and evaluate the good and bad of this project from their interaction experience. The real value is not written in the manual to tell the audience, but to let the user experience spontaneously generate their own behind this project. Thinking, for example, what is the meaning of interaction? From the perspective of critical thinking, although my project can make the audience feel a strong guiding pleasure, it does not deeply attract the audience to generate concepts and understanding of interaction. Sometimes they only care about whether the project is fun or not, but as a designer, I have the obligation to deliver the value of interaction, not just fun.For my own improvement, I have a deeper understanding of interaction, and how to reflect the value in the project is the place I still need to improve. I want to make meaningful works, rather than just let some things shine. But if I only want to spread my value, it will only make the audience resentful. How to use the designed project as a bridge to interact with the audience and let it be a design Only when I feel the value of others, can I finally realize the interaction between people and machines.