1.  “The Epic of Us”
   This idea is to make a two-player game in a model landscape made with cardboards and LEDs. The entire map would be an engaging large one so that people can walk around it. On the model landscape, the scenery would go from primary and backwards to modern and bright. In between the scenery, there is a path, and dozens of LEDs would be place along it to represent steps. Users will then take turns to throw a dice in the processing program, and take the steps forward according to the numbers he/she gets. The two players would be role-playing the leader of two countries, and arriving at certain points will give them weapons that can be used to attack the other user’s kingdom. The users will be told that they win when the other user’s HP gets reduced to 0 to encourage them to bring the other down. And the weapons will evolve from stone knives to swords, then to guns, and finally to something so destructive like hydrogen-bomb as they go along the path to the modern scene. By the time they choose to eliminate the other with such powerful weapons, both the kingdoms will go into ruins, and nobody wins. The idea of this game is to highlight a meaningless arms race between countries, and call upon them to collaborate for the well-being of the whole human race. In the title, the epic of “us” could either be an individual country or the entire world.
2.  “See from inside”
   We want to make a project that involves two people. They will be looking at two different screens with the same processing program on it. On the program, they will be choosing from the pre-drawn eyes, face shapes, hairstyles, noses, and lips to make a portrait of a person, except that one participant is asked to make a self-portrait but the other is told to make a combination that looks like the other participant. They would be selecting with Arduino devices (like a joystick). After they are done from drawing the other person, they will compare the two portraits with each other to see if the self-portraiter sees the same person as the one the other sees in him/her. My partner and I think that in most cases (where people are serious), people would try their best to reveal nice things in another person, and we want the self-portraiter to see how great he/she is in another’s eye. This is supposed to be a project that promotes diverse criteria for beauty and kindness that tells people to care more about being a person that is great inside and don’t be caught up by how you look outside.
3.  Revolution
   My partner and I thought about another two-player game that invites each of them into a space where they can’t see the other player. Then, one of the players will be shown an abstract picture and he will be drawing that out with Arduino and processing, but only with straight lines in a limited time. Then, the other user would be shown the work fo the drawer and choose from four random pictures to tell which one the drawer is depicting. Since the users aren’t seeing each other, and they can only communicate through pictures of straight lines, which represents the limitation of technology, we want the users to get a sense of technology is sometimes making communication harder, for example, if the players are face-to-face and can talk their feelings about this picture to one another, thing would be easier. Therefore, we want to remind the audience to pay attention to in-person interaction in real life, because some emotions are never going to be conveyed through digital channels. We want to get the player to think whether the development of technology is an evolution to us or a step back.

Step 2: 

Create a for loop in the setup() to display 100 instances of your graphic in a variety of positions and colors.  Make sure to use the display function you created in Step 1.  Then move your for loop to the draw() loop, and note the difference.

When I put the display function in setup(), I get 100 cute little colored ice-creams, randomly scattered on the screen.

After I moved the for loop into the draw loop, things got crazy. Every time the program runs the draw() function, it draws another 100 ice-creams on the screen. It is doing the same thing as putting just one display function in draw(). Soon there is no blank canvas in the window.

There’s probably going to be an avalanche.

Step 3:

Create three Arrays to store the x, y, and color data.  In setup(), fill the arrays with data using a for loop, then in draw() use them in another for loop to display 100 instances of your graphic (that’s two for loops total).  You can use this example to help you do this.  Make sure to use the display function you created in Step 1, and if you’ve added any other parameters to your display function you should create new arrays for them as well.

Now instead of drawing out the ice-creams and leaving it there, using an array can help me store all the information of each shape I drew. This information would be very helpful when I start to get them moving because their positions need to be constantly updated.

void setup(){
  size(1600, 1000);
  background(200);
  int[] x = new int[100];
  int[] y = new int[100];
  color[] colors = new color[100];
  for (int i=0; i<100; i++){
    x[i] = int(random(45, 1555));
    y[i] = int(random(190, 1000));
    int r = int(random(0, 255));
    int g = int(random(0, 255));
    int b = int(random(0, 255));
    colors[i] = color(r, g, b);
  }
  for (int i=0; i<100; i++){
    display(x[i], y[i], colors[i]);
  }
  
}

