Author: zy1190

1. Gold Miner

Basically, this project is a game that imitates the job of the gold miners. And here is an image of this original game that we found online. 

In the game, the hook would rotate automatically and the value of the gold depends on the size of it. What you need to do is to press the DOWN key when the hook is aligned with the gold. The hook will go down and catch the gold and you can get money depending on the gold you just got. But if you don’t align, the hook will still extend, and you’ll waste time waiting for the hook to retract. The time of every round is fixed. So you need to achieve the goal in a certain time. Otherwise, you’ll lose. Moreover, you can buy some tools to help you to achieve the goal in the next round. This game can teach kids how to manage money because if they spend too much money buying helpful tools, you may not succeed get enough money to get into the next round. And the players need to make decisions about which gold to get in order to achieve the goal in time. Besides, the original game is not so interactive because all the only interactive part in the game is to click the DOWN key to release the hook. Thus, we want to make it more interesting and interactive. For example, we can make a device that is similar to the machine in the game. You need to rotate the rocker to release the hook. Hence, the user experience can be interesting in this case. Thus, the most two challenging parts are to complete the game by using Processing and to create the rocker device. On the one hand, the game that we write determines whether the project itself is interesting or not. On the other hand, the device we created determines whether the user experience is interesting or not. 

2. Scream ！

This project would be adapted from a game called “Don’t Stop Eighth Note”. And here is a video of how to play this game. 

Basically, you need to shout to let the character move or jump. For example, if you just want the character to move forward, you just need to speak with a low volume of voice. If the character meets with a gap that requires you to jump to cross it, you need to shout with a high volume of voice. The louder you shout, the higher and the longer the character can jump. Besides, the score of the game depends on the distance the character has moved. However, the original game is not too challenging because if you keep shouting at a high volume, the character can always float on the sky and never come down. In this way, you can get a high score of the game easily. Thus, we are trying to add some improvement to make the game more interesting and challenging. Moreover, nowadays, people can feel pressure from anywhere but they don’t have a place to release their pressure. Thus, this game is a good way to release your pressure and you can have an enjoyable experience after playing it. Therefore, the trajectory of our project is to write the game first and consider what improvement we can add as well as in what ways people can interact with it. If we can make this project, it will be a good way for people to shout out to release their pressure. 

3. Aircraft war

This project is an improved game based on my partner’s previous work. And this is a video about his previous work. 

In his game, you can only control the direction to attack and control whether to shoot or not. However, it is a little boring to play by pressing some keys on the keyboard.  So we decide to make it an aircraft war game. The user can control an aircraft to attack the enemies. In this sense, we can use two buttons to imitate the accelerators of the aircraft. And the user needs to use his feet to tread the buttons to control the position of the aircraft. And the experience is like the user is actually sitting in the aircraft and driving it. Thus, the trajectory is to think of some other ways to interact first because in my opinion, only using your feet to control the position of the aircraft may be a little simple and boring. Furthermore, it’s a good chance for the user to have the experience of driving an aircraft to attack the enemies. 

Step 1:

For step 1, I created a function based on what we learned in class, which can draw a crying face when executing it. This function requires 5 parameters, which are x coordinate, y coordinate, the size of the face, the color of the face, and the color of the tears. 

Step 2:

Step 3:

Step 4:

Additional step:

For the additional step, I created a keyPressed function. If you press the space on the keyboard, it will reassign color to each face and its tears. 

And here is my code for all the steps above. 

https://github.com/JooooosephY/Recitation-7/blob/master/recitation7.pde

Questions:

1. The function of the for loop in step 2 is to display 100 instances of my graphic. But where the for loop is really influences the output. If I write the for loop in the setup() function, the for loop will be executed only once. Thus, the output will be that there will display 100 graphics with a fixed position. However, if I write the for loop in the draw() function, it will become a nested loop. Since the draw() function itself is a loop function, if we still add a for loop in the draw() function, every time when the draw() function is executed the for loop will be executed once. Hence, the output is that each graphic will be assigned a different position every time. As we can see in the video of step 2, the image keeps changing because of the nested loop. 
2. By using the array, we can easily assign different parameters to various similar objects at one time instead of creating many variables and assigning different parameters one by one. Furthermore, using an array can make the code more readable without any unnecessary and tedious variables. And arrays can hold any type of data and each element can be individually assigned and read. If I’ll use the array in my project, I would probably use it to create a game. For example, I would generate a certain amount of enemies with same outlook. And they have the same way to attack the character that we can control. And the array can be used to store the parameters such as their heights. Since they have similar outlooks but they are different from each other, using the array is a good way to assign them with different parameters. 

