Catherine Coyle – Project 01 – Face

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!