Recitation 5: Processing Basics

This is the image I chose. I chose this picture because I took this picture of a beautiful scenery close to a sea during a trip to the city named Lianyungang in Jiangsu Province. This trip is the first trip after I left Shanghai and finished all the required quarantine. When I finally regain freedom and seeing this fascinating scene, I found my heart eventually got released. 

This is the sketch i drew on paper. 

After sketching the general shape of main content in the picture, I decided to use vertex() to draw the mountains and fill the color of the sea. I also used map() to control where the pointer points at by the mouse, which can avoid the pointer being too long or short. 

Here is the picture I drew on the processing.

When I compare the one I drew on processing and the original picture, I tried to drew clouds by using arc() but I can not make an arc connecting with another very well and I can only draw arc from right to left so it is hard to use several arcs to compose a cloud. However, the overall scenery is drawn quite similar to the original picture.

Here are my codes.

void setup(){
size(800,600);
}
void draw(){
background(200,240,247);
fill(167,66,93);
strokeWeight(5);
beginShape();
vertex(500,50);
vertex(600,50);
vertex(570,100);
vertex(470,100);
vertex(500,50);
endShape();
fill(255);
strokeWeight(5);
rect(470,100,100,60);
fill(220);
strokeWeight(5);
triangle(600,50,570,100,610,90);
fill(220);
strokeWeight(5);
beginShape();
vertex(570,100);
vertex(610,90);
vertex(610,145);
vertex(570,160);
vertex(570,100);
endShape();
fill(240);
strokeWeight(5);
square(470,160,100);
fill(255);
strokeWeight(5);
circle(520,210,80);
fill(0);
strokeWeight(5);
circle(520,210,5);
float a = map(mouseX,0,800,485,555);
float b = map(mouseY,0,600,180,240);
strokeWeight(5);
line(520,210,a,b);
fill(220);
strokeWeight(5);
beginShape();
vertex(570,160);
vertex(610,145);
vertex(610,240);
vertex(570,260);
vertex(570,160);
endShape();
fill(255);
strokeWeight(5);
rect(470,260,100,700);
fill(220);
beginShape();
vertex(570,260);
vertex(610,240);
vertex(610,700);
vertex(570,700);
vertex(570,260);
endShape();
fill(57,188,139);
beginShape();
vertex(800,200);
vertex(350,450);
vertex(450,450);
vertex(180,600);
vertex(800,600);
endShape();
fill(79,208,256);
beginShape();
vertex(0,360);
vertex(470,360);
vertex(470,380);
vertex(350,450);
vertex(450,450);
vertex(180,600);
vertex(0,600);
endShape();
}

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *