Step 1

I followed the guideline and drew a funny face using a circle, two lines and a triangle. 

Step 2 & 3

I did them together because in this week’s class we have already been taught about the arrays to store data. I intended to randomize the speed at which the funny face moves as well as the position of it. So I first created a set of global variables shown below.

Then I created for loop function in the setup(). The idea is to create a randomly positioned face with a random speed each time it draws. The for loop will not stop until the condition is met. Therefore, it will create a set of shapes at first.

After setting up a range of random shapes, I continue in the void draw() function to make it continuous.

So I set the condition that make the shapes move continuously until it reaches the edge and set the speedX/Y [i] to negative. In this way the shapes will all move inside the screen. At the end I also write the display function to call it.

The effect is shown below:

Question 1

In setup() the function is executed once, while in draw() it executes continuously. In setup it is static while in draw it is animated.

Question 2

Array is an efficient way to store data values. It can be best applied when there are a tons of data. It can be used together with for loop to facilitate randomization. It kind of resemble variable, but allows for a wider range of values. It can be viewed as a combination of variables. 

A. Chronus Exhibition

The chronnus exhibition was a unique experience to me as it explored  technology (computer specifically) in the context of modern capitalist world and provoked much deep thinking about the essence of computer as well as humans’ relationship to it. Despite the profound meaning, the use of technology (Arduino and sensors) also surprised me because it was similar to what we’ve learned in class and broadened my horizon about the possibility Arduino could achieve. I remembered clearly the Artificial Intuition, the first project I encountered when entering the museum. The project was made up of straws and would move randomly like a claw when someone approached. 

The project appeared to me like an aggressive creature who was trying to frighten us. And the explanation on the wall confirmed my guess. 

The idea that computer had its own life was also demonstrated in other projects in the museum. One project called Rechnender Raum was impressive. The installation has a symmetric structure and as explained on the wall, “the observer is able to track the whole processing logic from every viewpoint and the machine.” What’s more impressive was the idea that the computer was transparent and inside-out, which reversed the normal structure of computers that display was on the outside while core functioning of computing elements were hidden inside. Such design conveyed the idea of the computer’s ignorance to the audience and suggested the self-functioning of computers.

Most of the projects displayed in the museum involved little interaction with the user, which was distinct from the many museums I had visited where user’s interaction was emphasized. I think that was because the theme of the museum was to show the vitality of the computer on its own and therefore it was meant to disrupt the user’s interaction. The technology-based museum was quite different from non-technology based ones because it involved many more movements. The non-tech based ones were static and no interaction was involved. When I visited the glass museum, the art works displayed were mainly pure glasses made into various shapes without any computer-based technology involved. Such kind of arts made people view them from a distance and were aesthetically satisfying. Such experience was mainly experienced by eyes. Here are some of the photos I took.

B. Research

I found three different types of interactive projects online. One is an interactive camera built by Learning Resources Incorporation. Its appearance is like a lamp. It could be connected via USB to computers or whiteboards and by placing objects under its light the objects can be shown on the screen. It resembles a projector. The function is straightforward in that it has in input and one output. It’s a useful tool in real world.

Another project I researched is an interactive LED table created by Monstercat. Here’s the link. https://www.youtube.com/watch?v=ptxulCpz6po It can be used to play game, to change the shapes on the table by clicking buttons attached to it and to show the music waves. The installation engages me more than the first research project in that there are more variations in output and input and I have more manipulation over the outcome. For the music playing part, the visual effects are intensified and therefore make the interaction more engaging. However, while I find it interesting, the interest in this project declines as time passes by. And I think that maybe because the output will be generated only when I give an input. And the main way of me interacting with it is just clicking by hands. 

The third project engages me far more than the previous two. It is an interactive playground project produced by Jindřich Krippner and st.dio. Here’s the link https://www.youtube.com/watch?v=3bCCyGcdNB0 The users will find themselves immersed in an interactive room where they can pick up a ball and throw it towards the wall to kick the moving figure or windows on the wall. The project is engaging because the moving figures will constantly appear on the wall and generate sound, signaling the user to interact with them. The user will then be prompted to utilize their body strength to hit the moving figures. After the figure is hit, the figure will disappear and a sound will show up to signal the user’s victory. The moving figure is not triggered only by user’s input but will show up automatically to welcome the user’s input. Compared with the two other research projects, this one deploys more body movement and gives the user more incentives to give more input and thus making the interaction going on.  I think this one is successful because it encourages user’s physical and mental engagement, which makes it a “continuous conversation,” rather than one-input, one-output that shows little sign of encouraging input. In addition, the immersive effect and the large space encourages interaction from a number of users and thus contributing to even more engagement.

C. What is a successful interactive experience?

My initial definition from group research discussion is “a continuous conversation between two or more corresponding elements. ” After learning and practicing for half semester I deepened my understanding of the importance of continuous conversation and variation. To make it a conversation that lasts, the input and output should be more varied so that the user can generate a different outcome each time an input is given. We built our midterm project based on that idea. However, after researching the 3rd playground project I was suddenly reminded of what I’ve read in the Igoe and O’sullivan’s article “Introduction to Physical Computing” in which they describe computer as “a medium for expression. (3)” Human-machine interaction design nowadays needs us to explore human body’s “full range of expression. (3)” The research demonstrates this well by encouraging “throwing and hitting” and thus mobilizing the whole body movement. This distinguishes itself from the interactive table where the click is the only way of interaction and the interactive camera where the input is quite limited. 

Reference:

1. Luna 2.0 Interactive Project Camera. https://www.youtube.com/watch?v=PG9nd42Q7EQ

2. Interactive IKEA LED table – Arduino project. https://www.youtube.com/watch?v=ptxulCpz6po

