THREE PROJECT PROPOSALS

1. Back to Summer Nostalgia II

     This project is based on my midterm project. I would think of it as an expansion of my midterm project. Because I have always been thinking about creating a whole children playground that can bring everyone back to their childhoods. My idea for now is to build a sky wheel and people can turn the sky wheel. I would connect the motor inside the sky wheel with a sensor so that the speed of the sky wheel can be analyzed. Then there will be images not he screen of computer(using processing to draw it), and the images will be different according to the speed of the sky wheel. Also, the brightness of ice cream truck will be different according to the speed of the sky wheel.

 

 

2. Body Space Circle

     This project is about analyzing the space people take up. I want to make this project because it would be fun to see how big and small the space I can take up. There will be a sensor to capture the people’s movement and processing will change the diameter of the circle on the screen according to the edge of the area that are circled by lines connecting people’s head, hands and feet.

 

3. Let’s draw together

     Most project we create in class gives immediate feed back for testers and I want to do something different. For this project, different testers add their drawing one the same painting on the computer, which means the outcome is always changing as long as there are new testers. Testers will need to hold an object which can be identified by the sensor or camera, then they can draw I the sky and the lines they draw will be presented on processing. 

 

 

 

 

Recitation 7: Neopixel Music Visualization

The NeoPixel lights up and looks like a rainbow!

Task #3: Add Music!

When I first tried to do this task, my computer dead and I did not finish this task in class.

 

PREPARATORY RESEARCH AND ANALYSIS

I did research of Torre Glòries Data Exhibit, a permanent exhibit within the tower’s Hyperview Barcelona experience that surfaces the natural and man-made phenomena that impact the lives of Barcelonians each day. The exhibit shows the visitors a new way to see the city, which is looking beyond the surface of the city, and to observe the unseen forces that drive Barcelona’s various ecosystems. I think it not only gives the viewers visual enjoyment, but also leads them to think more deeply about their relationship with the environment and how can they impact the surrounding.

I was also interested in The Lost Passage. It reflects on this historical juncture of Holocene extinction by resurrecting a recollection of a lost passage with the use of artificial intelligence and machine learning. The audience can dwell in a habitat with the spirit of a species they previously exterminated, which is both ironic and bizarre. It also reflects something worth reflecting in real life and is a project worth digging into.

I think that what contributes to a successful interactive experience is that interactive part. When I was testing my own project and some other people’s project, I always feel something new when I can interact with the artifact. Ernest Edmonds stated that: “From my perspective, the psychological models most interesting for interactive art are not action response ones, but Systems Theory ones.” (Edmonds, 8) So far, I have only done the action response ones, which is better described by using influence comparing to interaction. I really want to do something like this, which is what happens in the two projects I did research about.

 

References

Behance. “Torre Glòries Data Exhibit.” Behance, https://www.behance.net/gallery/155708603/Torre-Glories-Data-Exhibit?tracking_source=search_projects%7Cinteractive%2Bart. 

 

STIRworld. “’The Lost Passage’ Weaves Art & Technology through a Swarm of Artificial Pigeons.” STIRworld, STIRworld.com, 6 May 2022, https://www.stirworld.com/see-news-the-lost-passage-weaves-art-technology-through-a-swarm-of-artificial-pigeons. 

 

Recitation 6: Animating an Interactive Poster

An animated poster for the IMA show:

When I’m working on this poster, I found that there’s still a lot of concept that I don’t understand and still many kinds of code that I am not familiar with. So I was actually learning and working at the same time. 

I tried several different ways of organizing the poster, and I kept them in record for reference.

This is the final version of the poster. By moving the cursor vertically over each bar, I can alter its saturation.


<

PFont myFont;

int barWidth = 20;
int lastBar = -1;

int dim;

void setup() {
 size(1024, 768);
  colorMode(HSB, width, height, 100); 
  noStroke();

 dim = width/2;
  background(0);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  ellipseMode(RADIUS);
 frameRate(10);
}

void draw() {
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(barX, mouseY, 66);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
   {
    drawGradient(dim, height/2);
} 
}


void drawGradient(float x, float y) {
  int radius = dim/2;
  float h = random(0, 360);
  for (int r = radius; r > 0; --r) {
    fill(h, 90, 90);
    ellipse(x, y, r, r);
     h = (h + 1) % 360;
  }
  
  fill(0);
  rect(400, 290, 242, 35);
  rect(300, 350, 440, 35);
  rect(390, 400, 265, 35);
  rect(440, 450, 160, 35);
  
  fill(255);
textAlign(CENTER,CENTER);
text("IMA Fall 22 End-Of-Semester Show", 520, 360);
textSize(30);
text("Location: 8th floor", 520, 304); 
text("Friday December 16", 520, 414);
text("6pm to 8pm", 520, 464);
}

 