Chronus exhibition

After visiting the Chronus exhibition, I feel like this exhibition contains more interactive elements than other exhibitions of non-technology based artwork. I cannot say that other exhibitions of artwork don’t contain any interactive elements. But their interactive elements are more likely to be mentally interactive. For example, when people see some painting exhibitions, people may think of what the artist was thinking when they painted. And people can feel the emotion of the paintings that the artists wanted to express. In this sense,  people seem to interact with the artist through the painting so that they can mentally interact with each other. However, the Chronus exhibition contains more physically interactive elements than the normal exhibition. All the exhibition not only maintain the artistic parts but also maintain some interactive functions that encourage people to physically interact with it. Even though some of them cannot interact with people, they kind of interact with themselves. In other words, they are not always stationary. When I visited the exhibition, I first felt confused about some of the outlooks of some exhibitions. But after I read the introduction and saw how they worked, it became easier to understand the artist’s idea. In this sense, they are artistic. For instance, there was a sculpture called Beholding the Big Bang by Arthur Ganson. It’s a sculpture in which a motor drives a series of gears which reduce the motor speed. So the first gear can rotate fastest while the following gears would rotate slower and slower. This project maintains the interactive element in which it can interact with itself. At for the inner idea of this exhibition, it can relate to Big Bang. In my opinion, such projects can not only show their artistic perspective through their outlooks but also can easily embody their interactive perspective to appeal to people. 

Project research

https://circuitdigest.com/microcontroller-projects/virtual-reality-using-arduino

The first interactive project that I searched is a virtual reality project using Arduino and Processing. Different from the common virtual reality projects that require the users to wear a device on the head, this project requires the user to wear a device created by Arduino on his hand. The author was inspired by the movie Iron Man. He “tried to mimic the Virtual reality stuffs that happen in the movie, like we can simply wave our hand in front of the computer and move the pointer to the desired location and perform some tasks”. In my opinion, he accomplished his idea in a proper way and this project aligns with what I think a successful interactive experience is. And here is the video about how he interacted with his project. https://youtu.be/HEOc6Xc5CAs 

In this video, he shows several ways to interact. First of all, he created a GUI on his computer by using  Processing. After wearing the device on your hand, you can move the pointer to the desired location and perform some tasks by the movement of your hand. For instance, after you open the interface on your computer, the computer would turn on its camera to track the position of your hand and generate a pointer based on the position of your hand. Then, if you touch your thumb with your index finger, the screen would show you that key 1 is pressed. And the function of this movement is similar to the function of clicking the mouse. Moreover, once you open the final interface, you would find it more interesting and interactive. There is a Dialog box on the screen. When you move your hand in front of the Dialog box and touch your thumb with your index finger first, you can drag the Dialog box anywhere on the screen. It’s like you are actually dragging the Dialog box instead of using the pointer and the function on the computer. The whole process of interacting with this project provides us with the experience that the movie embodies. Besides, the output of the project is quite clear and direct. Therefore, from my perspective, the project fits my definition of interaction well and aligns with what I think a successful interactive experience is. 

https://create.arduino.cc/projecthub/faweiz/arduino-radar-69b8fe?ref=search&ref_id=processing&offset=20

The second project that I searched is basically a radar made by Arduino. And the interface shows what the radar detects on the computer. And here is the video about how it works. https://youtu.be/bPpq_6AVtEc From my perspective, it is a complete interactive project using Arduino and Processing. But it’s not a successful interactive project. This radar just interacts with the surroundings itself. What the user can do with it is just to watch the output on the computer. Thus, it doesn’t provide users with a lot of interactive processes and experiences. Compared with the first project, it’s less successful to achieve the interactive goal. However, if this project can add a remote or a controller to control the radar car, this can be more interesting and appeal to more users. 

