sketch

//eye
var eyeSize = 15;
var outerEyeSize=40;


//mouth
var mouthWidth = 50;
var innerMouth = 30;

var mouthCorner3 = 15;
var mouthCorner4 = 20;


//face 
var faceWidth = 100;
var faceHeight = 175;

var faceCorner1 = 20;
var faceCorner2 = 15;
var faceCorner3 = 25;
var faceCorner4 = 40;

//color
var colorR = 50;
var colorG = 50;
var colorB = 50;

var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;

var colorR3 = 200;
var colorG3 = 200;
var colorB3 = 200;


//eyebrow
var brow = 3;
var browAngle = 100;


 


function setup() {
    createCanvas(640, 480);
    textSize(12);
}
 
function draw() {
    background(255);
   
    //body
    strokeWeight(3);
    fill(colorR3,colorG3,colorB3);
    stroke(0);
    rectMode(CENTER);
    rect(150,300,150,200,40,40,0,0);

    //arms
    strokeWeight(3);
    noFill();
    stroke(0);
    line(100,400,110,270);
    line(200,400,190,270);

    //face
    fill(colorR2,colorG2,colorB2);
    stroke(85,242,149);
    rectMode(CENTER);
    rect(150, 150, faceWidth,  faceHeight, faceCorner1, faceCorner2,
        faceCorner3,faceCorner4);

    //mouth
    stroke(132,223,244);
    fill(250,147,247);
    rect(150, 200, mouthWidth, 50,2, 2,mouthCorner3,mouthCorner4);
   
    //left eyebrow
    stroke(0);
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeLX = 150 - faceWidth * 0.25;   
    line(eyeLX - 10, 100,eyeLX + 10,browAngle);

    //right eyebrow
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeRX = 150 + faceWidth * 0.25;
    line(eyeRX - 10, browAngle, eyeRX + 10, 100);

    //eyes
    fill(colorR,colorG,colorB);
    strokeWeight(0);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, eyeSize, eyeSize);
    ellipse(eyeRX, 150, eyeSize, eyeSize);

    //glasses
    noFill();
    stroke(0);
    strokeWeight(1);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, outerEyeSize, outerEyeSize);
    ellipse(eyeRX, 150, outerEyeSize, outerEyeSize);


    //SPEECH bubble
    noStroke();
    fill(colorR,colorG,colorB);
    triangle(230,100,250,100,200,180);
    ellipse(250,100,100,50);

    //text
    fill(255);
    text("wasssup", 280, 145, 100, 100);




}
 
function mousePressed() {
    faceWidth = random(80, 140);
    faceHeight = random(170, 200);
    mouthWidth = random(30, 70);
    innerMouth = random(10, 40);

    //eye
    eyeSize = random(10, 20);
    outerEyeSize = random(30,50);
    
    //face corners
    faceCorner1 = random(0,50);
    faceCorner2 = random(10,50);
    faceCorner3 = random(10,50);
    faceCorner4 = random(10,50);

    //mouth corners
    mouthCorner3 = random(5,30);
    mouthCorner4 = random(5,30);

    //color
    colorR = random(20,100);
    colorG = random(20,100);
    colorB = random(20,100);

    colorR2 = random(150,255);
    colorG2 = random(150,255);
    colorB2 = random(150,255);

    colorR3 = random(50,200);
    colorG3 = random(50,200);
    colorB3 = random(50,200);

    //brow
    brow = random(1,5);
    browAngle = random(95 - 5,105);


}

I thought the most interesting part of this project was how relationships  between objects came into play. What this means is that the designer has to take into account objects moving relative to other objects that are also moving. The most interesting part was also the hardest for me in that I had some trouble staying on top of all the information I was trying to portray. Once I got the main framework down it was really satisfying every additional shape I made.