Homework

Task #1: Add a Fixed Pattern

For this task, i re-used the function i created in the recitation and repeat it to cover the whole screen.

// Nested for() loops can be used to
// generate two-dimensional patterns
size(800, 800);

for (int i = 100; i < 750; i = i+100) {
  for (int j = 100; j < 750; j = j+100) {
  //draw the ears 
fill(0, 0, 0); 
ellipse(i-55, j-65, 55, 55); 
ellipse(i+55, j-65, 55, 55); 

  //draw the head 
fill(245, 234, 230); 
ellipse(i, j, 130, 130); 

  //draw the eyes 
fill(255); 
ellipse(i-25, j-15, 30, 20); 
ellipse(i+25, j-15, 30, 20); 

  //draw the pupils 
fill(0); 
ellipse(i-25, j-15, 10, 10); 
ellipse(i+25, j-15, 10, 10); 

  //draw the mouth 
fill(255, 100, 100); 
arc(i, j+20, 50, 30, 0, 3.14); 
line(i-25, j+20, i+25, j+20); 

  //draw the nose 
fill(255, 140, 140); 
triangle(i+5, j+5, i-5, j+5, i, j); 

  //draw the dimples 
fill(255, 220, 220); 
ellipse(i-45, j+5, 30, 15); 
ellipse(i+45, j+5, 30, 15); 

  //draw the crown 
fill(255, 140, 140); 
triangle(i-30, j-60, i-20, j-85, i-10, j-60); 
triangle(i+10, j-60, i+20, j-85, i+30, j-60); 
fill(255, 220, 220); 
triangle(i-20, j-60, i, j-90, i+20, j-60); 
fill(255, 255, 255); 
ellipse(i-20, j-85, 5, 5); 
ellipse(i+20, j-85, 5, 5); 
ellipse(i, j-90, 5, 5);
  }
}

Task #2: Add a Random Pattern

I started a new sketch and copy the function i created in Part 1. I programmed it so that it could change size.

float size = 50;
float minSize = 30;
float maxSize = 100;
float sizeSpeed = 1;