Conclusion

My definition of interaction is that interaction is a cyclic process requiring at least two objects that have effects on each other. Based on what I’ve learned through this semester and my experiences of executing the midterm project, I think a successful interactive must consist of a good user experience that encourages the user to engage in the process of the interaction of the project. If a user is thinking about other issues that have nothing to do with the project when they are interacting with it, this project cannot become a successful project. For example, the first project that I searched online motivates the user to interact with it while the second project that I list above is just a project that only interacts with itself but not interacts with a user. Moreover, if the user’s experience is not limited by only their fingers, it can even be a more interactive project. In my opinion, the most important parts of the interaction are input and output. Even though you can do at least one part really well, your project is successful. For instance, if you are able to create a beautiful and charming output, it is enough to attract people to come to admire the wonderful output even though what they need to do is to click several buttons. Otherwise, if you can make the user experience really interesting, people won’t mind how the output would be like because they can gain happiness directly from their experience of interacting with it. So people would like to interact with your project. The most challenging difficulty is to combine both sides of input and output. Often, there is a situation that you want to create a wonderful output with an interesting input but the final consequence is that you can accomplish neither of it. Therefore, considering the combination of input and output is the most significant step in making a successful interactive project. Once we can find the balance of the input and output and consider the process of user experience, the project must be successful. 

In class:

During this recitation class, we were required to make an interactive animation by Processing. Here it is what I made. 

Basically, it’s an interactive marble game requiring two players. Each player controls one board through the keyboard. Their goal is to keep the ball on the canvas. If the ball touches the board, it will be reflected. If not, it will fly off the screen. And the codes are attached. 

Setup function:

KeyPressed function:

Draw function:

Homework:

Step1:

Step2:

Step3:

Step4:

Code:

In this recitation class, I learned that the logical structure of the code is really significant. Since when I coded my interactive animation, I spent a lot of time coding the control of two boards, I found that the sequence of the code could make the final output different. Thus, when we code our project, we need to always figure out the logical structure of the code first. Otherwise, the output could be different from what you expected. For example, for the exercise in class, I wrote the function of drawing three shapes in the setup function. And then I wrote the code to change the position of the boards in keyPressed() function. However, in this way, when I pressed LEFT or RIGHT, the previous shape was still there so that there exist so many overlapping rectangles. This is not what I wanted. Thus, I wrote them in the draw() function. Since the draw() function is a loop, it can refresh the screen after executing it. Finally, I got what I expected at first. 

The list of the functions that I used:

1. setup()
2. draw()
3. keyPressed()
4. colorMode()

This is a picture of one of the characters, Patrick Star, in a cartoon called SpongeBob. I chose this image not only because this character is very cute in the cartoon but also because the shape of the character is just a star and the lines are very simple. So it may be easier to draw by Processing. 

However, when I started to draw it, I found it is actually difficult to complete. First, I used the function curve() to draw the shape because I could fill the shape with color if use this function. After trying for ten minutes, I didn’t figure out the use of the function because the instruction was too simple and not clear enough. I just couldn’t figure out how the two control points work. Thus, I decided to use the bezier() function to draw it. Similar to the curve() function, bezier() also requires one start point, one endpoint, and two control points. But this time it’s easier to use than the curve() function. Even though I still didn’t know how the two control points really work, I could get a shape that basically fitted my thought. Thus, the rest of the steps were to adjust it again and again until I could get the right shape.

I used the bezier() to draw the star shape of its body and its smiling mouth. And I used the ellipse to draw the eyes of Patrik Star. Then I use two thick lines to draw its eyebrow. Finally, I get my creation of Patrick Star. 

Generally speaking, it looks like Patrick Star and it’s easy to recognize what it is. However, compared with the original image, the proportion of the figure is different from the original picture. Moreover, I didn’t draw more details of Patrick Star, such as his pants. In my opinion, drawing in Processing is a good means of realizing my design not only because it is a good method to embody your design digitally but also because you can also write more code to make it interactive. However, in terms of just drawing a picture, I prefer to use other drawing applications or just draw on the paper.