void display(int x, int y, color c){
  fill(c);
  noStroke();
  triangle(x, y, x-45, y-120, x+45, y-120);
  ellipse(x-20, y-140, 40, 40);
  ellipse(x+20, y-140, 40, 40);
  ellipse(x, y-170, 40, 40);
}

void draw(){

}

Step 4:

Add individual movement to each instance of your graphic by modifying the content of the x and y arrays.  Make sure that your graphics stay on the canvas (hint: use an if statement).

Finally, adding code to the draw() block and moving the definition of arrays outside of setup(), the patterns started moving.

int[] x = new int[100];
int[] y = new int[100];
color[] colors = new color[100];
int[] speedX = new int[100];
int[] speedY = new int[100];




void setup(){
  size(1600, 1000);
  background(200);
  for (int i=0; i<100; i++){
    x[i] = int(random(45, 1555));
    y[i] = int(random(190, 1000));
    int r = int(random(0, 255));
    int g = int(random(0, 255));
    int b = int(random(0, 255));
    colors[i] = color(r, g, b);
    speedX[i] = int(random(5, 15));
    speedY[i] = int(random(5, 15));
  }
  for (int i=0; i<100; i++){
    display(x[i], y[i], colors[i]);
  }
}

void display(int x, int y, color c){
  fill(c);
  noStroke();
  triangle(x, y, x-45, y-120, x+45, y-120);
  ellipse(x-20, y-140, 40, 40);
  ellipse(x+20, y-140, 40, 40);
  ellipse(x, y-170, 40, 40);
}

void draw(){
  background(200);
  for(int i = 0; i<100; i++){
    if (x[i]>=1555 || x[i]<=45){
      speedX[i] = -speedX[i];
    }
    if (y[i]<=190 || y[i]>=1000){
      speedY[i] = -speedY[i];
    }
    x[i] += speedX[i];
    y[i] += speedY[i];
    display(x[i], y[i], colors[i]);
  }
}

Here is the screen recording:

However, there is still room for improvement in this code. For example, the shape will all start moving in the same direction, which is the right-bottom corner, although at different speeds, because speedX and speedY are both positive at first. I could make them random integers inside a range that contains both positive and negative numbers. Moreover, there seem to be a little bug because there was once I run it, one of the ice-creams seem to be stuck inside of the margin:

You see that little blue one by the left of the screen is jumping by and forth within a small distance. When I saw this I actually felt kind of proud because you know when you play games your character would be stuck in the scene from time to time? I think I’m encountering the same thing and if I can figure out what made it do that, this could be the first step to trouble shoot a huge program. So I thought about it for a while, and I figured it is probably because I made the shapes generated randomly on the whole canvas, but when checking for whether they are out of the canvas, I made the detecting range smaller so that none of the parts of the shapes will be out there. Therefore, if an ice-cream is generated inside the range where the speed is going to change signs, it’s going to bounce constantly because between two detects, it still hasn’t gone out of the range. I guess it’s always these unnoticeable things that caused a problem happening, and although mine here is just a little one, it will always be a day where a tiny thing causes a big disaster. There is no other solution than being extra careful and prepare for it. You probably need to debug the whole thing sometimes and end up to find a tiny thing in just one sentence.

Optional:

Add some interaction to your graphics.  Refer to Recitation 6 if you don’t remember how to do this.

For the interaction part, I made made every ice-cream to change their directions on the y-axis when a mouse is clicked.

Questions

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().

If the loop is in setup(), the sentences in the loop are only going to run once when the program starts. But if I put the for loop in draw(), then when the 100 iterations have been finished, they are going to start again from the first iteration. And since in step 2, I was just drawing a pattern and leave it there, when the loop is in the draw loop, the program is going to leave 100 patterns continuously on the screen each time the draw() function is executed. This is why countless ice-creams continues to be left on the screen,

