Author: nz826

Firstly, we plan to title our project as “Driving into imagination”. As someone who doesn’t know how to drive, I can’t experience the real process of driving. But according to my Mom and someone else who drive a lot, they always mention that “at first, you might find it fun and convenient, but later you get really tired of it and find it boring and exhausted.” Also, I saw news about how people affected by “road rage” were caught in car accidents and got injured or even killed when driving. So, the audience of the project could be those experienced drivers who already got used to driving or even got bored about it. Also, those who have zero driving experience are also welcomed. Because what we provide is a total fresh driving experience. What’s more, according to my research, the project DESCENT really inspired me a lot. I intend to create spiritual resonance with audience. Not something simply like a car racing game just for fun. I pursue a piece of silence, peace for audience to feel and reflect. Hence, I want audience to pay more attention to those details, potential aesthetics and life fragment that they’ve ignored so often. What’s more, it is also good to imagine, to dream. We can’t stop imaging just because we have become adults. It is not true that only kids can fantasize the world, adults can also enjoy the utopian and be part of the fairy tales.

Our project aims at offering fresh and novel driving experience through various sense aspects. As the car driving in the changing scenes of reality simulation depended on user’s choices, the audience will eventually enter a fantasy world. I hope the audience can refresh their cognition of their daily experience like driving, explore and appreciate several details in them, at the same time always have space for imagination in heart. As for the steps of the projects. We ‘ll first think about designing two different themes of scenes for users to choose between. Consider what they would like to see during the driving process and what kind of music or radio channel could fit the most. After thinking about that, we’ll start to draw the scenes and create the animation on Processing, which should take about 2-3 days. The music application is also included. Then comes to the coding part, starting from the most important thing, the control of steeling wheel which requires to use Arduino and Processing. If this is done successfully, then other similar elements like the car light and windscreen wiper should also be done without a lot of time. These are supposed to take about 2 days. At last, the design and narratives on Processing need another one day or two.

As I mentioned before, DESCENT greatly fulfilled my definition of interaction and got me thinking about other possibilities to create something interactive. I try to reach something that is invisible, inside people’s heart but strong and powerful at the same time. In my point of view, music is one of the best ways to achieve that. But after our chat with Rudi, we found it better to change some parts of our project to make it a more “interactive” and “meaningful” by asking the questions of “Why do we do that” and “So what?”. We later searched some other projects on YouTube and found some great projects about visualizing music with Processing. Hence, we thought we could also apply the visualization of music in our project so that we can create scenes like playing the midnight radio at 3 am on the dark empty street with the surroundings changing according to the vibes. Being at that kind of situation, I think people will tend to be more peaceful and calmer, notice more details and do more thinking. Eventually we will the driver into the imagination world which could be absurd and bizarre. We want to help people to realize again that there’s still a lot out there in our seem-to-be normal and boring lives. To see the world like the kids who first come to the world and always have tons of imagination of what is going to happen. 

Exercise 1: Make a Processing Etch A Sketch

The first step of the exercise 1 is quite simple. I just used the sample code provided and deleted the part for the third sensor. Then I found the instruction of two potentiometer circuits online and built the circuit according to it. I checked if I did it right with the monitor and it worked.

The next step is to send the sensor values from Processing to Arduino. Similarly, I used the sample code. However, I got some difficulties finding the two values. I tried to add code ellipse() in the void draw() part, but it didn’t go well. I then asked Jingyi for help. She pointed out that there was a comma after the value pf second sensor so that it will be a very long continuing list in my monitor. And it will be out of the array’s storage for it to read. Hence, we should use println() function for Arduino. Because the range for the two potentiometer is 0-1023 while the size for the canvas is 500*500, so I chose to use map() function to make the sensor values smaller to fit the size of canvas. One last thing occurred that I first made a mistake of the order of

“float x = map(sensorValues[0],0,1023,0,500);
 float y = map(sensorValues[1],0,1023,0,500);
 ellipse(x,y,20,20);”

Now I got to know that though the processing works fast but the order of code still matters.

Exercise 2: Make a musical instrument with Arduino

I was quite desperate when I first saw the code on Processing because it seemed really complicated and I could hardly understand it. But it is much easier to read the instructions and explanation next to it. Later, Tristan pointed out that we just need to delete the part which gives value to the content of the array, and add “mouseX = values[0]”. After making adjustment for the Processing sketch, I also made some changes on Arduino sketch which was much easier if we just used the tone() function. Then I built the circuit and ran the code.

