Link: https://editor.p5js.org/peterzhn/sketches/mcOafftPW
I decided to stick to the commands we discussed in class and the ones covered in the tutorial videos. I found that it was kind of frustrating when you’re typing out a line of code and you haven’t inputted all the values with the closing bracket, the preview will disappear and the program thinks it’s an error. I wish the registration of the writing happens after I hit enter on each line. Another thing I found kind of difficult to navigate was the initial placement of the shapes. I found myself having to think about how big the canvas is and where the object I want to place is in relation to that. But perhaps that is something I will become more aware of as time goes on and it becomes second nature.
I attempted to use the arc function since I wanted to play with creating my mouth with it. But I simply copied the code from the reference page and modified the existing values slightly. It is definitely a more challenging to use effectively. Overall, I liked how responsive the p5 editor was and how I can see the design change as I am typing out the codes. The code clean-up command is also very useful since I am someone that likes to work fast and get the gist of the task down but also appreciate a neat and clean file to look at.
function setup() {
createCanvas(400, 400);
background(150);
//skin color and neck
fill(250, 220, 200);
noStroke();
rect(175, 250, 50, 100);
//head
stroke(0);
ellipse(200, 200, 150, 180);
//upper body and hair
fill(0);
triangle(350, 300, 50, 300, 200, 500);
triangle(180, 120, 160, 80, 150, 130);
triangle(180, 120, 190, 80, 200, 120);
triangle(200, 120, 220, 80, 230, 120);
//eyes
ellipse(170, 170, 20, 20);
ellipse(230, 170, 20, 20);
//glasses, nose and mouth
noFill();
strokeWeight(2);
rect(150, 160, 40, 30);
rect(210, 160, 40, 30);
arc(200, 250, 60, 20, QUARTER_PI, PI);
line(190,180,210,180)
line(200,200,220,230)
line(220,230,200,230)
}