Recitation 5: Processing Basics

Image I chose:

Why I chose it

There was a Halloween event the day we had our recitation class. I was thinking to draw a halloween related image, however when I scrolled through my phone, I did not found any picture I took that was scary or horrific. So, I decided to draw the image I took from one of my favorite event, IMA Afternoon Tea! It was a picture of the chocolate cookie and oat latte I had at the IMA Afternoon Tea event beside studio 826. I really enjoy the food and good vibes that day!

How I wanted to draw it in Processing

Corresponding to the picture, I drew a sketch on the paper that includes the table, chocolate cookie, and a cup of latte just like how it is in the picture. But, I did not include the details of the background and the arts printed on the paper cup because it will make my drawing way more complicated and challenging. I wanted to draw the sketch in the processing using ellipse(), triangle(), beginShape(), vertex(), fill(), and background() functions. 

I relied on the graph drawn on my paper sketch for the placement of each shape I was planning to include. First, I set canvas size to 600×700, then I used the background() function to set the color of the background, and I used the ellipse() function to draw the table, cookie, the upper and bottom parts of the cup. The remaining components of the sketch are drawn using beginShape(). After drawing all the major shapes of the image, I filled in the color under the support of color selector tool, and I wrote the title of my sketch using the textsize() and text() functions. 

 

My Final Sketch

My final creation is a simple cartoon version of the photograph, it includes everything I drew in the paper sketch and it does not include the background details in the photograph. Apart from this, the colors of my final creation is different from the actual picture since it is hard for me to select the same color as the picture just by looking at it, and I wanted to use colors that can make my final sketch simple and pretty. I think that drawing in Processing was a good means of realizing my design, although it may take time to adjust the placement and size of the shapes. I believe that Processing will be a really helpful tool for me in the future to draw my ideas and designs, because it doesn’t requires me to have a great drawing skill, all I have do is to learn how to code it beautifully. 

My Code:

void setup() {
background(#fee5aa);
size(600, 700);
fill(#4c3228);
textSize(30);
text("IMA Afternoon Tea...", 50, 50);
}

void draw(){

//table 
fill(#fef4da);
ellipse(500, 500, 1000, 600);

//plastic bag of the cookie
fill(#DBD8D0);
beginShape();
vertex(110, 460);
vertex(120, 665);
vertex(400, 660);
vertex(340, 450);
endShape();

//Cookie
fill(#4c3228);
ellipse(240, 560, 245, 190);

//cup button
fill(240);
ellipse( 395, 450, 110, 60);

// body part of the cup
fill(240);
beginShape();
vertex(299, 280);
vertex(480, 280);
noStroke();
vertex(450, 450);
vertex(340, 450);
endShape(CLOSE);

//Upper inner of the cup
fill(#C9C9C1);
ellipse(390,280, 180, 60);
fill(#F5BE83);
ellipse(390,280, 169, 50);

//chocolate chips
fill(#2C240F);
beginShape();
vertex(180, 500);
vertex(195, 520);
vertex(175, 520);
endShape();

beginShape();
vertex(260, 600);
vertex(290, 600);
vertex(275, 620);
endShape();

beginShape();
vertex(320, 550);
vertex(335, 570);
vertex(305, 566);
endShape();

beginShape();
vertex(170, 550);
vertex(195, 545);
vertex(185, 572);
endShape();

beginShape();
vertex(270, 520);
vertex(292, 510);
vertex(280, 530);
endShape();

}

Leave a Reply

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