This is week of learning to use p5.js, so far it’s not too bad. In fact I actually enjoy the process. There are some interesting features of this programming language. But we will get to that in a little bit.

Everything was fairly straight forward, starting with the body composed of lines with a

//body

background(0, 100, 66);
strokeWeight(20)
stroke(30, 30, 30)
line(300, 300, 300, 400) //body
line(250, 480, 300, 400) //left leg
line(350, 480, 300, 400) //right leg
line(300, 320, 260, 375) //left arm
line(300, 320, 340, 375) //right arm

The head and nostrils were next, again fairly straight forward code to create these.

// head
fill(100)
strokeWeight(2)
stroke(0, 0, 100)
ellipseMode(CENTER)
ellipse(300, 160, 200, 290)

//nostrils
stroke(255, 255, 255)
strokeWeight(1)
fill(0, 0, 85)
ellipse(298, 180, 5, 7)
ellipse(305, 180, 5, 7)

Now it’s time to for some oddity, remember earlier when I said “there are some interesting features to this programming language?” well take for instance rotate(), this transformation actually rotates the canvas around an object thus making all other objects after that rotate in the same manner. Using translate() in conjunction with rotate() allowed me to  get the eyes angle the way I wanted. Now I’m sure there is a way to do this in a much simpler manner however, this is the way I figured it out with a bit of using the p5.js reference page.  https://p5js.org/reference/

stroke(0)
// left eye
translate(250, 150)
rotate(290)
strokeWeight()
fill(0, 255, 100)
angleMode(DEGREES)
ellipse(0, 0, 30, 45)

// reset canvas
rotate(-290)
translate(-250, -150)
translate(350, 150)

// right eye
fill(0, 255, 100)
rotate(-290)
angleMode(DEGREES)
ellipse(0, 0, 30, 45)

Then I added some weird hairs from the side of the head and called it a day.

noFill()
stroke(255, 0, 0)
bezier(35, -65, 50, -55, 60, -60, 70, –60)
bezier(37, -60, 40, –50, 50, -55, 60, –45)
bezier(40, -55, 41, -55, 40, -50, 50, -35)
bezier(-135, -60, -145, -50, -160, -55, -165, -45)
bezier(-140, -50, -145, -53, -160, -49, -165, -65)
bezier(-135, -65, -135, -70, -160, -75, -165, -69)

Notice that I didn’t reset the canvas so when I added the bezier()  as the hairs the coordinates don’t follow the standard 0,0 being at the upper left had corner of the canvas.

Overall I found this to be a great exercise to learn some of the fundamentals of p5.js. If you want to check out the code you can find it here https://editor.p5js.org/phil-in-a-can/sketches/Q56EDhOAF

-p