Step 2: Project Proposal

By Lifan Yu (ly1164)

      I am doing this final project with my partner Xinran Fan. We would like to create an interactive project that’s educational, inspiring or fun.

 

      Project 1

PROJECT TITLE: Save Me From Plastic Waste!!

PROJECT STATEMENT OF PURPOSE:

(Inspiration) Recently I’ve been doing research into the United Nations’ “Sustainable Development Goals”, thus focusing on many contemporary environmental problems such as pollution. I acknowledged that nowadays, we humans are creating too much plastic waste. This seriously pollutes our ocean. A piece of plastic will take a tremendously long time to be degraded. I came across some news about marine animals accidentally eating plastic pieces, become sick and die. Some marine animals get entangled in plastics. The ocean environment is becoming more and more dangerous for sea animals.

(what’s our project about) This is a two-player game. Player A plays the role of a fish undersea. Player A uses a mouse (we are thinking of creating something that can substitute a mouse) to control the fish’s movement. The fish is supposed to hide away from pieces of plastic waste that dropped into the sea and starts to float(bounce) around in the water. When the fish touches a piece of plastic, the plastic gets “eaten”. When the fish ate over a certain number of plastic pieces before the game ended, the fish will die and game ends.

Payer B plays the role of humans. Three different kinds of plastic will fall down from different places in the sky—plastic tableware, plastic packaging and plastic bottles. These represent the plastic products we use and dispose frequently. The person will use two buttons (connected to Arduino) –a left and a right button to control movements of a board (a rectangle shape in processing) that blocks plastic pieces from falling down(into the sea), representing actions to lessen plastic product usage. Plastic items will disappear when they touch the “board”.

When the players win the game, a piece of audio will be played, a sign will appear that instructs the players to the direction of a candy box. Players can take candies from a box placed nearby. When players move close enough to the box, a servo motor that’s inside the box and is attached to a box of candy will turn and a box of candies will be served. Small pieces of notes with daily actions that helps turn our world into a sustainable one will be put on the wrappers of the candies.

(specific audience&impact)—Everyone. If we don’t start taking actions, this kind of pollution is eventually going to harm ourselves. Therefore I want to create a project that’s educational—that raises awareness of plastic pollution and calls for daily actions to lessen the use of plastic products.

      (research I did) Scott Snibbe’s – Interactive art: ARCTIC ICE (2008) https://www.snibbe.com/education-entertainment#/arctic-ice/

“Arctic Ice is an interactive immersive exhibit on global warming that tells the complicated story of feedback loops in melting arctic ice that are a major component of climate change.” When people play this game, they try to make movements to keep the ice from melting and allow the little polar beat jump across the ice pieces to its mother.

      (How it influenced my project design) This project I researched is in the form of an interactive game which allow people to interact with it, move around and have fun while being introduced to the global warming and its negative effects. This raises people’s environmental awareness. Especially when they see the happy scene of the two bears hugging, people will naturally cherish what we still have right now—right now when there’s still something we can do to solve global warming problems. It is easy to play, fun and educational.

Project 2

PROJECT TITLE: Be Safe Online!

PROJECT STATEMENT OF PURPOSE:

(inspiration)My partner Xinran came up with this idea. Elders are easier to be taken in by online frauds because they are not very familiar with the environment online.

(what’s our project about/audience and impact) This is a game that helps old people get familiar with common situations online. Virtual “webpages” will appear, along with the messages from online fraud or trustworthy websites and trustworthy people like online police. A player can push buttons to decide which ones to believe and which ones not to believe.

Project 3

PROJECT TITLE: Halloween Horrors!

PROJECT STATEMENT OF PURPOSE:

(Inspiration) This idea is inspired by our school’s Halloween event. When we walk into the haunted house, we encounter different horrors when we reach different places. Also, my first animation made in processing contain a small ghost whose movements are controlled by mouse and keys. When it reach different places, different surprises will appear.

My previous animation:

(What’s our project about) We wish to create a real scene with 3D printed objects and a certain route. A “ghost” whose movements are controlled by motors can move along the route. When it reaches certain spots (when sensors sense it), surprises will fall from above or appear from left and right. Falling candies, emerging laser-cut “bats”(these are controlled by motors) and projected animations on its nearby objects (created using processing) etc.

