Processing

Hello, guys!

It was so cool doing shape with codes and it was fun animating them. Based on what I have learnt in week 2, Processing run Java language and we are able to do any sketch using ‘function’ features. And for ‘variable’ is quite useful if we want to have many type variable in one sketch as it register the object as unique ID for each data type.

Here is 3 of my experiment with processing.

1. The Mark (Shape Making)Code :

Based on the output below, the image is inspired from X mark from treasure hunt map. I made the lines and ellipse the same size of stroke weight. The center of image is made from an ellipse with smaller size.

size(500,500);
background(235,112,122);
int fifty = 100;
noStroke();
fill(232,232,11);
rect(150,150,200,200);
stroke(25,145,130);
strokeWeight(60);
line(fifty,fifty,width-fifty,height-fifty);
line(height-fifty,fifty,fifty,width-fifty);
noStroke();
fill(200,20,75);
ellipse(250,250,40,40);
noFill();
strokeWeight(20);
stroke(200,20,75);
ellipse(250,250,300,300);
stroke(200,20,75);
strokeWeight(20);
line(70,70,120,120);
line(120,70,70,120);
stroke(200,20,75);
strokeWeight(20);
line(380,380,430,430);
line(430,380,380,430);
stroke(200,20,75);
strokeWeight(20);
line(70,380,120,430);
line(120,380,70,430);
stroke(200,20,75);
strokeWeight(20);
line(380,120,430,70);
line(430,120,380,70);

Here is the output:
Shape Making

 

2. The Chaoscene(Animation)Code:

Chaoscene started with the random lines created from right stage and ended at bottom stage. Then, ellipses are created randomly within certain area. I made it that way to separated these two shape so that it is easier to see their animation. I added a black rectangle and rectangle rings using beginShape() and vertex function.

void setup(){//Runs once
size(640,500);
background(0);}void draw(){
//Runs repeatedly

float y = random(-100,100);
stroke(random(0,20),random(0,200),random(0,100));
strokeWeight(random(0,10));
line(random(width+100),random(0,height),random(width),random(width+100));

fill(250);
strokeWeight(random(0,100));
ellipse(random(320+y),random(250+y), 100,100);

noStroke();
fill(0,0,0);
rect(320-50,250-50, 100,100);

beginShape();
vertex(100,140);
vertex(140,140);
vertex(140,360);
vertex(500,360);
vertex(500,400);
vertex(100,400);
endShape();

beginShape();
vertex(500,400);
vertex(540,400);
vertex(540,100);
vertex(100,100);
vertex(100,140);
vertex(500,140);
endShape();
}

Here is the output:

 

3. The Restribom (Animation)Code:

For this experiment, I started random lines with red, white, grey and black colors from the center of stages. I restricted the end of lines by using if and else if statement. Then I added a random color and stroke size for the triangle at the center.

void setup(){
//Runs once
size(640,500);
background(195);}
void draw(){
//Runs repeatedlyfloat x = random(width);
float y = random(height);if( x > 500){
x = x – 100;}
else if ( x 400){
y = y – 100;}
else if ( y < 100){
y = y + 100;}

stroke(255,0,0);
strokeWeight(random(0,10));
line(320,250,x,y);

stroke(random(255));
strokeWeight(random(0,10));
line(320,250,x,y);

stroke(random(255));
strokeWeight(random(0,60));
beginShape();
line(320,200,365,285);
line(365,285,275,285);
line(275,285,320,200);
endShape();

stroke(255,0,0);
strokeWeight(random(0,60));
beginShape();
line(320,200,365,285);
line(365,285,275,285);
line(275,285,320,200);
endShape();
}

Here is the output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s