Refection: Through applying Processing and Arduino together in one project, I found that the we can make the interaction in multiple ways and connect the physical world with the computer world more directly. It reminds me of the concept of “physical computing”. The computer can understand our actions in more “human” ways, not simply just push the buttons. Thus, here I think that for a higher level of interaction, the messages are the most important,  regardless of the ways the actors are reacting to each other. Understanding is the key. I think that we are all trying to find a way that every actors in the interaction can understand when interacting with each other.

Before doing midterm project research and actually working on my midterm project, my definition of interaction was strongly influenced by Crawford’s idea in The Art of Interactive Design(Crawford) that interaction is a cyclic process in which two actors alternately listen, think, and speak. But later I started to realize that “the quality of the interaction depends on the quality of each of the subtasks (listening, thinking, and speaking)”, which is also said by Crawford in the same article. Hence, I started to pay more attention on several details when identifying the term interaction based on my former definition. For example, about the step “listening”. The device could have the ability to listen to different things whether the sounds are loud or quiet. As I view, the quieter the sound the device could hear, the higher quality the interaction could be. So my definition of interaction has changed to “a series of movements that two or more actors respond to certain changes or movements made by others.”

Two interactive projects that served as inspiration for my final project are Face Trade – Art vending machine that trades mugshots for “free” portraits and DESCENT – A meditation on one of humanity’s blackest hours. 

For the Face Trade project, I found it quite align with my definition of interaction. Although what the device “listens” to is user’s face which is not something “quiet” that may not be heard by everyone, the “sound” has an outstanding characteristic that it unique for every user because everyone has a different face from others. Through this way, the interaction quality becomes higher, also the user could have much fresher and more special experience when using the machine. It reminds me of one of the midterm project by our classmates as well. The project aims at creating user’s own music by detecting their heartbeat. Meanwhile, the sensors could create different sounds according to the distance between the sensors and user’s hands. The uniqueness outcomes make the interaction more attractive and entertaining for users.

As for another project, “DESCENT” is less “interactive”. But it was an amazing experience watching the film and it completely shocked me. After the first time I watched the video of it, I started to doubt whether it should be categorized  “interactive” list because there’s no obvious interaction and response in this project. So I think it is less align with my definition of interaction from every perspective. But later I started to think that there must be something happening, the “listening”, “thinking”, “speaking” process.  I feel like that it is telling us the story of one of  humans’ darkest times and urges us to think, to meditate. I can’t deny the huge emotional reactions after watching the project. I consider it a kind of response to it, although it is more like an invisible way that hardly can be told by surface. The interaction takes place inside my body and after the screen of the film about the human history. I really appreciate this kind of interaction which is so quiet but so powerful at the same time, which is something I will try to reach in my final project.

Therefore, my definition of interaction changed a bit after the research. Interaction is the process of being impressed or triggered by others and showing responses in certain ways between multiple objects. It could be a physical movement that can be seen or just emotional change that cannot be observed. The point is after one object’s change or action, some parts of the other objects are not the same anymore. They are all influencing each other.

For my own project I made during the recitation, I used several functions learned from former class and put them in one project. I used the pattern I drew on the first recitation for processing which is the yin yang sign, as well as the checkerboard background. I wanted to discover something new so I chose the function of mouseMoved. Another reason I chose it was that it is completely random and unknown how the pattern will change when the mouse moves. So I though it would be fun because I feel everything random could creates much more fun and surprise. Also I really like the smile face and sad face. What I want the user to do in my project is to match the white ball (which is controlled by the mouse) to the white circle of the yin yang sign. But when the user moves the mouse, the ball with sad face would become bigger and bigger at the same time, and it will also keeps bouncing around randomly. So the goal is to match the white ball as soon as possible, just the same as what the text shows. Once the user matches correctly, there will be a cute smile face on the screen. Plus, there’s a way for cheating because I used the println function which can check the position of the ball.

code:

int x, y;
int size = 70;
int speedX, speedY;
int d = int(random(0,300));

void setup() {

size(600, 600);
fill(255);
speedX = int(random(2,10));
speedY = int(random(2,10));
}

