Processing Animation

Recitation Work

void setup()
{
size(600, 600);
}

void draw()
{
background(0);
rectMode(CENTER);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
if(mouseX >= 272 && mouseX <=328 && mouseY>= 320 && mouseY<= 376)
{
background(0);
stroke(0); //turn yellow square
fill(0);
rect(width/2, height/2+48, 56, 56);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);

}
if(mouseX >= 252 && mouseX <=348 && mouseY>= 292 && mouseY<= 388)
{
background(0);
stroke(0); //turn gray square
fill(0);
rect(width/2, height/2+40, 96, 96);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 232 && mouseX <=368 && mouseY>= 262 && mouseY<= 398)
{
background(0);
stroke(0); //turn blue square
fill(0);
rect(width/2, height/2+30, 136, 136);

stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 212 && mouseX <=388 && mouseY>= 232 && mouseY<= 408)
{
stroke(0); //turn green square
fill(0);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);

}
}

Additional Homework

Processing Basics

Introduction

The goal of this recitation was to learn the basics of the Processing IDE through recreating a piece of art and then modifying it for our own. 

Process

For my project, I chose to recreate Josef Albers’ Homage to the Square: Apparition

<- Original

<- My creation (I tried to screenshot the computer screen, but the WordPress would not let me paste it into the post)

To make mine different, I tried to get every layer to change to the same color as the background but was only able to get the outer layer to follow suit correctly.

Reflection

I think Processing was a perfectly good media to recreate the original Homage to the Square because using a different media and once again paying homage to the square. 

Code

void setup()
{
size(600, 600);
}

void draw()
{
background(0);
rectMode(CENTER);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
if(mouseX >= 272 && mouseX <=328 && mouseY>= 320 && mouseY<= 376)
{
background(0);
stroke(0); //turn yellow square
fill(0);
rect(width/2, height/2+48, 56, 56);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);

}
if(mouseX >= 252 && mouseX <=348 && mouseY>= 292 && mouseY<= 388)
{
background(0);
stroke(0); //turn gray square
fill(0);
rect(width/2, height/2+40, 96, 96);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 232 && mouseX <=368 && mouseY>= 262 && mouseY<= 398)
{
background(0);
stroke(0); //turn blue square
fill(0);
rect(width/2, height/2+30, 136, 136);

stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 212 && mouseX <=388 && mouseY>= 232 && mouseY<= 408)
{
stroke(0); //turn green square
fill(0);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);

}
}

Homework

Part 1

void setup()
{
size(600, 600);
rectMode(CENTER);
background(255);
strokeWeight(10);
rect(width/2, height/2, 100, 100);
}

Part 2

float x = 300;
float y = 300;
float w = 100;
float h = 100;
float speedW = 5;
float speedH = 5;

void setup()
{
size(600, 600);
rectMode(CENTER);
background(255);
strokeWeight(10);
//frameRate(5);
rect(x,y, w, h);
}

void draw()
{

background(255);
rectMode(CENTER);
rect(x, y, w, h);
if ((speedW+w> width) || (speedW+w <0))
{
speedW = -speedW;
speedH = -speedH;
}
w = w+speedW;
h = h+speedH;
}

Part 3

float x = 300;
float y = 300;
float w = 100;
float h = 100;
float speedW = 5;
float speedH = 5;

void setup()
{
size(600, 600);
rectMode(CENTER);
background(255);
strokeWeight(10);
//frameRate(5);
rect(x,y, w, h);
}

void draw()
{
stroke(random(255),random(255),random(255));
background(255);
rectMode(CENTER);
rect(x, y, w, h);
if ((speedW+w> width) || (speedW+w <0))
{
speedW = -speedW;
speedH = -speedH;
}
w = w+speedW;
h = h+speedH;
}

Part 4

float x = 300;
float y = 300;
float w = 100;
float h = 100;
float speedW = 5;
float speedH = 5;
float colors;

void setup()
{
size(600, 600);
rectMode(CENTER);
background(255);
strokeWeight(10);
frameRate(100);
rect(x,y, w, h);
colorMode(HSB);
}