Question 2:

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

Firstly, when you want a lot of information to be kept, you don’t need to assign a name to each of them. For example, if I want to record the location of 100 ice-creams, I don’t have to write the sentence “int X1 = int(random(a, b));” for 100 times and think of a name of these x-axis values. With arrays, I just need to name the list and put information in them in order.

Secondly, it is great when arrays have a unique index for every element. Therefore, when an object contains several pieces information, you can store them in different lists at the same index. And when you want to retrieve the information about this object, you just need to use the same iteration for all arrays. 

Thirdly, when you use a regular for loop to draw patterns on the screen, you are just generating information about them, displaying them, and throwing away the information. But with arrays, you can keep the information and call them up in the future if you want to move the patterns or anything.

I think arrays are useful if I make a game with several players. When they log in to my game, I can create an array for each of them, and index 0 could be their names, index 1 could be their age, index 2 could be their scores and so on. This way, I can manage information of the same type in the same position and it would make it easier to call them out when needed. This is one case that I can use arrays in.

Throughout this semester, I have been guided through a series of experiences related to a variety of interactive and artistic experiences. This week, I made the visit to CAC and saw the art pieces there. The feelings I had was so weirdly similar to what I would feel in another contemporary art museum yet so different from my notion of digital devices although I had imagined it to be the other way around. For all six pieces there, I had to read the introduction closely to comprehend what its main idea is because just like other contemporary art, the meanings are made obscure and subtle with material that are common in everyday life. However, people often think machines there to make people’s life easier, and we are always taught that when you make a device, you should design it so that people can see it from a glance to know what it does. I rarely see machines put together for a sole artistic purpose instead of pragmatic. I found the idea of me as a human trying to understand the language expressed through cold, emotionless electronic devices laughable. I guess it only makes sense when the deeper social problems or the discussion around the capability of computers are delivered through these unconventional organization of electronic parts. Some exhibits there, namely the “Artificial Intuition” and “Rechnender Raum” pieces, actually brought me thinking about the relationship between human being and computers.

While most exhibits in CAC are more artistic than interactive, I encountered some great examples of devices that successfully provide interactive experiences to its users. One is the “Dancing Traffic Light” in Lisbon, Portugal. The idea is to keep the pedestrians’ attentions while they wait for the green light to foster traffic safety by making the red man on the light move, which is based on the dance moves made by users in a booth next to the crosswalk. When people dance in the booth, their motions will be transformed into pixel animation of a little red man dancing (“Dancing traffic light entertains pedestrians and improves safety,” 2014). Not only they can see the animation on a screen in the booth, the animation will also be shown live on the traffic light. I think of this project as a successful interactive one because it involves users’ information input through physical movement and it outputs information through animation. Since this flow of information is two-way and continuous (because showing and transferring movements is a continuous activity), this project did a great job in making its users’ experience interactive. Users also get involved deeply in such design knowing that when they are enjoying the interaction, traffic security is also promoted.

Another interactive experience offered to users that stood up to me while I was researching is a show by Sergei Tchoban in 2012 in Venice. He put up QR codes on the wall that luminate and allows his users to scan them to read about information about a high-tech city that was being built outside of Moscow. This can also be called interactive because people do get information from the show, and they are allowed to immerse in the environment because QR codes are all over the wall, glittering (Nadel, 2013). However, I think this experience is not as interactive as the first one because there is not an “organic”, or back-and-forth information transmission between users and the piece. Once users scan the code, which means they ask for the information contained in it, the internet gives it back, and it’s the end of this conversing cycle. Users will not make reactions based on the output of the device.