(audience/impact) Everyone who is interested in seeking surprises can have fun playing this game. This is intended to surprise people and allow them to have fun.

Recitation 7: Functions and Arrays

By Lifan Yu (ly1164)

When no keys are pressed, the shapes don’t move.

When a key is pressed, the shapes began to move and bounce within the canvas.

A video of this:

Question 1：In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

When the for loop is in setup(), the shapes don’t move around. It only runs once. The shapes did appear in different random places when I run my code again and again, but even when time goes by, they always stay the same as they were when the code began to run.

In setup(), code only runs once. Like this:

In draw(), code runs in loops. In every frame, the shapes appear in different places. The for loop runs again and again in draw(), so the shapes move in a designed pattern according to the code in for loop() and the code that include variables from for loop().

like this:

Question 2：What is the benefit of using arrays? 

In my code, there are numerous shapes—100 of them. Also, every shape has a different position on the canvas. If I use individual variables to represent the coordinates, my code will be very complex—I will have to use different variables for different shapes. There is going to be more than 100 variables written out!

If there is something similar to formula that includes all the variables of the same kind and the patterns of their changes, I will only need to write my code once to create multiple shapes.

When I include the variables in an array, it dramatically simplifies my code because I can create and trace multiple variables of the same kind at the same time.

How might you use arrays in a potential project?

When I want to create a project that displays numerous shapes at the same time (and, the changes of their variables share a common pattern) I will use arrays with for loops to generalize their patterns, representing multiple variables using one array.

When I write the code for shapes or colors, I can write down the array’s name in the coordinate functions or in the fill()/stroke() functions.

【Code】(Final Version)

int shapes = 100;
float[]x = new float [shapes];
float[]y = new float [shapes];
float[]d = new float [shapes];
float[]R=new float [shapes];
float[]r=new float [shapes];
float[]size = new float [shapes];
float[]speedX = new float[shapes];
float[]speedY = new float[shapes];
color[]c = new color[shapes];//colors of the triangles
float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int i=0;

int D=40;//half the length of the bottom
int I=0;//x coordinate of an anchor point
int H=0;//y coordinate of an anchor point
int k=100;//controls sizes of the shapes
int R1=150;//controls the size of the smaller ellipses' orbit
int r1=5;//the smaller ellipses' radius


void setup(){
size(1000,1000);
background (70, 255, 295);
for (i=0; i<100; i++){
  x[i]=random(width);
  y[i]=random(height);
  size[i]=random(1,2);
  d[i]=40*size[i];
  R[i]=100*size[i];
  r[i]=5*size[i];
  speedX[i]=random(5);
  speedY[i]=random(5);
  c[i]=color(random(500),random(500),random(500));
smooth();
angle=0;
angleSpeed=PI/10;
}
}

 
   
void draw(){
  if (keyPressed==true){
     background (10,57,48);
for(int i=0; i<100; i++){
  display(x[i], y[i], d[i], R[i], r[i], size[i], c[i] );
  x[i]=x[i]+speedX[i];
  y[i]=y[i]+speedY[i];
  angle+=angleSpeed;
 
  if(x[i]>=width||x[i]<=0){
    speedX[i]=-speedX[i];
  }
  
  if(y[i]>=height||y[i]<=0){
    speedY[i]=-speedY[i];
  }
} 
}else{

  background(70,255,259);
  for(I=0;I<30; I++){
  for(H=0;H<30; H++){

fill (random(500),random(500),random(500));
strokeWeight(1);
stroke(0);
triangle (k*I-D, k*H, k*I+D, k*H, k*I, k*H-1.73*D);
line (k*I, k*H, k*I, k*H-1.73*D);
noFill();
ellipse (k*I, k*H-0.577*D, 1.1418*D, 1.1418*D);

angle+=angleSpeed;

ellipse ( k*I+R1*cos(angle), k*H-0.577*D+R1*sin(angle), r1,r1);//smaller ellipses


}
  }
  
}
}