void draw() {
background(186);

rect(0,0,100,100);
rect(100,100,100,100);
rect(200,200,100,100);
rect(300,300,100,100);
rect(400,400,100,100);
rect(500,500,100,100);
rect(200,0,100,100);
rect(400,0,100,100);
rect(0,200,100,100);
rect(0,400,100,100);
rect(400,200,100,100);
rect(200,400,100,100);
rect(100,300,100,100);
rect(100,500,100,100);
rect(300,100,100,100);
rect(500,100,100,100);
rect(300,500,100,100);
rect(500,300,100,100);

String s = “Match the whita ball! Be quick!”;
fill(0);
text(s, 510, 10, 90, 90);

noStroke();
fill(255);
circle(300,300,360);

fill(0);
arc(300, 300, 360, 360, HALF_PI+PI, HALF_PI+PI+PI, CHORD);

fill(0);
circle(300,210,180);

fill(255);
circle(300,390,180);

fill(255);
circle(300,210,50);

fill(0);
circle(300,390,50);

noStroke();
ellipse(x,y,size,size);

noStroke();
fill(255);
ellipse(mouseX,mouseY,50,50);

x = x + speedX;
if ((x > width) || (x < 0)){
speedX *= -1;
}
y = y + speedY;
if ((y > height) || (y < 0)){
speedY *= -1;
}

ballCheck();

}

void mouseMoved(){
fill(random(0,255),random(0,255),random(0,255));
size += random(0,7);
ellipse(x-size*0.3, y-size*0.1, size*0.05, size*0.05);
ellipse(x+size*0.3, y-size*0.1, size*0.05, size*0.05);
arc(x, y+size/4, size*0.6, size*0.6, PI, 2*PI);
}

void ballCheck(){
if((290 <= mouseX && mouseX <= 310) && (mouseY >= 200 && mouseY <= 220)){
background(255);
fill(120,234,45);
ellipse(150, 200, 75, 75);
ellipse(450, 200, 75, 75);
arc(300, 300, 400, 400, 0, PI);
textSize(32);
text(“congrats!!”, 10, 30);
fill(0, 102, 153);
text(“congrats!!”, 10, 60);
fill(0, 102, 153, 51);
text(“congrats!!”, 10, 90);
}
println(mouseX,mouseY);
}

For the additional homework, one thing I found quite interesting was the colorMode function. Although there’s still some defect in my final work about this function but I think this function could make very cool things. 

code:

int d = 300;
int dp = 5;
int a = 0;
int b = 0;
int c = 0;

void setup(){

size(600,600);

}

void draw(){
background(255);
strokeWeight(20);
stroke(a,b,c);
if(a < 255){
a++;}
if(b < 255){
b++;}
if(c < 255){
c++;}
if(a == 255){
a=0;}
if(b == 255){
b=0;}
if(c == 255){
c=0;}
colorMode(HSB,255);

circle(mouseX,mouseY,d);
d = d – dp;

if (d == 50){
dp = -dp;
}
if (d == 300){
dp = -dp;
}
}

I chose this image because I always have a special preference for this kind of signs which often appear with circles, eyes, and other simple repeated patterns. There’s a sense of mystery from the images that attracts me a lot. In one of my favorite cartoon series the Gravity Falls, there’s a triangle with an eye in the middle which represents an evil powerful role from another dimension of the world. I feel like there’s always more explanation behind these images,  no matter religious or superstitious beliefs. 

I first came up with the idea of drawing the yin yang symbol after I saw the image because I feel that the yin yang symbol is a special representative or the mysterious Oriental culture. At the beginning, I tried to draw it with curve but failed. Later I changed the method and drew one big circle, a semi-circle, two circles and two small circles inside. Finding the Japanese looked quite cool in the image, I also wanted to add Japanese character to my image. Though there’s some problem importing Japanese characters in the processing library and directly print them out, I just copied the text and used the text function to print them out.

One point that the two images similar to each other is that they are both symmetric and show the beauty of balance. One more thing is that they both convey the sense of mystery with rich context. Also, there’s Japanese in the images too. The differences are that the complexity for sure, and the patterns in the images. The motif is much more complicated than mine and have more various patterns, like eyes, triangles, small figures of people. It is still hard for me right now to draw these patterns with Processing. It has a richer content, like people living and working under the sun. I think that drawing in Processing is pretty hard and s not a very good means of realizing my design. After all, it is a type of computer language which is not as flexible as human languages and our own hands. But I think it’ll get better after practice and practice.