3. INITI Playground Project – Interactive Wall. https://www.youtube.com/watch?v=3bCCyGcdNB0

    
4. Introduction to Physical Computing. https://drive.google.com/file/d/1uviCK0V71cQpA76PV9PK03Df14vcsd0y/view

1. Recitation Exercise

The first animation that came into my mind was the in-class practice about the movement of  a circle inside the screen. So I started by creating that circle. I first created two incremental variable that prompted the circle to respectively move along the x and y-axis. Then I created the if statement to set limit on the range the circle could move. Inspired from the additional homework below (I did the homework first), I set the incremental value to negative when the position of the circle reached the edge. Since the circle moved along x and y axis, there were two incremental variables for me to define and change.  The code is as follows.

I tried several other kinds of animation, like the mouseX, mousePressed, keyPressed. For the mouseX and mouseY, I created circles with the movement of the mouse. I filled the circles with black so as to make it like painting. For the mousePressed, I changed the position of the moving circle randomly inside a draw(). When the mouse was pressed for certain span, it would seem like creating multiple random circles inside the screen. I also used keyPressed to clear everything on screen. The effect was shown as follows.

The effect would be totally different if I added a background at the beginning. The background matters as it decides whether the movement will leave traces or not. 

2. Additional Recitation Homework

Step 1: Draw Circle at the center

Pretty straightforward. Here’s the code.

Step 2: Circle periodically expands and contracts

Since the circle increments and decrements at the same speed, I gave the width of the circle a variable called w and let it increment and decrement respectively by 10. Since the width increases until reaching a certain value (I set it to 300) and then decreases, I used if statement. The coding is as follows:

However, the circles became trembling when the width reached 300.

I read through the code again by substituting 300 since that’s where the code got wrong. When the width reached 300, w was subtracted by 10 to 290. With 290 the sketch drew a circle again, and then the 290 value entered the if statement and it incremented by 10, which meant that the 300 appeared again. Now I understood that once the circle reached 300, my code asked it to draw circle with 290 and 300 width back and forth. That’s why the circle appeared “trembling.”

After realizing this problem, I thought over an alternative to this problem. Such period expansion and subtraction actually reminded me of the fading light because they shared the same logic. So I opened Arduino and looked at the fading example code.

I noticed that it created a variable called “fadeAmount” as the incremental value and set it to negative when the certain value was reached so that the incrementing and decrementing could be realized. I think this was quite a smart code and could be applied to my circle. So I created a new variable called c. 

The expansion and subtraction worked in this way! However, the work was not done, as shown below.

Then I realized that since the draw() function drew one circle each time, the animation was created by constant drawing of multiple shapes. And the trace of the last shape would be left on the sketch. After realizing this, I created a background code at the beginning of the draw() function so as to clear the sketch each time a circle was drawn. In this way it worked!

Step 3: Outline changes color smoothly

Following the colorMode guideline, I first set up colorMode() in setup() to limit each color range (red, green, blue) to a value between 0 to 100 (after experimentation I found this range to be most ideal). I set a strokeColor in the draw() and then assign a random value to each red, green and blue color. Here’s the effect.

It appeared that the color was changing so rapidly. I went back to see the model on the website and thought about how I could made the color changing slower. Random value was not a good method since the random one changed too fast. After examining the circle for a while I realized that the expansion speed of the width and the color changing rate was similar. This made me think that what if the color changing speed could be the same as the “c”, which was the incrementing value of the width. Inspired by this idea, I tried to put the w inside one of the color value (I put inside red range). The value of the “w” swung from 30 to 300 so I correspondingly adjusted the value in the strokeColor to w/3 so that it was within the color range of 0-100. 

It turned out that it worked!

Interesting functions:

1. MouseX, mouseY
2. if statement and negative change of incremental/decremental value
3. mousePressed; keyPressed

The image I choose is titled Computer rosace-series created by Vera Molnar in 1974. I choose this picture because I like the combination of irregularities and regularity. The shapes inside are triangles and squares with random size, with one embedding in another. The interesting thing is that while those shapes inside seem to be not following a certain order, they all revolve around the center and somehow looks symmetry. The symmetry becomes more apparent as the shapes extend outwards. It seems to me that this picture is implying that everything will finally be in order, even though they look messy at first sight.

Based on such interpretation, I decide to create one image that has some shapes without explicit order in the center. The outer the shapes, the more regular they will be. Ultimately the shapes will be regular squares that revolve around the circle with steadily increasing size. However, to imply the underlying regularity of those seemingly irregular shapes, I would draw circles in the center as well as some regular shapes that interweave with those irregular triangles. Besides triangles and squares, I also add some circles to add diversity and enhance visual effects. The final result are as follows.

I started by drawing circles in the center as an anchor to create all other shapes that revolved around them. Then I drew some triangles with random size but they somehow revolved around the center. In addition, the triangles were related in some way, whether they shared the same side or vertex, implying entanglement between them. As the shapes extend outwards, the triangles became more regular squares and circle. The outer two squares that had the same slope but with different direction is also played with the idea of symmetry and order. In terms of the method, I scratched on paper first to calculate the exact coordinates of each vertex. I followed the principle that each vertex divided the line it touched into 1:2 ratio and then did calculation based on the canvas. My coding is as follows.

I really like Processing in terms of its ability to create ordered and exact shapes, which would be difficult for human hands to achieve. Order and symmetry is closely related to numbers, especially in coding. Therefore, I can create regular shapes such as the increasingly bigger squares that extend to the edges simply by incrementing the same numbers. 

Reference

Computer rosace-series by Vera Molnar. http://dada.compart-bremen.de/item/artwork/626