void display(float x, float y, float d, float R, float r, float size, color c){    
fill (c);
strokeWeight(4);
stroke(random(500),random(500),random(500));
triangle (size*(x-d), size*y, size*(x+d), size*y, size*x, size*(y-1.73*d));
line (size*x, size*y, size*x, size*(y-1.73*d));
noFill();
ellipse (size*x, size*(y-0.577*d), size*(1.1418*d), size*(1.1418*d));
angle+=angleSpeed;
fill (random(500),random(500),random(500));
ellipse ( size*x+R*cos(angle), size*y-0.577*d+R*sin(angle), r,r);//smaller ellipses
}

 

At first, when I still haven’t figured out how to use arrays, my code looked like this: 

 

float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int d=40;//half the length of the bottom
int i=0;//x coordinate of an anchor point
int h=0;//y coordinate of an anchor point
int k=100;//controls sizes of the shapes
int R=150;//controls the size of the smaller ellipses' orbit
int r=5;//the smaller ellipses' radius

void setup(){
size(800,800);
background (70, 255, 295);
smooth();
angle=0;
angleSpeed=PI/50;
}

void draw(){
  for(i=0;i<30; i++){
  for(h=0;h<30; h++){

fill (random(500),random(500),random(500));
triangle (k*i-d, k*h, k*i+d, k*h, k*i, k*h-1.73*d);
line (k*i, k*h, k*i, k*h-1.73*d);
noFill();
ellipse (k*i, k*h-0.577*d, 1.1418*d, 1.1418*d);
angle+=angleSpeed;
ellipse ( k*i+R*cos(angle), k*h-0.577*d+R*sin(angle), r,r);
}
  }
  
}

When I started using arrays, my code looked like this:

(I combined these two and made the final version above)

int shapes = 100;
float[]x = new float [shapes];
float[]y = new float [shapes];
float[]d = new float [shapes];
float[]R=new float [shapes];
float[]r=new float [shapes];
float[]size = new float [shapes];
float[]speedX = new float[shapes];
float[]speedY = new float[shapes];
color[]c = new color[shapes];//colors of the triangles
float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int i=0;

void setup(){
size(1000,1000);
for (i=0; i<100; i++){
  x[i]=random(width);
  y[i]=random(height);
  size[i]=random(1,2);
  d[i]=40*size[i];
  R[i]=100*size[i];
  r[i]=5*size[i];
  speedX[i]=random(5);
  speedY[i]=random(5);
  c[i]=color(random(500),random(500),random(500));
smooth();
angle=0;
angleSpeed=PI/10;
}
}


void draw(){
  background (10,57,48);
  
for(int i=0; i<100; i++){
  display(x[i], y[i], d[i], R[i], r[i], size[i], c[i] );
  x[i]=x[i]+speedX[i];
  y[i]=y[i]+speedY[i];
  angle+=angleSpeed;
 
  if(x[i]>=width||x[i]<=0){
    speedX[i]=-speedX[i];
  }
  
  if(y[i]>=height||y[i]<=0){
    speedY[i]=-speedY[i];
  }
}
}

void display(float x, float y, float d, float R, float r, float size, color c){    
fill (c);
triangle (size*(x-d), size*y, size*(x+d), size*y, size*x, size*(y-1.73*d));
line (size*x, size*y, size*x, size*(y-1.73*d));
noFill();
ellipse (size*x, size*(y-0.577*d), size*(1.1418*d), size*(1.1418*d));
angle+=angleSpeed;
fill (random(500),random(500),random(500));
ellipse ( size*x+R*cos(angle), size*y-0.577*d+R*sin(angle), r,r);//smaller ellipses
}

Final Project Step 1-Preparatory Research and Analysis-Lifan Yu

 

A.Experience in Chronus exhibition and Comparing this to other non-technology based artwok:

 

1. “Rechnender Raum (Computing Space)”

A project that really interested me was the “Rechnender Raum (Computing Space)”. It’s made of wood slats, strings, servo motors and lead weights. It is a “full functional logic exact neural network”. I saw the lead weights moving up and down in some logical patterns, controlled by servo motors–the same kind of motors we used in class and in our mid-term project.

The outside part, where all the lead weights are attached, shows the inner process of computing. This is an obvious and simplified way of presenting to us the usually invisible logic behind computing results. Walking around, I can get a brief idea of how computing processes work.

