Author: yy2627

1. Image Changer

The inspiration of our first proposal comes from a contemporary light sculpture called Aurora Organ located at The Shops at West End in St. Louis Park, Minnesota. It is an interactive sculpture which provides an excellent visual enjoyment to pedestrians. By tapping or touching the railing sensors, corresponding columns of lights would display different colors or different movements of lights depending on how people tap or touch the sensor. “If all six sensors are touched simultaneously, general properties of the system, like gravity, are reversed—causing a major change in the behavior of all the colored elements.”

What we want to create is similar to Aurora Organ. My partner and I also want to create an interactive piece that can enhance interactions and communications among more people even though they are total strangers. So we want to put this piece in a public square or in a big shopping mall. Instead of presenting changing lights, we intend to present more diverse pictures such as a variety of different images that are controlled by people’s body temperature and their movements. People’s body temperature controls the color of the images, and their movements such as tapping or touching the sensors control the size and the shape of the images. Image Changer can entertain every day pedestrians. For example,  sometimes people get bored when they are waiting for someone or something. Mostly they choose to play their phones, trying to find something to kill the time. This would make them feel isolated from the world because the only thing they can turn to at that moment is their phones. And the phone seems to be an invisible wall among people in today’s society because people spend too much time on their phones that the communication among them is becoming less and less. However, with this interactive piece, people don’t have to always stick to their phones. They can interact with the piece and also other pedestrians who are interacting with it as well. In this way, we temporarily keep them away from their phones and connect them with the rest of the present world more closely. People can play alone, but our intension is to bring them together and let them control the whole picture together. It increases communications among pedestrians because when they interact with the piece, they are controlling the images both individually and collectively. 

2. Chemistry Coach

Our inspiration for Chemistry Coach comes from a teaching tool called TAMI. TAMI is an educational tool that is used to learn the basics of trigonometry in a simple, clear and physical way. By presenting the information through rotatable wheel, multiple buttons and a screen, TAMI provides a more direct way for students to learn trigonometry because they can play with the controlling wheel and buttons by themselves and see the changes of the size of triangles, the curve of sine, the area of a fan-shaped figure, etc.

Using TAMI as our enlightenment, we want to create a teaching tool to facilitate students’ learning of the basics of chemistry elements. Because many students find the periodic table hard to memorize when they start to learn chemistry in their early education. In traditional chemistry classes in China, when teachers are teaching the periodic table, they always do so in a tedious way that students would easily get bored and find it hard to memorize and understand it. In order to help them learn basic chemistry in a more direct and fun way, we want to build an interactive piece that shows the configuration of different elements on the periodic table three-dimensionally. This is also beneficial for visual learners because we present the information in an interesting and visual way. Students can interact with the piece and observe the structure of each element in the meantime, which is easier for them to memorize the periodic table.

3. Motion Painting

The enlightenment of our third idea is an interactive piece that uses motion detector to catch people’s hand movements and draw corresponding images. By interacting with the piece, people can draw whatever they want using their body movements instead of just painting with a pen. Looking closely, how people move their hands is like they’re using magic to paint on the screen. This is also very interesting and creative. 

Our project wants to show people that sometimes you don’t need a pen or pencil to create a beautiful painting. There may be an inherent concept in many people’s mind that if you want to draw something, you have to use a pen or pencil or some pigments which would use up your physical strength quickly. We want to break this concept by creating an interactive piece that allows people to draw with their motions. Since art can be in any forms you can think of, we want to let people create their own art interactively. The canvas would generate different forms and colors of images depending on different movements people make. We also want to inspire people to think outside of the box and create new forms of art with their imagination. 

Reference:

http://camilleutterback.com/projects/aurora-organ/

https://www.creativeapplications.net/openframeworks/tami-an-intuitive-approach-to-the-learning-of-trigonometry/

Recitation Exercise:

This recitation, I learned how to use functions and arrays in my code to improve the efficiency of the code. By using functions, I can assign them with different roles for operating different actions so that I don’t have to write all the code in the “void setup()” function. The only thing I need to do is to call them when I want to use them. It helps keep the structure of the code clear to understand each step I do. 

Step 1:

For the first step, I tried to create an image similar to the Pac-Man. To make this image, I used “arc()” to make the face and the eyebrow, and “ellipse()” to make the eye and the bean eaten by the Pac-Man. I created a function called “display()” that contains the code of different figures. In the parentheses, I set three parameters — “x”, “y”, and “size” — to control the coordinates and the size of those figures. 

Step 2:

