Project Link
https://editor.p5js.org/YuzhuoSun-Zora/sketches/JC1TYFYSg
Brief Description
In this mini project, I made a self-portrait with p5.js. I drew my outline and a special expression inspired by emoji on paper. I tried to simplify the portrait to geometric figures. Then, I drew it in p5.js.
Demo/Visual Documentation
Coding:
- This is my complete code：
function setup() {
createCanvas(400, 400);
}
function draw() {
//a black background
background(0);
noStroke();
//top of the hair
fill(153, 102, 51);
ellipse(200,150,140,90);
//face:
rectMode(CENTER)
fill(255, 242, 230);
rect(width/2,height/2,100,100);
quad(150,250,185,270,215,270,250,250);
//Side hair：
rectMode(CORNER)
fill(153, 102, 51);
triangle(150,150,200,150,150,220);
triangle(250,150,200,150,250,220);
rect(130,150,20,100);
rect(250,150,20,100);
quad(150,250,130,250,110,280,150,280);
quad(250,250,270,250,290,280,250,280);
//eyes:
stroke(0);
fill(255);
circle(175,200,20);
ellipse(225,198,20,26);
fill(0);
circle(178,200,10);
ellipse(227,198,8,18);
//eyebrow
strokeWeight(4);
line(190,190,170,180);
line(160,180,170,180);
line(210,180,240,170);
//mouth:
fill(255);
rect(175,235,50,10);
line(200,235,200,245);
line(188,235,188,245);
line(212,235,212,245);
line(195,215,195,220);
}
- The problem I met:
I mixed up the operating principle of the p5.js. When I wanted to draw my hair in brown to separate it from my face draft. But I only add the “fill()” function between the ellipse for hair. The result was that all the shapes became brown. I asked Jason to check my code and got the important point that if I want to color my canvas, I need to declare the color before each section, even if the section is white. The outcome is this part of the code.
//face:
rectMode(CENTER)
fill(255, 242, 230);
rect(width/2,height/2,100,100);
quad(150,250,185,270,215,270,250,250);
//Side hair：
rectMode(CORNER)
fill(153, 102, 51);
triangle(150,150,200,150,150,220);
triangle(250,150,200,150,250,220);
rect(130,150,20,100);
rect(250,150,20,100);
quad(150,250,130,250,110,280,150,280);
quad(250,250,270,250,290,280,250,280);
Reflection/Lessons Learned
- Simplify and split graphs in coding
When I drew the portrait on paper, I could use curves and irregular ellipses to portray the accurate shape and details of my face. However, after starting with code, I found it hard to achieve that assumption. So, I have to simplify the hand draft by polygon, which means I have to the graphics that best represent my salient features. Besides, when the graphics I need to build are too complex, dividing them into single triangles, rectangles, or ellipses to combine or block each other can be the best way to avoid interminable code.
- Use immediate feedback to improve my code
It was hard to predict how a value written in code would translate to a position on the canvas. I had to calculate again and again to make the shapes appear in the desired position. I tried to select the “Aoto-refresh” box, although it isn’t recommended when writing complex programs. In that way, I could directly know what would happen after I changed some values, which saved a lot of time from adjustment.
- Conclusion
This experience trains me to switch my mind from human behaviors (like drawing) to computer programs (coding). Like the professor said the the class, sometimes, the computer doesn’t run in the way we thought. Therefore, we need to learn how the computer operates and works by trial and error, and then manipulate it to do what we want it to do.