jamieh-Project-02-Variable-Face

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 02
*/

 // Simple beginning template for variable face.
 var eyeSize = 20;
 var faceWidth = 100;
 var faceHeight = 150;
 var eyebrowSize = 30;
 var eyebrowThickness = 1.5;
 var noseWidth = 4;
 var noseHeight = 25;
 var neckWidth = faceWidth/4;
 var neckHeight = neckWidth/2;


 width = 640;
 height = 480;

 var shirtW = 150;
 var shirtH = 100;
 var shoulder = 50;
 var buttonSize = 5;
 var handSize = 30;



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

 }

 function draw() {
    noStroke();
    background(229, 242, 255);
    
//Hair (Behind)
    noStroke();
    fill(0, 0, 0);
    rect(width/2-faceWidth/2, height/2, faceWidth*1.08, faceHeight);

//Neck
    noStroke();
    fill(255, 235, 217);
    rect(width/2-neckWidth/2, height/2+faceHeight/2-5, neckWidth, neckHeight*1.25);

//Shirt
    noStroke();
    fill(256, 256, 256);
    rect(width/2-shirtW/2, height/2+faceHeight/2.1+neckHeight, shirtW, shirtH, shoulder, shoulder, 0, 0);

//NeckTriangle
    fill(255, 235, 217);
    triangle(
        width/2-neckWidth/2, height/2+faceHeight/2.1+neckHeight,
        width/2-neckWidth/2+neckWidth, height/2+faceHeight/2.1+neckHeight,
        width/2, height/2+faceHeight/2.1+neckHeight*2.1);

//Face Colour
    fill(255, 242, 230);
    
//Face shape
    ellipseMode(CENTER);
    ellipse(width/2, height/2, faceWidth, faceHeight);
 
//Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(width/2, height/2+height/12, faceWidth/3, faceHeight/8);
    fill(255, 242, 230);
    ellipse(width/2, height/2+height/14, faceWidth/2, faceHeight/8);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(1);
    arc(width/2, height/2+height/12, faceWidth/3, faceHeight/8, 0, PI);


//Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Outer (white)
    noStroke();
    fill(256, 256, 256);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Middle (Light brown)
    fill(153, 90, 0);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);

    //Inner (Dark brown)
    fill(51, 25, 0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);

//Eyebrows
    noFill();
    stroke(0, 0, 0);

    strokeWeight(eyebrowThickness);
    arc(eyeLX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(eyeRX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

//Nose (does not change atm)
	//252, 234, 208 AND 255, 238, 215

    stroke(255, 229, 204);
    strokeWeight(3);
    line(width/2, height/2-noseWidth, width/2+noseWidth, height/2+noseHeight); 
    strokeWeight(1.5);
    line(width/2+noseWidth, height/2+noseHeight, width/2-noseWidth*1.2, height/2+noseHeight*1.2);

    //Nose shadow
    stroke(255, 243, 230);
    strokeWeight(4);
    line(width/2+noseWidth, height/2-noseWidth, width/2+noseWidth*2, height/2+noseHeight); 
    strokeWeight(2);
    line(width/2+noseWidth*2, height/2+noseHeight, width/2, height/2+noseHeight*1.2);

    //Nostril
    strokeWeight(3);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);


//Hair
	noStroke(51, 17, 0);
	strokeWeight(2);  
    
    fill(51, 17, 0);
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);             //Anchor point 1
    bezierVertex( 
                 width/2+faceWidth/8, height/2-faceHeight/3,        //Control point 1
                 width/2+faceWidth, height/2+faceHeight/8,          //Control point 2
                 width/2+faceWidth/3, height/2+faceHeight*1.25);    //Anchor point 2
    bezierVertex(
                 width/2+faceWidth/1.5, height/2+faceHeight,
                 width/2+faceWidth*1.1, height/2-faceHeight/2,
                 width/2-faceWidth/8, height/2-faceHeight/2);
    endShape();
    
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);              //bottom hair top point 
    bezierVertex(
                 width/2-faceWidth/1.25, height/2+faceHeight/8,      //bottom hair control point
                 width/2-faceWidth/6, height/2+faceHeight*1.5,       //bottom hair control point
                 width/2-faceWidth/2, height/2+faceHeight);
    bezierVertex(
                 width/2-faceWidth/3, height/2+faceHeight*0.8,
                 width/2-faceWidth, height/2-faceHeight/3,
                 width/2-faceWidth/8, height/2-faceHeight/2);        //top hair top point
    endShape();


//Shirt Buttons
    noStroke();
    fill(0, 0, 0);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize, buttonSize);

    fill(217, 217, 217);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize*0.75, buttonSize*0.75);

//Table
    fill(102, 51, 0);
    rect(0, height/2+faceHeight/2.1+neckHeight+shirtH, width, height-(height/2+faceHeight/2.1+neckHeight+shirtH));

//Hand
    fill(255, 235, 217);
    ellipse(width/2-shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    ellipse(width/2+shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    //thumb
    ellipse(width/2-shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);
    ellipse(width/2+shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);

}

 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(75, 150);
    faceHeight = random(100, 175);
    eyeSize = random(10, 30);
    eyebrowThickness = random(1, 5);
    eyebrowSize = random(25, 35);
    noseWidth = random(2, 5);
    noseHeight = random(15, 20);
    shirtW = random(100, 300);
    shoulder = random(25, 100);
    buttonSize = random(5, 10);

}

This project is inspired by freshmen 15. Through writing this code, I understand the purpose of using variables and how it makes the code cleaner.