I created a “for” loop to display 100 copies of my image in different positions and colors. I also added another parameter called “color c” in the parentheses of the “display()” function so that I can change the images’ color.

Then I moved the “for” loop into the “draw()” loop. This time it keeps displaying new images constantly. 

Step 3:

In this step, I created four arrays to store the “x”, “y”, “size”, and “color c” data. It turns out that the result is the same as the one of step 2. However, instead of assigning the data to parameters in the “draw()” loop, this time I did so in the “void setup()” and called the “display()” function in the “draw()” loop.

Step 4:

I added two new variables to control the speed of images’ movements. Also, I used two “if” statements to set a boundary at 1/4 width, 3/4 width, 1/4 height, and 3/4 height for the moving images. You can see them only moving around the center of the canvas.

Optional:

Finally, I used the keyword “mousePressed” to control the color of these images. When I press the mouse, the color would change continuously. When I release it, the color stays still. I also added a “keyPressed” so that every time I press the “space” on the keyboard, all the images would come to the center of the canvas. When I release the “space” key, they would move to four directions. 

float h = 0;
color c;
int faces = 100;
float[] x = new float[faces];
float[] y = new float[faces];
float[] speedx = new float[faces];
float[] speedy = new float[faces];
float[] size = new float[faces];

void setup(){
  size(600,600);
  colorMode(HSB,360,100,100);
  background(360);
  for (int i=0; i<x.length; i++){
    x[i] = random(width*0.25,width*0.75);
    y[i] = random(height*0.25,height*0.75);
    speedx[i] = random(3,5);
    speedy[i] = random(3,5);
    size[i] = random(5,10);
  }
}

void draw(){
  background(360);
  c = color(h,100,100);
  for (int i=0; i<100; i++){
    display(x[i],y[i],size[i],c);
    x[i] = x[i] + speedx[i];
    y[i] = y[i] + speedy[i];
    
    if (x[i] > width*0.75 || x[i] < width*0.25) {
      speedx[i] = -speedx[i];
    }
    if (y[i] > height*0.75 || y[i]< height*0.25) {
      speedy[i] = -speedy[i];
    }
    if (mousePressed == true){
      h=h+0.05;
      if (h>360){
        h=0;
      }
    }
    if (keyPressed){
      x[i] = 300;
      y[i] = 300;
    }
  }
}

void display(float x, float y, float size, color c){
  stroke(0);
  strokeWeight(1);
  fill(c);
  arc(x,y,size*10,size*10,0,PI+HALF_PI,PIE);
  stroke(0);
  strokeWeight(size*0.1);
  noFill();
  arc(x-size*0.6,y-size*2,size*7,size*3,PI,PI+HALF_PI);
  fill(0);
  strokeWeight(0);
  ellipse(x-size*2,y-size*2,size,size);
  fill(360,100,100);
  ellipse(x+size*1.5,y-size*1.3,size*2,size*2);
}

Question 1:

For step 2, when the “for” loop is in “setup()”, the images stay static, which means that they are only displayed once. However, when the “for” loop is in “draw()”, the program keeps displaying images in different positions. This is because “draw()” is a loop, and if you put any code in the loop, it would operate over and over again. That’s the difference between having the “for” loop in “setup()” and in “draw()”.

Question 2:

Using arrays is easy to store abundant data and different values. For example, if you want to set different values for the same parameter, you can store all the values in one array instead of creating different variables or writing the same code with different values repeatedly. You can easily call the array whenever you want to use a certain value in it. By using arrays, you can make your code tidy and the structure clear to read. In a potential project, I might use arrays to store different values for multiple data such as color, shape, size, position, etc. If possible, I might also use arrays to store different patterns of information so that the program can response to users’ different input in different ways.

Chronus Exhibition:

  

The visit to Chronus Exhibition was very interesting and inspiring. I saw many great and interesting art pieces that are technology-based, which highly related to our course. There are many art pieces using the same components that we used during the class such as Arduino boards and servo motors. Among them, the most attractive one to me is Arthur Ganson’s art piece called Beholding the Big Bang made by motors, gears, and concrete block. By using a motor to drive a series of gears, each gear is rotating in different speeds. The farther distance the gears get from the motor, the slower speed they attain. Finally, the time for the last gear to rotate once is 13.82 billion years. However, this last gear is deeply embedded in a concrete block. Even though it seems like the last one is static, it still rotates in an extremely slow speed that our eyes cannot capture. This art piece presents the passing of time and mimics what time can change by using electricity and technology in an obvious and direct way. Although we cannot witness the damage of the concrete block now and probably also in a long time, the motor that drives those gears are continuously working and it will break the concrete block, eventually. We cannot see the future, but we can still see what’s affecting the future. This art piece enlightens me that the forms of art are too many and too varied. Use your imagination boldly and you can create something astonishing as well. 

