sketch

var faceSize = 210;
var eyeType = 2;
var noseShape = 1;
var earShape = 1;
var mouthType = 1;
var colorG = 103;
var colorB = 135
 
function setup() {
    createCanvas(480, 640);
    
}
 
function draw() {
    background(189, 200, 234);
    //head
    fill(255, colorG-30, colorB-40);
    ellipse(width / 2, height / 2, faceSize, faceSize);
    fill(245, 155, colorG, 80);
    arc(width / 2, height / 2, faceSize, faceSize, PI, TWO_PI);
  
    //eyes
    if (eyeType == 1){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 10, 10);
        ellipse(eyeRX, height/2, 10, 10);
        fill(255, 255, 255);
        ellipse(eyeLX + 3, height/2 - 1, 3, 3); 
        ellipse(eyeRX + 3, height/2 - 1, 3, 3); 
    } else if (eyeType == 2){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        rect(eyeLX, height/2, 12, 10);
        rect(eyeRX, height/2, 12, 10);
        strokeWeight(2);
        stroke(0);
        fill(0);
        line(eyeLX+1, height/2, eyeLX, height/2-3);
        line(eyeLX+4, height/2, eyeLX+3, height/2-3);
        line(eyeRX+1, height/2, eyeRX, height/2-3);
        line(eyeRX+4, height/2, eyeRX+3, height/2-3);

    } else if (eyeType == 3){
        fill(0);
        stroke(255, 255, 255);
        strokeWeight(2);
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 20, 20);
        ellipse(eyeRX, height/2, 20, 20);
    }


    //nose
    if (noseShape == 1){
        fill(230, 223, 255);
        noStroke();
        ellipse(width / 2, height / 2 + 3, 20, 15);
    } else if (noseShape == 2){
        fill(255, 255, 184);
        noStroke();
        triangle(width / 2 - 10, height / 2 + 3, width / 2 + 10, height / 2 + 3, width / 2, height / 2 + 13);
    }
    
    //ears
    if (earShape == 1){
        strokeWeight(7);
        stroke(155, 245, 204);
        fill(155, 255, 234);
        line(240, 250, 240, 190);
        ellipse(width/2+50, 205, faceSize/2.5, faceSize/5);

    } else if (earShape == 2){
        stroke(255, colorG, colorB);
        strokeWeight(20);
        fill(250, colorG-20, colorB-10);
        ellipse(190, 205, faceSize/5, faceSize/1.7);
        ellipse(290, 205, faceSize/5, faceSize/1.7);
    }
    

    //mouth
    if (mouthType == 1){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2 - 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
        arc(width/2 + 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
    } else if (mouthType == 2){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2, height/1.9, faceSize/12, faceSize/12, TWO_PI, PI);
    }
    

    //cheeks
    fill(245, 245, 245);
    noStroke();
    ellipse(300, 345, faceSize / 42, faceSize / 42);
    ellipse(290, 355, faceSize / 42, faceSize / 42);
    ellipse(280, 345, faceSize / 42, faceSize / 42);
    ellipse(185, 345, faceSize / 42, faceSize / 42);
    ellipse(175, 355, faceSize / 42, faceSize / 42);
    ellipse(170, 345, faceSize / 42, faceSize / 42);

}
 
function mousePressed() {
    faceSize = random(160, 240);
    eyeType = int(random(1, 4));
    colorG = random(150, 245);
    colorB = random(150, 225);
    noseShape = int(random(1,3));
    earShape = int(random(1,3));
    mouthType = int(random(1,3));
}

I found this a lot more challenging than the last project, but I really enjoyed the process and I think I improved a lot through this assignment. The hardest part for me was the ears, and I decided to make it into a little stem so the face can into an apple/orange and a bunny which worked out well. I tried to incorporate curve vertex into this but unfortunately it didn’t work out, hopefully I will have a better grasp next week.

Variable Face

sketch

/*Sean McGadden
Section C @ 1:30
smcgadde@andrew.cmu.edu
project - 02 */

//Variable Face

//Simple
var width = 640
var height = 480

//Face
var faceWidth = 200;
var faceHeight = 300;
var faceR = 65
var faceG = 82
var faceB = 244 

//Eyes
var eyeSize = 20;
var eyeR = 244
var eyeG = 211
var eyeB = 65

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

function draw() {
    background(66, 244, 143);
    
    //Face
    fill(faceR, faceG, faceB)
    rect(width / 3, height / 3, faceWidth,            faceHeight);
    
    //Eyes
    fill (eyeR, eyeG, eyeB)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    
    //clicking changes position, color and size of face and eyes. 
    faceWidth = random(150, 300);
    faceHeight = random(200, 300);
    width = random (500, 640)
    height = random (400, 480)
    eyeSize = random(10, 40);
    eyeR = random(148, 244)
    eyeG = random(65, 211)
    eyeB = random(65, 244)
    faceR = random(62, 65)
    faceG = random(65, 82)
    faceB = random(91, 244)
}

The variable face was very interesting to play around with. Although I took few risks in my sketch I feel I learned a lot more about variables and their implementation. I want to make more intricate interactive pieces in future projects. My project makes computational changes in color, size and position of the face and eyes. Using RGB and canvas coordinate randomization with a few variables, I was able to explore further how faces can be differently perceived even with only small changes.

Here is an original concept sketch that I was unsuccessful in replicating after some attempts.

September 7 2018