catherineFace
// Catherine Coyle =)
// Section C
// ccoyle@andrew.cmu.edu
// Project 01 - self portrait!
function setup() {
createCanvas(500,500);
}
function draw() {
background(152, 157, 224);
stroke(0);
strokeWeight(0);
// face
fill(255, 215, 191);
rect(150,100,200,200);
quad(150,300,200,350,300,350,350,300);
fill(255, 173, 170);
ellipse(180,245,40,40);
ellipse(320,245,40,40);
// eyes and eyelashes
fill(255, 250, 247);
triangle(180,200,200,180,220,200);
triangle(280,200,300,180,320,200);
fill(153, 86, 59);
triangle(180,200,186,200,183,205);
triangle(186,200,192,200,189,205);
triangle(320,200,314,200,317,205);
triangle(314,200,308,200,311,205);
// nose
fill(237, 186, 161);
triangle(250,200,220,250,280,250);
fill(237, 173, 154);
quad(220,250,240,260,260,260,280,250)
fill(247, 214, 197);
ellipse(250,245,35,10);
fill(99, 89, 84);
ellipse(240,255,10,10);
ellipse(260,255,10,10);
// mouth
fill(0);
rect(200,290,100,30);
fill(255);
quad(200,290,300,320,200,320,300,290);
rect(208,292,84,26);
fill(255, 173, 170);
quad(200,320,220,330,280,330,300,320);
fill(252, 155, 151);
triangle(200,290,250,290,240,280);
triangle(300,290,250,290,260,280);
// hair and eyebrows
fill(153, 86, 59);
rect(180,160,40,12);
rect(280,160,40,12)
triangle(180,160,180,172,160,172);
triangle(320,160,320,172,340,172);
fill(119, 60, 35);
triangle(220,100,350,100,350,200);
triangle(150,100,220,100,150,200);
triangle(350,100,350,350,425,350);
triangle(150,100,150,350,75,350);
quad(150,100,200,50,300,50,350,100)
// other details (neck, shirt, tips of hair, etc)
fill(237, 173, 154);
rect(200,350,100,50);
fill(244, 96, 85);
rect(150,400,200,100);
triangle(150,400,150,500,100,500);
triangle(350,400,350,500,400,500);
fill(255, 215, 191);
rect(200,370,100,30);
quad(200,400,225,425,275,425,300,400);
fill(99, 36, 24);
triangle(150,300,150,350,200,350);
triangle(300,350,350,300,350,350)
// freckles
fill(142, 99, 71);
ellipse(200,245,5,5);
ellipse(180,225,5,5);
ellipse(160,245,5,5);
ellipse(280,270,5,5);
// eyeballs MOVEMENT!!!
fill(0);
eyeX=250;
eyeY=193;
yMovement=mouseY;
xMovement=mouseX;
if (mouseX < 190) {
eyeX =190
}
else if (mouseX > 320){
eyeX = 205
}
else {
eyeX=175 + xMovement/10;
}
if (mouseY<193){
eyeY=eyeY-(190-yMovement)
}
ellipse(eyeX,(eyeY/30)+187,15,15);
ellipse(eyeX+100,(eyeY/30)+187,15,15);
// covering up the edges of the eyes
fill(255, 215, 191);
triangle(180,200,200,180,180,180);
triangle(200,180,220,200,220,180);
triangle(280,200,300,180,280,180);
triangle(300,180,320,200,320,180)
}
This was so fun to make! I always like really block-y, geometric art styles, but I’ve never really tried to make anything in that way before so I thought this was a good chance to try it out! I drew a sketch on paper of how I generally wanted it to look and then got to experimenting in p5. I really wanted to get the eyes to follow your mouse around just to see if I could figure it out, and it was a challenge but I think it worked out okay. Overall this is not the cutest picture I’ve ever made, but I’m happy with it!