void setup() {
  size(1024, 768);
  background(#FDC9E0);
}

void draw() {
    //if the size is either too small, or too big, flip the size speed sign (if it was positive (growing) - make it negative (shrink) - and vice versa)
  if(size < minSize || size > maxSize) {
    sizeSpeed *= -1;
  }
  //increment the size with the size speed (be it positive or negative)
  size += sizeSpeed;
  
 background(200,235,233);
  
  for (int i=100; i<=width; i+=200) {
  for (int j=100; j<=height; j+=200) { 
    
     //draw the ears 
fill(0, 0, 0); 
ellipse(i-55, j-65, size+5, size+5); 
ellipse(i+55, j-65, size+5, size+5); 

  //draw the head 
fill(245, 234, 230); 
ellipse(i, j, size+80, size+80); 

  //draw the eyes 
fill(255); 
ellipse(i-25, j-15, size-20, size-30); 
ellipse(i+25, j-15, size-20, size-30); 

  //draw the pupils 
fill(0); 
ellipse(i-25, j-15, size-40, size-40); 
ellipse(i+25, j-15, size-40, size-40); 

  //draw the mouth 
fill(255, 100, 100); 
arc(i, j+20, size, size-20, 0, 3.14); 
line(i-25, j+20, i+25, j+20); 

  //draw the nose 
fill(255, 140, 140); 
triangle(i+5, j+5, i-5, j+5, i, j); 

  //draw the dimples 
fill(255, 220, 220); 
ellipse(i-45, j+5, size-20, size-35); 
ellipse(i+45, j+5, size-20, size-35); 

  //draw the crown 
fill(255, 140, 140); 
triangle(i-30, j-60, i-20, j-85, i-10, j-60); 
triangle(i+10, j-60, i+20, j-85, i+30, j-60); 
fill(255, 220, 220); 
triangle(i-20, j-60, i, j-90, i+20, j-60); 
fill(255, 255, 255); 
ellipse(i-20, j-85, size-45, size-45); 
ellipse(i+20, j-85, size-45, size-45); 
ellipse(i, j-90, size-45, size-45);
    
    noStroke();
  }
  }
}

Task #3: Make it interactive

I move the mouse across the screen and the Disney figure follows.

 

float i;
float j;
float easing = 0.05;

void setup() {
  size(1000, 660); 
  noStroke();  
}

void draw() { 
  background(51);
  
  float targetX = mouseX;
  float di = targetX - i;
  i += di * easing;
  
  float targetY = mouseY;
  float dj = targetY - j;
  j += dj * easing;
  
    //draw the ears 
fill(0, 0, 0); 
ellipse(i-55, j-65, 55, 55); 
ellipse(i+55, j-65, 55, 55); 

  //draw the head 
fill(245, 234, 230); 
ellipse(i, j, 130, 130); 

  //draw the eyes 
fill(255); 
ellipse(i-25, j-15, 30, 20); 
ellipse(i+25, j-15, 30, 20); 

  //draw the pupils 
fill(0); 
ellipse(i-25, j-15, 10, 10); 
ellipse(i+25, j-15, 10, 10); 

  //draw the mouth 
fill(255, 100, 100); 
arc(i, j+20, 50, 30, 0, 3.14); 
line(i-25, j+20, i+25, j+20); 

  //draw the nose 
fill(255, 140, 140); 
triangle(i+5, j+5, i-5, j+5, i, j); 

  //draw the dimples 
fill(255, 220, 220); 
ellipse(i-45, j+5, 30, 15); 
ellipse(i+45, j+5, 30, 15); 

  //draw the crown 
fill(255, 140, 140); 
triangle(i-30, j-60, i-20, j-85, i-10, j-60); 
triangle(i+10, j-60, i+20, j-85, i+30, j-60); 
fill(255, 220, 220); 
triangle(i-20, j-60, i, j-90, i+20, j-60); 
fill(255, 255, 255); 
ellipse(i-20, j-85, 5, 5); 
ellipse(i+20, j-85, 5, 5); 
ellipse(i, j-90, 5, 5);
}

Comments:

I think doing these homework are really helpful with my getting better at using processing. Some of my homework are actually not that good looking, so I’m already thinking about that I can build much more pretty and interesting figures in my final project. After doing all these by myself, I actually like processing a lot. Because I find that I can be very creative when I’m using it and it helps me a lot with critical thinking and learning how to think with logic.

I really look forward to building more interesting things using processing and connecting it with auduino!

Recitation 5: Processing Basics

For this recitation exercise, I worked individually to draw an image in Processing based on a photograph that inspired me.

I went to a big Disney store during the weekend and had a good time there. The stuffed animals and the head bands are so cute! I took a picture with the head band on and I love this picture so much. So I decided to choose this image as a motif for this exercise.

Because this is a picture and so far I am not capable of programming very complicated images using Precessing, so I only drew the outline of the image and keep the most important elements such as the head band and my face in it. Because of the covid policy, I was wearing a mask in the picture, but I want to show my smily face in the drawing, so I get rid of the mask and replace it with a smile to show my happiness.

 

My final creation is different from the image but they have similarities to some degree. I think they are both cute and shows the happiness Disney bring us. I think that drawing in Processing was a good means of realizing my design, and after I become better at using Processing, I will be able to drawing more complicated images and create better and more interesting creations. I am really exited about this and I love Processing a lot.

 

Code:

size(200, 180);

background(220);

//draw the ears
fill(0, 0, 0);
ellipse(45, 35, 55, 55);
ellipse(155, 35, 55, 55);

//draw the head
fill(245, 234, 230);
ellipse(100, 100, 130, 130);

//draw the eyes
fill(255);
ellipse(75, 85, 30, 20);
ellipse(125, 85, 30, 20);

//draw the pupils
fill(0);
ellipse(75, 85, 10, 10);
ellipse(125, 85, 10, 10);

//draw the mouth
fill(255, 100, 100);
arc(100, 120, 50, 30, 0, 3.14);
line(75, 120, 125, 120);

//draw the nose
fill(255, 140, 140);
triangle(105, 105, 95, 105, 100, 100);

//draw the dimples
fill(255, 220, 220);
ellipse(55, 105, 30, 15);
ellipse(145, 105, 30, 15);

//draw the crown
fill(255, 140, 140);
triangle(70, 40, 80, 15, 90, 40);
triangle(110, 40, 120, 15, 130, 40);

fill(255, 220, 220);
triangle(80, 40, 100, 10, 120, 40);

fill(255, 255, 255);
ellipse(80, 15, 5, 5);
ellipse(120, 15, 5, 5);
ellipse(100, 10, 5, 5);