aboyle-Sect D-Project 2-Variable Face

aboyle Var Face

//Anna Boyle
//aboyle@andrew.cmu.edu
//Section D
//Project 2


//variables
    var eyeWidth =20
    var eyeHeight=20
    var faceWidth=100
    var faceHeight=100
    var pupil=170
    var noseWidth=5
    var noseHeight=130
    var nosePosition=80
    var browthickness=2
    var brow=80
    var hairLength=150
    var mouth;

function setup() {
    createCanvas(480, 640);
}


function draw() {
    background(157,242,171);
    strokeWeight(0);
//hair
    fill(71,44,21);
    ellipse(195,80,faceWidth+20,faceHeight-20);
    rect(115,110,160,hairLength);
    //black rectangle gives hair more depth
    fill(0);
    rect(130,110,130,hairLength);
//shirt
    fill(0,204,204);
    ellipse(195,230,150,50);
    rect(120,230,140,190);
    fill(6,142,142);
    rect(145,270,7,150);
//pants
    fill(19,38,112);
    rect(140,420,120,220);
    fill(0)
    rect(195,450,7,220)
//neck
    fill(142,88,51);
    rect(175,150,40,70);
//button
    fill(114,4,4);
    ellipse(400,330,100);
    fill(255,0,0);
    //gives the effect of button being pushed
    if (mouseIsPressed)
      ellipse(400,330,100);
    else
      ellipse(400,320,100);
//head
    fill(198,147,111);
    ellipse(195, 120,faceWidth,faceHeight);
//hands
    rect(120,420,35,40);
    //slight change makes button movement look more natural
    if (mouseIsPressed)
      rect(385,304,33,38);
    else
      rect(385,304,35,40);
//ears
    strokeWeight(0);
    ellipse(190-faceWidth/2,120,30);
    ellipse(200+faceWidth/2, 120, 30);
//nose
    fill(142,88,51);
    triangle(190,nosePosition,190-noseWidth,noseHeight,190+noseWidth,noseHeight);
//eyes
    strokeWeight(2);
    fill(256);
    ellipse(210,95,eyeWidth,eyeHeight);
    ellipse(170,95,eyeWidth,eyeHeight);
//pupils
    fill(0);
    ellipse(pupil,95, eyeWidth/2, eyeHeight/2);
    ellipse(pupil+40, 95, eyeWidth/2, eyeHeight/2);
//mouth
    noFill()
    //switches the mouth between smile and straight
    if (mouth<=0.5)
      curve(200,50,170,160,215,160,200,50);
    else
      line(170,160,215,160);
//earrings
    fill(236,200,21);
    strokeWeight(0);
    rect(183-faceWidth/2, 127, 10,10);
    rect(197+faceWidth/2,127,10,10);
//eyebrows
    strokeWeight(browthickness);
    line(155, 75, 185, brow);
    line(195,brow,225,75);
//arm
    fill(0,204,204);
    strokeWeight(0);
    rect(300,310,85,30);
    translate(width/5, height/5);
    rotate(PI/3.0);
    rect(165,-100,120,30);
}


function mousePressed(){
  faceWidth=random(130,170);
  faceHeight=random(150,190);
  eyeWidth=random(10,37);
  eyeHeight=random(15,35);
  pupil=random(165,175);
  noseWidth=random(5,10);
  noseHeight=random(130,150);
  nosePosition=random(95,120);
  browthickness=random(2,9);
  brow=random(60,92);
  hairLength=random(75,230);
  mouth=random(0,1)
}

I thought this was a cool assignment! I had a lot of fun playing with the variables, even though I couldn’t add as many details as last time. For some reason when I refresh the page the face looks pretty weird, but once I start clicking the mouse it looks like how I want it to.

I also decided to give my subject apparent agency over her own face changes by making it look like she’s pressing a button. Though rather simple, I hope it’ll help me remember the difference between mousePressed and mouseIsPressed in the future.

In retrospect, I wish I had done more with curves and more complicated shapes, but overall I’m okay with how it turned out.