The center part is a polyhedron that changes shape. Strings that are attached to lead weights pull it in different directions. The “pulling” of strings is a result of the previous movements of lead weights (previous computing process). Therefore, the changes in the polyhedron’s shape are results of computing. The inside part displays the final results.

This work attracts me because it turns the machine inside out and gave us a unique perspective of computing. It shows the inner patterns of computing in a visualized, simplified and artistic way. Observing how the lead weights were moving and how they influenced the movements of strings that resulted in changing the shape of the polyhedron is an inspiring experience.

Looking at it, I came understood that tiny, simple units can contribute to macroscopic, complex changes. Simple, repetitive and almost tedious-looking processes (such as the lead weights moving up and down again and again), when connected with each other within a certain logic, can create amazing output (such as the polyhedron’s artistic changes in shape).

2.“Test Execution Host(Turing Machine)”

This device adapted the concept and principles of the Turing Machine. I saw a small device dropping colored liquid (represents 1) and water (represents 0) on sand, rocks and Arduino boards. The device detects the “0”s and “1”s as it moves along a track, computing and deciding on its next movement based on the liquid drops on the sand. We can see the more abstract computing process on a computer screen placed beside the whole device. The device itself is a materialized mimicry of Turing Machine. As is said in it’s introduction “a loss of digital identity and a kind of washing of encoded elements which flips them to the purely physical”.

        It is lifeless but also showing human’s way of computing. Although I didn’t quite understand its introduction, it gave me an impression of “when all the complex form of accurate, high-tech components are not taken into consideration, what the most primitive form of mathematical computing looks like”.

3.“Beholding the Big Bang”

A series of gears connected to each other, a latter gear rotates at a slower speed than its former gear. The last gear is almost impossible to rotate. It will only rotate once after 13.82 years.

This piece of artwork displays the extension of time. Looking at the quickly rotating gear at one end and the gear at the other end, I can feel this device conveying a sense of infinity with limited numbers of parts. When numbers increase in exponent form, they really have amazing power.

 

 

Non-technological artwork can also convey incisive thoughts that align with technology as discussed above. However, they are displaying these using more traditional methods, instead of using technology itself. They use images, sculptures etc. as carriers of what the artists wish to express.

As for technological artwork, an inner logic based on computing (done by computers, machines etc.) is added. Their structures including circuits, computers, sensors, motors etc. grant the artwork with motions, reactions. Interactions and even artificial intelligence.

Compared to non-technological artwork, technological artwork requires electricity, computing devices and circuits to keep them running. They are a new form of art.

Non-technological artwork only contain art, while technological artwork contains two parts that influence each other—technology and art. Technology provide art with a scientific basis. Art gives technology a vivid and visualized appearance. Their combination is attractive.

 

 

 

B.other interactive projects:

1. The project that inspired me: 10.000 Moving Cities – Same but Different, real cubes (Interactive Net-Based Installation)

http://marclee.io/en/10-000-moving-cities-same-but-different/

Visitors can select any city or place, using a digital interface. About the chosen place, the Internet is searched in real time for latest text, image, video and sound information. Four projectors and eight audio speakers project the results into the space. Visitors are able to walk through the model and experience the information in 3D.

The reason why it is so successful is that the video and audio information collected are up to date and real. They allow information collected in a distant land reappear vividly. The information is user-oriented. The 3D display of the images immerse user in the theme “places without a local identity” which. This experience is entertaining, eye-opening and educational. We hope to build devices like this—devices that not only provide people with visual and auditory amazements but also broaden their horizons.

2.A project that I think is less successful: Mini Residency in Kassel-Ocean Waves

The real-time sound of the road traffic ingresses through the basement window and is combined with the projected video “Ocean Waves”. Road noise is transformed to the sound of ocean waves.

This project merely presents information that it collected to audiences. The interactive level between the device and the audience is low. Visually, it is pretty, with a video of beautiful ocean waves. But transforming sounds of traffic to sounds of ocean waves doesn’t have a profound meaning. It won’t attract people’s interest for long. I wish to build a device that can call for certain actions, or push people to think about some contemporary issues carefully and have long-term attraction to its audience.