void draw()
{
stroke(colors,255,255);
background(255);
rectMode(CENTER);
strokeWeight(10);
if (colors>=255) colors = 0;
else colors++;
stroke(colors,255,255);
rect(x, y, w, h);
if ((speedW+w> width) || (speedW+w <0))
{
speedW = -speedW;
speedH = -speedH;
}
w = w+speedW;
h = h+speedH;
}

void keyPressed()
{
if (key == CODED)
{
if (keyCode == UP)
{
y = y – 5;
}
else if (keyCode == DOWN)
{
y = y + 5;
}
else if (keyCode == LEFT)
{
x = x – 5;
}
else if (keyCode == RIGHT)
{
x = x + 5;
}
}
}

Reflection

I think the most interesting function to use during this recitation was the keyPressed function and specifically checking if a key was coded to make sure you got the right key. 

Final Project Essay

PROJECT NAME: 侬说啥?(What do you say?)

PROJECT STATEMENT OF PURPOSE 

I was thinking about doing my final project about learning Chinese dialects and having these native speakers of the dialect be able to have a visual for the learners. I want to do this project as well to raise awareness about the dying population of local dialect speakers. Fewer and fewer children are learning their local dialect because schools are only teaching Mandarin. Many parents are also not teaching or talking to their children in the local dialect because they want to make sure their children have the best chance in school with no issues of getting confused with words. The Chinese section of the gaokao also only tests on the standard Mandarin, so it further promoting the killing of the local dialects. As I was brainstorming how to address this issue, with the help of the presentation, I decided to focus this project on children, therefore making specific design choices that would entice children to play with the project.

 PROJECT PLAN 

This project aims to intrigue children to learn the dialect of their families. To do this, I will create a puzzle of China with the different provinces being able to be taken out so the child user can hear the dialect of that region of China. However, instead of randomly them picking, I also want to use a joystick so when they move into the province on the screen, they will hear the dialect in whispers (a lower volume) and looped. When they lift the piece up, the volume will be louder and can clearly hear the dialect. To get the dialects for this project, I have enlisted the help of native speakers from NYU Shanghai’s Class of 2022 and 2023 to be recorded. Interestingly, while finding native speakers for the recordings, finding people who spoke the dialect was hard because of this issue of only learning Mandarin. At the time of submission of this essay,  I have found native speakers from Sichuan, Chongqing, Shanghai, Guangdong, Fujian, and I am waiting on a reply from confirmed speakers from Beijing and Hebei. I am working on finding native speakers from other areas to try to get as many recordings as possible. In addition, I have finished designing the base of the puzzle and the puzzle pieces for the China puzzle. 

CONTEXT AND SIGNIFICANCE 

Talking with people about the pressure they faced when preparing for gaokao for the Chinese section and where they’re from inspired my want to address this issue. It was very interesting when I was doing preparatory research for this project after submitting the original proposal because when I asked friends who came from certain regions if they spoke the native dialect of the region, it proved difficult because oftentimes, they did not speak their regional dialect. For me, I thought this was weird because I speak my American Northeast regional dialect which isn’t as different as Chinese dialects are, but when we were taught English in school, we were taught specifically to the region. I think it’s just a cultural difference, but it seems very different for me. I think this project achieves interaction because it forces the user to give input to the project and the project will give output in which the user then acts on. I think this project is significant because I think this is one of the topics swept underneath the rug when talking about the unification of the Chinese language. This project is intended for young children so I wanted to make the interface as easy as possible for them to interact with, hence the puzzle. This is of special value to Chinese children to give them an interest in learning about their native region’s dialect. After successful completion, I would like to find out how this has affected culture because culture is often tied to language. I think this will help to address the idea of culture wiping that China has been doing with its minorities and the strength that comes from keeping your culture. 