So from my perspective, out of the two things that’s essential to a successful interactive experience, the first thing is two or more parties responding to each other based on information they previously received, which means interaction is not something that goes once and for all, but people and objects reacts continuously. Just as in the first example, people can always see the moves they have made and how the computer transforms them into pixel animation. After they saw this information generated by the computer, they can adjust the next steps to fit themselves better as pixel characters. This is how a successful interaction needs a party in the relationship to give out information based on that they received. In a less interactive relationship, the information flow can be scattered and not internally related. Just as Tchoban’s design, information provided by each code may not lead the users to the next piece of information they want to see. What they get is merely separate news and pictures.

While I already came to the first point in my definition developed in my group project, during this research I realized the reason why a successful interactive experience needs more forms of information transmission. With more media such as music, picture, physical movement, scent, etc., people will be immersed deeper and devote more attention to the experience, making the goals of a device or product more achievable. I noticed during the users’ test that some groups’ design integrates sound, movement and sight for their users, which arouses great interest among the audience. Everyone was crazy for Ian and Changzhen’s game for two in class and the discussion is heated because they can really participate in it. However, my partner and I chose to do something that involves only one media of information flow. Our show seemed a little bit too quiet. Therefore, I think that giving the customers an immersive and multimedia experience when you want to be interactive is essential because this way, they can get your purpose better. Imagine instead of the interactive traffic light to propagate for traffic security, a speaker is placed there continuously playing a tape that asks pedestrians to look out. Nothing effect would have been reached this way.

References

Working individually, you will integrate the coding elements from this week’s classes to create an interactive animation in Processing. You may animate your creation from Recitation 5, or draw and animate something completely new. Regardless of what you choose to animate, your Processing sketch should include some level of interaction (i.e. keyboard or mouse). Take a video of your interactive animation, and upload this, along with your code, to the documentation blog.

Although this seemed like a small program that does nothing much, its original idea was fancier. I have thought about making a little game that this little guy here runs from an end of a horizon to the other end, with some ditches on his way and the users’ responsibility is to control him to hop through these ditches. This is how it should look like:

However, due to time limitations, I gave up running and made this hopping program. Since I think this is the central problem of my final idea, I this it turned out good even I didn’t get the chance to get to the entire thing. Here is the code:

int head = 20;
int speedY = -5;
int x = 50;
int y = 120;
int hight = 0;

void setup(){
  size(100, 200);
  background(255);
  status2(x, y);
}

void status1(int u, int v){
  fill(0);
  ellipse(u, v, head, head);
  quad(u-4, v+head/2+3, u-19, v+ head/2+23, u-15, v+head/2+26, u, v+head/2+6);
  quad(u, v+head/2+6,u+4, v+head/2+3, u+19, v+head/2+23, u+15, v+head/2+26);
  rect(u-10, v+head/2+10, 20, 25);
  quad(u, v+head/2+35, u-4, v+head/2+32, u-22, v+head/2+32+24, u-18, v+head/2+32+27);
  quad(u-22, v+head/2+32+24, u-16, v+head/2+32+32, u-12, v+head/2+32+29, u-18, v+head/2+32+21);
  quad(u, v+head/2+35, u+4, v+head/2+32, u+22, v+head/2+32+24, u+18, v+head/2+32+27);
  quad(u+18, v+head/2+32+27, u+15, v+head/2+32+23, u+23, v+head/2+32+17, u+26, v+head/2+32+21);
}

void status2(int u, int v){
  fill(0);
  ellipse(u, v, head, head);
  quad(u-4, v+head/2+3, u-19, v+ head/2+23, u-15, v+head/2+26, u, v+head/2+6);
  quad(u, v+head/2+6,u+4, v+head/2+3, u+19, v+head/2+23, u+15, v+head/2+26);
  rect(u-10, v+head/2+10, 20, 25);
  rect(u-7, v+head/2+35, 5, 30);
  rect(u-7, v+head/2+60, 10, 5);
  rect(u+2, v+head/2+35, 5, 30);
  rect(u+2, v+head/2+60, 10, 5);
}