C. My definition of interaction:

At first, my definition of interaction is simply based on the first reading I had done—” interaction is a cyclic process in which two actors alternately listen, think, and speak”.( Crawford)

We made a reactive project rather than an interactive one in our group work. So I stressed the “two-way” feedback in my definition: Interaction is the process in which two people, devices, or a people and a device communicating with one another. This type of communication should include receiving information, processing the received information and giving a feedback, response or creating a certain kind of action according to the analytical results made in the processing stage. to distinguish interaction from reaction, both of the two interacting units should go through these three processes mentioned. They are both actively engaged in a rather continuous communication. Two-way  feedback is indispensable.

A project I researched also helped me distinguish reaction from interaction. Reactive Sparks by Markus Lerner. https://www.markuslerner.com/gallery/reactive-sparks/

This is an installation of seven double-sided vertical screens that is currently in front of the OSRAM main office in Munich, Germany. When cars pass the road in front of the screens, light-colored lines will appear on the screen. Meanwhile, the orange-color waves on the screen rise when the numbers of passing cars increase. There isn’t much interaction between the cars and the device.

Now, after midterm project, my new definition is: the process of an actor (a device, a person, an animal etc.) constantly communicating with the other “actor”. That is, it can detect the information of the other “actor” constantly. The other actor can also respond to the device’s movements, sounds etc. This type of communication can last for a long time instead of ending after a few simple movements.

Recitation 6: Processing Animation

By Lifan Yu

What I’ve learned:

       I’ve learned to make an animation using some functions that control the movements, colors and sizes of shapes, images and texts. Also, some functions include the input of keys and mouse. These functions can help make this animation an interactive one.

What’s my animation about:

       My animation is a Halloween-themed interactive animation.

On the first page, a witch flies over a pumpkin (using the “noise” function). A bat, a moon and an owl will appear when the mouse is placed in different areas. In one area, random ellipses (random size, random color) will appear following the mouse.

By pressing left button on the mouse, a new picture will appear: a cute little ghost and a route in front of it. A user can use the up, down, left and right keys to control the movement of the ghost. When the ghost reaches different places on the route, different things will appear, such as a square that rotates, words and shapes that changes color, a horizontal line that moves from the top to the bottom and a picture of a candy that I created.

the most interesting functions I used

      

image();

This function can load image files in my computer. I drew some of the shapes and pictures using processing, such as the cross and the owl etc. The witch, moon, pumpkin, candy and the little ghost are drawn using other software (They are all drawn by myself). To load these images, I used these function.

The first time I run the code, there appeared some errors with the hyperlink. The images cannot be found. I tried to put the images in the folder that contains the processing file I was working on. However it still didn’t work.

I tried putting the images in the initial processing folder called “processing-3.5.3” and the images can finally be successfully loaded.

noise();

       This function is used to control the movements of the “witch” image. The y value will continuously and randomly change while x increases unit by unit.

If we put background() in “void setup”, there will appear a track that assembles those in graphs that shows characteristics of sounds. But I put the background() in void draw(), so the track will not be seen. Instead, the moving image will be seen moving from left to right with random ups and downs.

rotate()

this function rotates some shapes and images. These are the most important lines of code.

rotate(angle);

angle+=0.1;

 

we should declare float angle=0 first.

arc()

this function is used to create arcs. I used this when drawing the owl.

Something more than mouseX, mouseY

The little ghost will come across “surprises” when it reaches certain places. However, the little ghost is controlled by up/down/left/right buttons. Although this process doesn’t involve “mouseX” and “mouseY”, but similar to using mouseX and mouseY, using “if()”, different things will happen when the coordinates x and y satisfy certain conditions.

Code for Recitation:

PImage img1;

PImage img2;

PImage img3;

PImage img4;//candy

PImage img5;//moon

PImage img6;//bat

float z, w;

int a,b;

int x=0;

int y=0;

int i=0;

int e=0;

int f=0;

int g=0;

int h=0;

int j=0;

int s=0;//ellipses

int u=0;//batx

int v=0;//baty

int zoom=1;

