Claire Yoon-Project-02-Variable-Face

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Assignment-02
  */
  // variables for face.
    var eyeSize = 35;
    var pupilSize = 25;
    var faceWidth = 110;
    var faceHeight = 110;
    var facecolorR = 255
    var facecolorG= 204;
    var facecolorB= 77;
    var brow = 185;
    var mouthx= 60
    var mouthy= 40

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

  function draw() {
    background(249);
    noStroke (0)
    //face
    fill(250, facecolorG, facecolorB)
    ellipse(width / 2, height / 2, faceWidth*2,  faceHeight*2);

    //outer eye
    fill("white")
    var eyeLX = width / 2 - faceWidth * 0.40;
    var eyeRX = width / 2 + faceWidth * 0.40;
    ellipse(eyeLX, height / 2.05, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.05, eyeSize, eyeSize);

    //pupil
    fill(103, 70, 0)
    var pupilLX = width / 2 - faceWidth * 0.40;
    var pupilRX = width / 2 + faceWidth * 0.40;
    ellipse(pupilLX, height / 2.05, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2.05, pupilSize, pupilSize);

    //blush
    fill(238, 134, 154)
    var eyeLX = width / 2 - faceWidth*0.7;
    var eyeRX = width / 2 + faceWidth*0.7;
    ellipse(eyeLX, height / 1.8, eyeSize, eyeSize);
    ellipse(eyeRX, height / 1.8, eyeSize, eyeSize);

    //eyebrow
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(250, 200);
    curveVertex(250, 200);
    curveVertex(270, brow);
    curveVertex(300, brow);
    curveVertex(300, brow);
    endShape();

    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(340, brow);
    curveVertex(340, brow);
    curveVertex(370, brow);
    curveVertex(390, 200);
    curveVertex(390, 200);
    endShape();

    //mouth
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    arc(width / 2, height / 1.8, mouthx, mouthy, TWO_PI, PI);
  }

  function mousePressed() {
      // when the user clicks, these variables are reassigned
      // to random values within specified ranges. For example,
      // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(100, 130);
    faceHeight = random(100, 130);
    facecolorG = random(76, 250);
    facecolorB = random(36, 120);
    eyeSize = random(0,50)
    pupilSize = random(20, 30);
    brow = random(180,200)
    mouthx = random(40,80)
    mouthy= random(30,70)
  }

I gained inspiration from the emoji and set some values for things such as the eyebrows, eyes and the color of the face to show the difference in emotions when clicking on it.

Leave a Reply