Category: Project-02-Variable-Face

Project 02: Variable Faces, Faces Vara

//Alexia Forsyth
// Section A

//base colors
var r = 255;
var g = 231;
var b = 125;

//
faceWidth = 180;
faceHeight = 250;
hairWidth = 300;
hairHeight = 320;
lipWidth = 55;
lipHeight = 35;
eyebrowWidth = 40;
eyebrowHeight = 5;

function setup() {
createCanvas(640, 480);
text(“p5.js vers 0.9.0 test.”, 10, 15);
}

function draw() {
//face #1
background(r ,g, b);
strokeWeight(1);
//hair
fill(r-255,g-231,b-125);
ellipse(width/2, 260, hairWidth, hairHeight);

    //neck
    fill(r-156, g-156, b-112);
    rect(205,400, 220,90);
    rect(290, 320, 60, 100);

    //face
    ellipse(width/2, height/2, faceWidth, faceHeight);
    circle(420,240,1);

    //nose
    ellipse(310, 290, 20,11);
    ellipse(330, 290, 20,11);
    rect(width/2-7,height/2-15,15,65);
    fill(0);
    ellipse(310,290,11,4);
    fill(0);
    ellipse(330,290,11,4);

    //ears
    fill(r-156, g-156, b-112);
    ellipse(410,230,30,45);
    fill(r, g+24, b+130);
    circle(410,250, 10,10); //earrings 

    fill(r-156, g-156, b-112);
    ellipse(225,230,30,45);
    fill(r, g+24, b+130);
    circle(225,250, 10,10); //earrings

    //eyes
    fill(255);
    ellipse(width/2 +40 ,215,faceWidth*.222,faceHeight*.12);
    fill(r-207, g-132, b-112);
    circle(width/2 +40,215,faceWidth*.139);
    fill(0);
    circle(width/2 +40,215,faceWidth*.1);
    stroke(0);

    fill(255);
    ellipse(width/2 -40,215,faceWidth*.222,faceHeight*.12);
    fill(r-207, g-132, b-112);
    circle(width/2 -40,215,faceWidth*.139);
    fill(0);
    circle(width/2 -40,215,faceWidth*.1);
    stroke(0);


    //eyebrows
    fill(r-255,g-231,b-125);
    rect(width/2 +20,190,eyebrowWidth,eyebrowHeight);
    rect(width/2 -60,190,eyebrowWidth,eyebrowHeight);

    //freckles
    circle(335,250,2);
    circle(380,250,2);
    circle(320,240,2);
    circle(360,245,2);
    circle(280,240,2);
    circle(310,230,2);
    circle(290,250,2);
    circle(270,250,2);
    circle(340,230,2);

    //lips
    fill(r-209, g-199, b-109);
    ellipse(width/2,320,lipWidth,lipHeight);
    strokeWeight(5);
    line(width/2 -(lipWidth-25), 320, width/2 + (lipWidth - 25), 320);

}

function mousePressed(){
faceWidth = random(100,250);
faceHeight = random(200,290);
hairWidth = faceWidth + 120;
hairHeight = faceHeight + 70;
lipWidth = random(30,70);
lipHeight = random(20,50);
eyebrowWidth = random(35,45);
eyebrowHeight = random(.5, 10);
r = random(150,400);
g = random(150,400);
b = random(100,400);
}

Project 2: Generative Faces

Some faces, generated!

sketch 

var eyeType = 3
var faceWidth = 200
var faceHeight = 275
var eyeSize = 60
var earSize = 60
var pupilSize = 40
var noseType = 1
var mouthType = 1
var blush = 1
var r = 89
var g = 74
var b = 58 //color 1, 2, & 3 used to be able to randomize the color of hair

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(252, 215, 91);
    strokeWeight(0);

    fill(r, g, b); //random hair color
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth+20, faceWidth+20); //hair
    rect((width/2)-(faceWidth/2), height/2, faceWidth, faceHeight*(2/3)); //hair

    fill(194, 160, 97); //face/head
    ellipse(width/2, height/2, faceWidth, faceHeight); //chin
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth, faceWidth); //to round out the top of the head better, less oval-y
    ellipse((width/2)-(faceWidth/2), height/2, earSize*(3/4), earSize); //left ear, size randomly generated
    ellipse((width/2)+(faceWidth/2), height/2, earSize*(3/4), earSize); //right ear, size ranomly generated

    fill(r, g, b); //random hair color for eyebrow
    ellipse((width/2)+(faceWidth/4), height/2-50, 40, 20);
    ellipse((width/2)-(faceWidth/4), height/2-50, 40, 20);

    if(blush <= 1) { //section to create blush possibility
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+40, 40, 20);
    ellipse((width/2)+(faceWidth/4), (height/2)+40, 40, 20);

    if(mouthType <= 1) { //section to create mouth type 1 (open)
        fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 30);
    if(mouthType <= 1) {
        fill(252, 251, 247, 255)
    } else {
    	fill(252, 251, 247, 0)
    }   
    ellipse(width/2, (height/2)+(faceHeight/3)-10, 40, 10);

    if(mouthType > 1 & mouthType < 2) { //section to create mouth type 2 (sad mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)+7, 60, 40); //skin to carve out shape
     if(mouthType > 1 & mouthType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 40);

    if(mouthType >= 2) { //section to create mouth type 3 (happy mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)-20, 60, 40); //skin to carve out shape
     if(mouthType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3)-27, 60, 40);

    if(eyeType <= 1) { //section to create eye type 1 (open regular)
        fill(242, 246, 247, 255)
    } else {
    	fill(242, 246, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, eyeSize, eyeSize);
    ellipse((width/2)+(faceWidth/4), height/2, eyeSize, eyeSize);
    if(eyeType <= 1) {
        fill(0, 0, 0, 255)
    } else {
    	fill(0, 0, 0, 0)
    }   
    ellipse((width/2)-(faceWidth/4)+1, height/2, pupilSize, pupilSize);
    ellipse((width/2)+(faceWidth/4)-1, height/2, pupilSize, pupilSize);

    if(eyeType > 1 & eyeType < 2) { //section to create eye type 2 (happy eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(252, 251, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
     if(eyeType > 1 & eyeType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)+7, 60, 40);

    if(eyeType >= 2) { //section to create eye type 3 (sad eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
    if(eyeType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)-7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)-7, 60, 40);

    if(noseType <= 1) { //section to create round nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse(width/2, (height/2)+20, 20, 60);

    if(noseType > 1) { //section to create triangle nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    triangle(width/2, (height/2), (width/2)-10, (height/2)+50, (width/2)+10, (height/2)+50);

}
 
function mousePressed() {
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    eyeType = random(0, 3); //eye type will be randomized, 1-3, and said # will correlate to an if else tree w eye options
    faceWidth = random(150, 225);
    faceHeight = random(226, 300);
    earSize = random(60, 80);
    pupilSize = random(30, 40);
    eyeSize = random(50, 70);
    noseType = random(0, 2); //nose type randomized based on two types
    mouthType = random(0,3);
    blush = random(0, 2); //whether or not blushing
}