float angle=0;

 void setup(){

size(1000,1000);

  img1 = loadImage(“Ghost2.png”);

  img2 = loadImage(“pumpkin.png”);

  img3 = loadImage(“Witch.png”);

  img4 = loadImage(“candy.png”);

  img5 = loadImage(“moon.png”);

  img6 = loadImage(“bat.png”);

  z=0;

  a=0;

  b=0;

  background(0);

  rectMode(CENTER);

 }

void draw() {

background(0);

if (mousePressed == false) {

int k=int(random(0,300));

 fill(k);

  rect(25, 25, 50, 50);

  image(img2, 300, 300, img2.width/5, img2.height/5);

  textSize(33);

   fill(18,264,255);

   text(“Press left key on your mouse to summon a little ghost!  :)”, 100,50);

   textSize(23);

   fill(198,254,255);

   text(“Keep pressing on left key to give the ghost some energy”,150, 100);

   text(“or it will disappear!”,150,150);

   textSize(23);

   fill(234,177,19);

   text(“Move your mouse to different places and look for Halloween horrors!”,150,700);

   fill(0);

   rect(1000,300,0,250);

  

   noStroke();

  a = mouseX;

  b= mouseY;

  int c=int(random(0,30));

  int d=int(random(0,30));

  fill(505,60,70);

  ellipse(a, b, c, d);

  

   if (z>width-10){

     z=0;

   z+=10;

   w = noise(frameCount/15.0)*100;

   noStroke();

   image(img3, z,w+300, img3.width/5., img3.height/5);

   }else{

      z+=10;

   w = noise(frameCount/10.0)*100;

   noStroke();

   image(img3, z,w+300, img3.width/5., img3.height/5);

   }

   

   

   

  if(mouseX>500&&mouseY<500){

//Drawing an owl

    translate(800,400);

    stroke(25,56,175);

    strokeWeight(70);

    line(0, -35, 0, -65); //body

    noStroke();

    fill(255);

    ellipse(-17.5, -65, 35, 35);

    ellipse(17.5, -65, 35, 35);

    arc(0, -65, 70, 70, 0, PI);

    fill(25,56,175);

    ellipse(-14,-65,8,8);

    ellipse(14,-65,8,8);

quad(0,-58,4,-51,0,-44,-4,-51);

//Drawing an owl–reference: 爱上Processing, by Casey Reas, Ben Fry. Translated by陈思明, 郭浩赟. 出版社：人民邮电出版社 Posts & Telecom Press Co. LTD ISBN：9787115276933. 出版日期：2012 年5月.

  }

  if(mouseX>500&&mouseY>500){

e += int(random(-5, 5));

f += int(random(-5, 5));

fill(567,78,89);

ellipse(e+700, f+700, 70, 70);

fill(78,89,90);

ellipse(e+750, f+800, 80, 80);

fill(10,20,30);

ellipse(e+800, f+900, 60, 60);

fill(100,120,30);

ellipse(e+850, f+900, 60, 60);

g += int(random(-5, 5));

h += int(random(-5, 5));

fill(70,7,8);

ellipse(g+750, h+790, 80, 80);

fill(100,2,3);

ellipse(g+910,h+870, 70,70);

strokeWeight(20);

stroke(700,60,80);

noFill();

ellipse(g+900, h+700, 90,90);

strokeWeight(10);

stroke(60,70,250);

ellipse(g+700, h+900, 90,90);

  }

      int l=int(random(0,500));

    int m=int(random(0,500));

    int n=int(random(0,500));

   

     if(mouseX<500&&mouseY>500){

       int s=int(random(0,300));

        fill(l,m,n);

       ellipse(mouseX,mouseY,s,s);

      

     }

    

    

  if(mouseX<500&&mouseY<500){

    int u=int(random(0,400));

    int v=int(random(0,400));

    image(img5, 80, 200, img5.width/10, img5.height/10);

image(img6, u, v, img6.width/15, img6.height/15);

}

}