Final Project 3 Project Proposals

  •  侬说啥?
    • The title is in reference to 2 Chinese dialects 侬 for Shanghainese and 啥 for Hunan-ese. The translation is “What did you say?” which directly relates to the project because it’s teaching dialect basics.
    • I was thinking about doing my final project about learning Chinese dialects and having these native speakers of the dialect be able to have a visual for the learners. I want to do this project as well to raise awareness about the dying population of local dialect speakers. Fewer and fewer children are learning their local dialect because schools are only teaching Mandarin. Many parents are also not teaching or talking to their children in the local dialect because they want to make sure their children have the best chance in school with no issues of getting confused with words. The Chinese section of the gaokao also only tests on the standard Mandarin, so it further promoting the killing of the local dialects.
  • How blow can you go?
    • The title is a reference to a line in the Electric Shuffle “How low can you go” and reference how the game works.
    • For this project, users need to blow enough to get underneath the limbo pole. For this idea, I thought of the fad game Flappy bird. I remember it being hard for just tapping, so making it a little harder with the blowing makes it more fun hopefully. I am not exactly sure which kind of sensor I will use, I was thinking of using a pressure sensor, but I will still need to do some more research. 
  • Oscar the Grouch
    • This title is a reference to the Sesame Street character because he is a character in a trash bin and is grouchy (about incorrect sorting).
    • When thinking about this project, I immediately thought of my daily struggle with my residents not following Shanghai’s trash sorting, making me Oscar the Grouch. For this project, I would like to have the four bins on the screen with a grouchy monster hovering over. The user will be given a piece of trash that they have to put in the correct bin, otherwise, the monster will be very angry. To select which bin they want to place the trash, I want to use 4 big tv show game buzzers to represent each bin. I will create the display through processing and the controlling of the buttons through Arduino. This project’s goal is to make people more aware of the new trash sorting system. 

Final Project Research Part 1

A. You visited the Chronus exhibition where you saw technology-based art pieces. Some of them use the same components you have been using in this course. Discuss the experience you had in this exhibition compared to other exhibitions of non-technology based artwork you have visited before.    

Many times when I go to art museums that are traditional and do not include technology, I spend most of my time trying to imitate art (pictures below). I think this exhibit was much more enjoyable because I was able to experience the art instead of just looking at it and moving on.  Artificial Intuition specifically was very engaging because it got in the way of where you were walking. Traditionally, art is hung on the walls or is on the floor and this changed this up as well because it was dangling from the ceiling like long tentacles. 

<– Circa 2018 showing Chinese exchange students my idea of enjoying art museums

B. Research at least two other interactive projects to serve as inspiration for your Final Project. Find projects that align with what you think a successful interactive experience is and at least one that you think is less successful.

  • Discuss why.
  • In your research process, you are strongly encouraged to consider interactive experiences drawn from a variety of sources, media, materials, formats, etc.

Whac-A-Mole This project recreates the traditional Whac-A-Mole carnival game by using light-up buttons and a scoreboard. I think this project promotes a good user interaction because it catches the user’s eyes right away with its big buttons. I think this is a slightly weaker successful interactive experience because it does not come with a set of instructions, so anyone who has not played the game would be easily confused about what to do about the buttons and lights, and how the score is related. 

Geometry Dash This recreates the game Geometry Dash through Processing as the output and an Arduino as an input. I think this project promotes good user interaction because it’s eye-catching and engaging.  What makes this a really great compared to the previous project because it is eye-catching with the screen and keeps the user engaged with on-screen instructions. 

I also looked up how to put a video in Processing through this reference. I wanted to find this out because I was thinking about doing my final project about learning Chinese dialects and having these native speakers of the dialect be able to have a visual for the learners. I want to do this project as well to raise awareness about the dying population of local dialect speakers. Less and less children are learning their local dialect because schools are only teaching Mandarin. Many parents are also not teaching or talking to their children in the local dialect because they want to make sure their children have the best chance in school with no issues of getting confused with words. The Chinese section of the gaokao also only tests on the standard Mandarin, so it further promoting the killing of the local dialects. Dialects

C. Go back to your definition of interaction as you defined it during the group project. Based on the initial definition and your experience developing and executing your midterm project, in your own words, explain what an interactive experience should consist of to be successful. Support your explanation by your analysis of the projects you researched in point A and B, and by citing references from the readings, and other artists or online articles you have read. 

In my definition for the previous projects, I don’t think I managed to think about initial user thought and how engaged it keeps the user. I only really considered what was going on in the project. After the user testing session and the presentation of the midterm project, I was able to add more to my second draft of defining interaction as I was able to finally see the user side in action, besides using it as a creator. In the Chronus exhibit, the best pieces were the ones that were able to keep users coming back. In the case of the field trip, these two pieces were Artificial Intuition and Beholding the Big Bang because these kept students floating back and forth between the two because of their design and execution. In the projects for part B, I think they are good at keeping users entertained and are eye-catching with their distinct features.