Nevertheless, except Beholding the Big Bang, other art pieces are too intricate and elusive to me. Even though I read the introductions carefully, I still cannot understand the producers’ intentions of these pieces. Compared with Chronus Exhibition, other exhibitions of non-technology based art work are more straightforward and easy-to-understand. I accidentally ran into an exhibition of paintings after I came out from Chronus Exhibition. The painter of these paintings is an old man in his eighties. What he drew is all kinds of colorful flowers that make his audience feel settled and comfortable. Different from Chronus Exhibition, there is no introduction for any painting in the gallery. People can easily understand what the painter tries to convey through his paintings. In addition to beautiful flowers and various bright colors, I can also feel the vitality of not only the flowers but also the painter. From the comparison of Chronus Exhibition and the painting exhibition, I’m aware that different forms of art takes different mindsets and ways of thinking to understand. For technology-based exhibitions like Chronus Exhibition, audiences should obtain some relative knowledge in advance and take a close look at all the components of pieces, how they function, and the relationship between each part in order to grasp a comprehensive understanding of the piece. But for other non-technology based exhibitions, they are more emotionally communicating with their audiences, for most of the times audience don’t need to have any background information before visiting these exhibitions. 

Research:

Hertzian Landscapes – Richard Vijgen

By using a digital receiver to scan the real time radio spectrum and certain algorithms to produce images, this project presents a live visualization of the invisible radio spectrum. As the audiences move around Hertzian Landscape, the digital receiver can capture the movements and the real time radio spectrum corresponding to them. Then, it becomes quite obvious for the audiences to see how the radio spectrum is changing when the audiences are moving. The audiences can make sense of how to interact with the piece quickly by observing how the image on the screen changes according to their movements, which seems like a successful interactive experience to me. By moving their bodies, the audiences can capture the changes of radio spectrum visually. There’s no need for the producer to provide long and tedious introduction to show his audiences what to do. The interaction between the piece and its audiences is very clear and straightforward.

TAMI – Francisco Zamorano and Catalina Cortes

This piece is a learning tool of trigonometry comprised of a tabletop display and a series of physical controllers. Since many students always find it hard to learn trigonometry, this project focuses on this need and presents a clear and interactive way to learn trigonometry. By rotating the knob, the audiences can see a clear image illustrating trigonometry on the display. By pressing different buttons at the edge of the display, different information about trigonometry would show up. This piece is not only interesting but also very useful. Bringing this piece to a calculus class, students can easily comprehend trigonometry by experiencing and witnessing the changing data on the display. The interactive experience is simple and straightforward as well. TAMI presents all the contents that it wants to show to its audiences in a very clear way. By interacting with it, the audiences can gain the experience of learning while playing. 

Self-Choreographing Network – Mathias Maierhofer and Valentina Soana

This piece is made of bending rods and robotic joints. However, this is a less successful interaction project to me. On the one hand, the approach of interaction is not obvious enough. The only thing I observe from the interaction between this piece and its audiences is that it moves with the audiences’ movements. Yet what patterns of its movements and what movements it can present is vague to me. On the other hand, I cannot easily understand what the producers want to convey through this piece. It’s hard for the audiences to comprehend what this piece is about and what the interaction means through their experience of interacting with it. This piece is not clear and direct enough for its audiences to get the idea of the producers. 

Reflection:

During the group project, the definition of interaction that we came up with is that “interaction is a continuous conversation between two or more corresponding elements”. So in the midterm project, my partner and I put our focus on the “continuous conversation” between the users and piece. However, we neglected a key point that the interactive experience is also important to the interaction. Our project didn’t pay too much attention to the experience, so it may not be clear enough for some users about how to interact with the piece. Learning from this experience, I think a successful interactive experience should be that users can easily and continuously interact with the piece and the piece can provide interesting and/or meaningful output to the users constantly. The interaction itself should also be straightforward to the users and continuous which means that the output should vary corresponding to the changing of users’ input. This also aligns with the definition that Chris Crawford gives, “interaction is a cyclic process in which two actors alternately listen, think, and speak”. For “listen, think, and speak”, O’sullivan and Igoe gives an explanation that they are equivalent to “input, processing, and output in computer terms”. These two authors both demonstrate that one of the key factors of interaction is continuity, which I paid great attention to in both group project and midterm project. Another key point that I identify in the project TAMI is that the interactive experience is essential as well. On the one hand, the approach of input should be clear and straightforward to every user. On the other hand, the output should be interesting and/or meaningful that varies corresponding to users’ different input. In that case, we should design multiple output instead of using only one. In the future, I will take the key elements that I just mentioned into my final project.