if (mousePressed == true) {

    background(0);

    strokeWeight(10);

    stroke(234,177,19);

    line(50,200,850,200);

    line(850,200,850,500);

    line(850,500,100,500);

    line(100,500,100,850);

    line(100,850,950,850);

   

   int l=int(random(0,500));

    int m=int(random(0,500));

    int n=int(random(0,500));

   

    textSize(53);

    fill(l, m, n);

   text(“Halloween!”, 300,50);

   textSize(23);

   fill(255);

   text(“~~~Follow the route using up/down/left/right bottons~~~”, 100,100);

  

   fill(0, 102, 153);

     rect(25, 25, 50, 50);

    

      image(img1, x, y, img1.width/5, img1.height/5);

  int i;

  if (keyPressed && (key==CODED)){

  if (keyCode == LEFT) {

    i=7;

   if(i<10000){

     x=x-i;

     i=i+1;

   }else{

     i=100;

   }

  

  } else if(keyCode==RIGHT){

    i=7;

   if(i<10000){

     x=x+i;

     i=i+1;

   }else{

     i=100;

   }

  } else if(keyCode==UP){

    i=7;

   if(i<10000){

     y=y-i;

     i=i+1;

   }else{

     i=100;

   }

  } else if(keyCode==DOWN){

   i=7;

   if(i<10000){

     y=y+i;

     i=i+1;

   }else{

     i=100;

    

   }

  }

  image(img1, x, y, img1.width/5, img1.height/5);

  }

  if(x>100&&x<700&&y<300){

    if (j < 10000) {

      strokeWeight(10);

      stroke(l,m,n);

    line(0, j, width, j);

    j = j + 10;

    }

  }

  if(x>100&&x<500&&y>200&&y<500){

   strokeWeight(30);

   stroke(l,m,n);

   line(300,400, 400, 400);

   line(350,300, 350,700);

 }

  if(x>500&&y>200&&y<550){

    translate(800,400);

    rotate(angle);

    strokeWeight(10);

    stroke (l,m,n);

    noFill();

    angle+=0.1;

    rect(30, 30, 80, 80);

 }

 if(x<300&&y>400){

   image(img4, 150, 400, img4.width/5, img3.height/5);

   textSize(40);

   fill(l,m,n);

   text(“candy!!!”,100,600);

 }

  

if(x>500&&y>550){

  textSize(74);

  fill(l, m, n);

  text(“BOO!!!”,550,800);

}

  }

}

Homework:

Homework:

float speedX=10;

float m=0;

float n=0;

float r=0;

void setup(){

size(600,600);

}

void draw(){

{

noFill();

strokeWeight(30);

background(100);

}

if (m>200){

m=0;

}

colorMode(HSB, 100);

m=m+1;

n=n+1;

stroke(m,n,200);

r=r+speedX;

if (r>300||r<0) {

speedX=-speedX;

}

ellipse(mouseX,mouseY,r,r);

}

Recitation 5: Processing Basics

By Lifan Yu (ly1164)

What I created:

The artworks I referred to:

       I chose this image because it is a combination of lines, ellipses and curves. This combination is artistic and beautiful. Moreover, it includes multiple kinds of strokes. I am able to practice creating the codes of different kinds of strokes. When I looked at the artwork, I was fascinated by the shape that appears to be both three-dimensional and not at all three dimensional at the same time. When my eyes traced the vertical lines, I felt like they are leading from a Three-dimensional to a two-dimensional part (or the other way around). I can endlessly wonder about the existing or non-existing 3-D space created by these strokes.

       When I finished drawing the first image, I chose a second image. I chose this one because it has a certain kind of pattern that makes it appear simple and neat but also include the sense of infinity. The change in angle can loop endlessly. The size of the rectangles can decrease at a certain rate until it’s tiny and invisible.

       In my artwork I would like to convey the sense of endlessness I felt when looking at these example artworks. I hope to stretch a viewers’ thoughts toward an unlimited direction. It would be great if they can find a pattern that can be looped endlessly or something that keeps them wonder whether it’s like this or like that.

       The size and slant angle of rectangles in my creation has a clear pattern. My incomplete cylinder creates an incomplete space. This is linked to my motif.

       The difference is I didn’t fully displayed endlessness in my artwork. I only used patterns and strokes to imply.

My code:

  I think that drawing in Processing was a good means of realizing my design. It’s neat, accurate and can be more easily made than artworks on paper. Endlessness can be easily created by lines of code that can run in loops nonstop.