void jump(){
  if (mousePressed && hight < 22){
    background(255);
    y = y+speedY; 
    status1(x, y);
    hight += 1;
  }else if(!mousePressed && height>0){
    if (y<120){
      background(255);
      y = y-speedY;
      status1(x,y);
    }else if(y>=120){
      background(255);
      hight = 0;
      status2(50,120);
    }
  }else if(mousePressed && height>=22){
    if (y<120){
      background(255);
      y = y-speedY;
      status1(x,y);
    }else if(y>=120){
      background(255);
      hight = 0;
      status2(50,120);
    }
  }
}

Additional Recitation Homework:

Step 1:

Create a Processing sketch with a circle or square at the center of the screen. Your canvas size should be 600 x 600.

Step 2:

Next, modify that Processing sketch so that the circle or square periodically expands and contracts, like the circle in this gif.

Step 3:

Then, modify the Processing sketch so that the the the outline changes color smoothly, as seen in the gif below. HINT: set the colorMode() to HSB.

Step 4:

Finally, modify that Processing sketch so that the circle or square moves around the canvas based on your keyboard’s arrow key input. As an added bonus, you may make your canvas’ edges a border that the circle or square cannot pass.

Some Comments:

Although it is a shame that I didn’t have enough time in class to finish the idea of my animation, I can see how it can be developed into the completed version. I got a peek in this class of how time-consuming it can be for programmers to code even the simplest thing: I spent about an hour drawing the black little guy. I can’t but pay my respect to animation makers and game makers of their perseverance of developing a vivid character.

I got help on Step 3 from Joseph Yang and I’m really grateful. At first, I tried to write the program with a for loop. However, my program just doesn’t work, so I came to him for help. He told me that since the draw() function is already a loop, it won’t work if I nest another loop in it.  That’s when I realized that I’ve been blinded by the endless nature of the draw() function and haven’t been treating it like a loop where variable changes. I’ll learn a lesson from that in my future programs.

Here is a list of useful functions I used:

colorMode(mode, value1, value2, value3)
map(value, a, b, c, d)
if (keyCode==someValue){} //used after key==CODED

For the midterm project, I and my partner did not first come with up the device we wanted to make and then think about what use it may serve. Instead, we first met and discussed the problems we see in real life. Among all the other crazy ideas that solve trivial problems in life such as a machine that spares your hands and helps you take potato chips out from the Pringles tube when typing and all the other ideas of the same sort, we chose to focus on a social problem because it would make more difference. We both agreed that people nowadays care so much about their digital lives and images that they are starting to drift away from what really matters, which is their relationship and interaction with friends and relatives around them. I told my partner what I saw the other day in a restaurant. The young other is taking her little girls, who obviously just got off her ballet class because she is still in a yarn skirt and ballet shoes. They had a tableful of food, and the girl tried to talk to her mom for like a dozen times but every time she responded with a short sentence which consists of less than 10 words. The girl seemed so sad and I imagined her as a child whose parents are too busy for work on weekdays, and she is dumped to extra-curriculum and tutoring centers on weekends. No matter what the mother had to deal with on her phone, I just wished she could spend more time talking to her daughter, perhaps about how her ballet class has been. After telling this story, we decided we could work on the idea of shifting people’s focus from their phones to something else. We first gave the device a setting: in a restaurant having a meal with friends. Then, we came up with this idea of building a plate that takes away your food if you are looking at your phone. The best way for us to realize this idea is to let people put down their phones onto the device and then we detect whether the phone is there.

After deciding on the problem that we want to address, we started idealizing. We figured the plate should look like a lunchbox because we need to put in a whole set of electronic parts to make it movable to deliver food. There were three ideas that stood out and seemed feasible. The first is a drawer that automatically opens when detecting the phone is on it. The second one is a box with a flipping lid that serves food by opening up. And the third one is a car without a ceiling inside a “garage” that can move in and out. Following are three sketches of them. We chose to realize the third one because it is most relevant to the knowledge of rotating motors in both directions that we just learned in class.