References:

Hertzian Landscapes – The interactive space of a radio spectrum

TAMI – An intuitive approach to the learning of trigonometry

Self-Choreographing Network – Cyber-physical design and interactive bending-active systems

The Art of Interactive Design by Crawford (pages 1 – 5).

Physical Computing – Introduction by O’sullivan and Igoe.

Recitation Exercise:

In this recitation, I modified my code for recitation 5 and created an interactive animation involving mouse pressing. I made some changes to my code so that one of the figures in my creation could change color continuously when I’m pressing my mouse and stop changing the color when I’m not pressing the mouse anymore. However, it didn’t reach my expectation. My initial thought is that the color changes when I press the mouse, and after I release the mouse, it stops changing but still appears on the surface in the last color that it turns to. The reality is that it disappeared after I released the mouse. This is what I should keep working on later.

As for the code, I only changed a small part by adding an “if” statement and three random variables to control the color change. I used the keyword “mousePressed” so that the color can change based on my mouse pressing. The rest of the code stays the same. 

Additional Recitation Homework:

Step 1:

Following the instruction, I created a black hollow circle at the center of the 600*600 canvas.

Step 2:

Then, I modified my code to make the circle expand and contract periodically. In order to do so, I introduced two variables — “x” and “c” — to control the size of the circle. I also used a “void setup” function, a “void draw” function and an “if” statement to control the size changing of the circle. I set “x” as the size of the circle and “c” as a variable to change “x”. In this way, the circle can expand and contract automatically and periodically.

Step 3:

For this step, I followed the instruction to use the keyword “colorMode” in the “void setup” function and set it to “HSB”. I also introduced three more variables outside of the functions to stand for each value in the “colorMode”. For these three variables, “h” stands for hue, “s” for saturation, and “b” for brightness. In order to reach the wanted result, the only variable that needs to change is the “h”. So I added “h++” and an “if” statement to turn “h” into 0 once its value reaches 360. It can make “h”‘s value change smoothly within the range from 0 to 360, which results in changing the hue correspondingly.

Step 4:

Finally, in order to make the circle move around on the canvas based on my keyboard’s arrow key input, I utilized the keyword “keyCode” in my code. I added four more variables, two(“x” and “y”) stand for the coordinates of the circle, the other two(“speedX” and “speedY”) for the speeds of the circle. To make the circle move corresponding to my keyboard input, I added “key == CODED” into an “if” statement. Then for the following “if” statements, I added four arrows as the input, one in each statement. In addition, I used two more “if” statements to set a border at the edge of the canvas for the circle so that the circle can only move around inside the canvas. 

Interesting Functions:

• • mousePressed
  • colorMode (HSB)
  • keyCode (UP, DOWN, LEFT, RIGHT)
  • “if” statements (for changing the size, the hue and the coordinates of the circle, and setting up boarders at the edge of the canvas)

In this recitation, I learned to use “colorMode()” and made the most use of “if” statements and variables. In order to realize a continuous change of certain values, I need to use “if” statements in my code to change the values constantly. Also, “if” statements can be used to change the value periodically by setting a certain extremum so that the value would not turn bigger or smaller infinitely.

This is a picture names Several Circles by Vasily Kandinsky. (https://www.guggenheim.org/artwork/1992)

The reason I chose this image is that I like the atmosphere it presents using such simple elements. The whole picture looks like the galaxy, for the dark background represents the outer space and other colorful circles are planets. It gives me a sense of the beauty of darkness for the low saturated color that it used. 

The first thing I did after choosing this image is to mimic to create a similar picture. I started by setting the size of the canvas and picking a dark grey as its color.

Then I began to code the circles and tried to copy the locations of those circles on the original motif as much as possible. By using the color selector, I also mimicked the color from the original one. The code that I used are in the same structure because all the figures I used are ellipses. So the first version of my creation is very similar to the motif.

  

Later, I tried to make some changes to my creation. So I changed some codes and turned part of the circles into rectangles and triangles so they differ from the motif. However, they still stayed the same color. When coding for triangles, I did some calculations for the coordinate of each point of a triangle. 

     

I think drawing in Processing is a good practice for my future design. It forces me to pay more attention to figures’ coordinates and their color, which is very helpful. Using such a technology to create art is also very interesting and novel because it makes our design more convenient and more diverse.