The most significant step during the realization of our plan is making the sensor work. At first, I wanted a weight sensor because we can tell with it whether the weight on the box is in the range of the weight of a phone, or 150-220 grams. However, after we looked up online how a weight sensor works, we figured that for the weight sensor to work, we need to build a structure that nails the sensor in between two firm boards, which seemed too much for a lab. Therefore, we decided to opt into a more practical solution with a force-sensitive sensor. Although it is not as precise as a weight sensor, it is at least functional with the right amount of effort. However, although the sensor works by pressing, the value it returns does not change if we put a phone on it. I and my partner thought it is probably because the weight of the phone is not completely held by the sensor, making the pressure applied to it smaller than its detecting threshold. At last, we found that it works well when we attach a panel to a small sponge block and then fix the sponge on FSR to transfer all the force onto the sensor. Another hard step we took is making sure the wheel we laser cut could take the car out. Even though the four motors are all rotating crazily after we gave them 12V power, the car still won’t move. The wheels are spinning without taking the car forward. We tried changing everything from the structure of the circuit to the texture the car runs on but the car still remains where it was. Thanks to a study away senior who shares the same table with us that night (I don’t even know his name) and our instructor Inmi who kindly checked out on us at 7 o’clock in the evening, they thought the friction between the wheel and the table is probably too small to take the car forward. They gave us some precious suggestions. Such as putting some tape around the wheel and make the wheel thicker. Finally, we cut out more cardboard wheels and joined them together to make a four-times-thicker one. And we also explored better solutions for fixing motors onto the car to make sure the power they generated will be conducted entirely to take the car forward.

Since our project is more of a pragmatic one and less fun or artistic, we really want to present a user-centric, easy to use product. We spent much time discussing how we can make people realize the issue it is trying to solve and prompt them to try the device on seeing it. So, we rastered a phone on the detecting panel and wrote down a simple sentence to instruct them, “please place your phone here”. A lot of people walked through us and susceptibility put their phone on the box after reading the instruction. In this process, I think it is the pattern that drew their attention, and the instruction beside it told them exactly what to do. Without either of them, it would fail our intention of making it user-centric. In addition, people’s attitude indicated that they think their phone is something very private and cherished. Therefore, some will feel insecure if they are not well informed of what this device does and what it gets from their phone. In this case, assuring their security and privacy while timely informing them the idea of our product is critical, especially if we want to add more features such as phone charger that involves physically engaging their phones. There are also users suggesting that this design can be used in other settings such as a shoebox. Whenever the box detects someone is getting close, it opens. When that person walks away, it closes up. I think this is another great application of the device.

              Looking back to the problem we wanted to solve after we finished the whole device and made significant changes comparing to our original ideation, I think we tried to solve the problem in our own way. We received critiques saying that “forcing” people out of their phones is passive and it won’t encourage anything. I think this is a great angle of seeing things since we approached the design process from possible solutions to an existing problem, but she sees the problem from its root. I think this will be a great mindset for my future designs so that I won’t constrain myself in what is already problematic. Moreover, I realized in doing this project that there are tons of details even in the simplest electronic devices. We built a device that only does two things: get out and get in, but there are already hundreds of details to be tackled. The whole thing will break down even if one of them is working weirdly. But a designer can’t possibly know what will come up during the ideation stage, for example, we never thought that we couldn’t work with the weight sensor until we actually got one. One takeaway from developing this device is that when such problems occur, not only should I think about technical solutions but also open my eyes and explore other possibilities and alternatives because there is not a definite answer when developing a product. You always need to try one in order to tell whether it is compatible with the rest of the idea in realizing the original goal. Moreover, I think that interactive devices are not only about technology and edgy electronic components. Instead, it involves solving a problem creatively in the simplest way. And a designer should always think about what an audience/a user wants as well as the bigger problem he/she is trying to solve. While building the product, I can also reflect on the problem again to check whether my original view on it is comprehensive or not, just like this time I noticed that probably a better way to engage people with people around them is trying to facilitate a meaningful conversation instead of denying the existence of phones. Carrying out a solution to a problem gives us a deeper insight, and it is not only the users who benefit from a great device developed.