Category: Project-02-Variable-Face

Project 2

this is my second portrait.

sketch

var eyeSizeX = 14;
var eyeSizeY = 20; 
var faceWidth = 100;
var faceHeight = 150;
var hairR = 80;
var hairG = 60;
var hairB = 50;
var mouth = 4;
var hairSizeX = 160;
var hairSizeY = 150;

 function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    angleMode(DEGREES);
    //hair    
    background(180);
    strokeWeight(0);
    fill(hairR, hairG, hairB);
    ellipse(width/2, height/2-45, hairSizeX, hairSizeY);
    
    //face size
    fill(240, 221, 210);
    ellipse(width/2, height / 2, faceWidth,  faceHeight);

    //eyes
    strokeWeight(0);
    var eyeLX = width/2 - faceWidth * 0.2;
    var eyeRX = width/2 + faceWidth * 0.2;
    fill(0);
    ellipse(eyeLX, height/2, eyeSizeX, eyeSizeY);
    ellipse(eyeRX, height/2, eyeSizeX, eyeSizeY);
    fill(255, 255, 255, 170);
    ellipse(eyeLX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    ellipse(eyeRX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    
    
    //eyebrow 
    var BrowLX1 = width/2 - faceWidth*0.15;
    var BrowLY1 = height/2 - faceHeight*0.15;
    var BrowLX2 = width/2 - faceWidth*0.35;
    var BrowLY2 = height/2 - faceHeight*0.15;
    var BrowRX1 = width/2 + faceWidth*0.15;
    var BrowRY1 = height/2 - faceHeight*0.15;
    var BrowRX2 = width/2 + faceWidth*0.35;
    var BrowRY2 = height/2 - faceHeight*0.15;
    stroke(0);
    strokeWeight(3);

    line(BrowLX1, BrowLY1, BrowLX2, BrowLY2);
    line(BrowRX1, BrowRY2, BrowRX2, BrowRY2);
   
    //mouth
    var mouthLX = width/2 - faceWidth*0.2;
    var mouthLY = height/2 + faceHeight*0.2;
    var mouthRX = width/2 + faceWidth*0.2;
    var mouthRY = height/2 + faceHeight*0.2;

    if (mouth <= 1) {
        //happy
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex(mouthRX, mouthRY);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        endShape();
    } else if (mouth > 1 & mouth <=2) {
        //sad
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex(mouthRX, mouthRY+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        endShape();
    } else if (mouth > 2 & mouth <=3) {
        //shock
        fill(20);
        strokeWeight(3);
        ellipse((mouthLX+mouthRX)/2, mouthLY+10, 10, 20);
    } else if (mouth > 3 & mouth <= 4){
        strokeWeight(4);
        line(mouthLX, mouthLY+10, mouthRX, mouthRY+10);
    }
}


function mousePressed() {
    faceWidth = random(75, 120);
    faceHeight = random(90, 140);
    eyeSizeX = random(15, 20);
    eyeSizeY = random(15,25);
    hairR = random(80, 255);
    hairB = random(100, 200);
    hairSizeX = random(130, 190);
    hairSizeY = random(130, 160);
    mouth = random(0, 4);
}

Project 02

Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors/Scale, Click and Hold on Face = ???

sketch
//Brody Ploeger
//Section C


var faceWidth = 175;
var faceHeight = 200;
var backcolor1 = 2;
var backcolor2 = 10;
var backcolor3 = 20;
var backrectcolor1 = 215;
var backrectcolor2 = 210;
var backrectcolor3 = 240;
var backrectcolor2 = 200
var circlecolor1 = 110;
var circlecolor2 = 150;
var circlecolor3 = 190;
var shirtcolor1 = 250;
var shirtcolor2 = 200;
var shirtcolor3 = 215;



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

function draw() {
    background(backcolor1, backcolor2, backcolor3)

    strokeWeight()

    //background rect
    fill(backrectcolor1, backrectcolor2, backrectcolor3, 75)
    rect(640/2,0,640/2,480)

    
    //shirt
    fill(shirtcolor1,shirtcolor2,shirtcolor3);
    circle(640/2, 480/2+faceHeight, faceHeight*1.5)
   

    //right side of face
    fill(circlecolor1, circlecolor2, circlecolor3)
    ellipse(640/2, 480/2, faceWidth, faceHeight)
    
    //left side of face
    fill(200, 75)
    beginShape();
    vertex(640/2-faceWidth/2, 480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/10);
    vertex(640/2-faceWidth/10,480/2+faceHeight/6);
    vertex(640/2,480/2+faceHeight/2);
    vertex(640/2-faceWidth/2,480/2+faceHeight/2);
    endShape();

    //right eye
    fill(backcolor1, backcolor2, backcolor3);
    rect(640/2+faceWidth/8,480/2-faceHeight/10, faceWidth/5, faceHeight/5);

    //right pupil
    fill(backrectcolor1, backrectcolor2, backrectcolor3)
    ellipse(640/2+faceWidth/4.5,480/2, faceWidth/10, faceHeight/10)

    //left eye
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    ellipse(640/2-faceWidth/4,480/2, faceWidth/4, faceHeight/4);

    //left pupil
    stroke(backcolor1, backcolor2, backcolor3) ;  
    strokeWeight(faceWidth/40+faceHeight/40);
    line(640/2-faceWidth/3.25, 480/2, 640/2-faceWidth/5, 480/2);

if (mouseX<640/4){

    //straight mouth
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/5, 480/2+faceHeight/3.5, 640/2+faceWidth/5, 480/2+faceHeight/3.5);  

    //left straight eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //right straight eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/5);
} else if(mouseX>640*3/4){
    
    //mouth smile
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    strokeWeight(faceWidth/50+faceHeight/50);
    arc(640/2, 480/2+faceHeight/4, faceWidth/2, faceHeight/4,0,PI,PIE);
    
 // left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/4);

    //right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/4);
}

    if(mouseIsPressed){
    if (dist(mouseX, mouseY, 640/2,480/2)<faceHeight/3+faceWidth/5){
   
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);
    


    strokeWeight(faceWidth/50+faceHeight/50)
    noFill();
    beginShape();
    vertex(640/2-faceWidth/5, 480/2+faceHeight/4);
    vertex(640/2-faceWidth/5.5, 480/2+faceHeight/3.5)
    vertex(640/2-faceWidth/10, 480/2+faceHeight/4)
    vertex(640/2-faceWidth/15, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/15, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/10, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/5.5, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/5, 480/2+faceHeight/3.5);
    endShape();

    // other left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/4, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //other right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/4, 640/2+faceWidth/7, 480/2-faceHeight/5);

    faceWidth += 10;
    faceHeight += 10;

}
}

print(faceHeight)


}


function mousePressed() {

//if circle clicked, shape of head changes
if (dist(mouseX, mouseY, 640/2, 480/2+faceHeight)<faceHeight/2+faceWidth/2){
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);

 
}
 
}

Project 2: My (Variable) Self Portrait

I took my original self portrait and modified it to be variable, as that’s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You may also notice some weird little ditties in the code, as well as the fact that the eyes follow your mouse. Those are the animations I thought we were supposed to do (again, my bad for misinterpreting!) that are now just fun little easter eggs to play with!

sketch
let leftbrowx = 210; //x coordinate of the original vertex of the left brow
let browY = 185; //y coordinate of both brows
let rightbrowx = 273; //x coordinate of the original vertex of the right brow
haircenterX = 225; //x coordinate of the point around which hair rotates and from which it originates
haircenterY = 170; //y coordinate of the point around which hair rotates and from which it originates

let lefteyex = 262; //x coordinate of the center of the left eye
let righteyex = lefteyex-40; //x coordinate of the center of the right eye
let eyey = 198; //y coordinate of the center of both eyes
let mouthY = 225; //y coordinate of the vertices of the mouth
let eyeRed = 33; //Red tint of the iris
let eyeGreen = 6; //Green tint of the iris
let eyeBlue = 4; //Blue tint of the iris
let hairRed = 40; //Red tint of the hair
let hairBlue = 26; //Green tint of the hair
let hairGreen = 34; //Blue tint of the hair
let skinRed = 255; //Red tint of the skin
let skinGreen = 233; //Green tint of the skin
let skinBlue = 199; //Blue tint of the skin
let hairLen = 50; //Length of hair in the back of the head
performingAnim = false; //determines whether or not an animation is occurring, and retains the face until the animation has stopped and the face returns to default (not default color, as in expression)


function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    background(255,138,120);

    //behind head hair
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(haircenterX,haircenterY);
    curveVertex(haircenterX,haircenterY);
    curveVertex(haircenterX-20,haircenterY+hairLen/2)
    vertex(haircenterX-10-10,haircenterY+40+(hairLen-30));
    vertex(haircenterX-5-10,haircenterY+53+(hairLen-30));
    vertex(haircenterX+1+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+4+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+45+15,haircenterY+62+(hairLen-20));
    vertex(haircenterX+55+15,haircenterY+55+(hairLen-20));
    vertex(haircenterX+63+15,haircenterY+50+(hairLen-20));
    vertex(haircenterX+45+35.5,haircenterY+40+(hairLen-20));
    curveVertex(haircenterX+75,haircenterY+hairLen/2);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+20,haircenterY-10);
    endShape();
    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-10,haircenterY+40+(hairLen-30),30,hairLen,8.5,4.5); //15
    arc(haircenterX+63,haircenterY+50+(hairLen-30),40,hairLen+10,6,8,OPEN); //20
    arc(haircenterX+45,haircenterY+40+(hairLen-30),75,hairLen+10,5.7,6.6,OPEN); //37.5
    arc(haircenterX+55,haircenterY+55+(hairLen-30),40,hairLen+10,6.1,8,OPEN); //20
    arc(haircenterX+45,haircenterY+62+(hairLen-30),40,hairLen+10,6.2,8,OPEN); //20
    arc(haircenterX-5,haircenterY+53+(hairLen-30),30,hairLen,7.6,3.7); //15
    arc(haircenterX+1,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    arc(haircenterX+4,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    push();
    rotate(0.1);
    arc(haircenterX+40,haircenterY+40+(hairLen-30),30,hairLen,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(skinRed,skinGreen,skinBlue);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);
    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);

    //neck
    noStroke();
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(skinRed,skinGreen,skinBlue);

    //clothes (it's just a blanket)
    fill(222, 0, 111);
    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);
    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);
    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(250,253);
    curveVertex(260,249);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    stroke(0);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();

    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);

    //left eye (of body)
    noStroke();
    fill(255);
    ellipse(lefteyex,eyey+1,20,16);
    fill(240);
    arc(lefteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseY > 208) {
        irisY = eyey+2;
    } else{
        irisY = eyey;
    }
    if (mouseX > 255 & mouseX < 267) {
        leftposX = mouseX
    }
    if (mouseX > 267){
        leftposX = lefteyex+5
    }
    if (mouseX < 255) {
        leftposX = lefteyex-5
    }
    ellipse(leftposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(leftposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(leftposX,irisY,5,8); //pupil
    fill(255);
    ellipse(leftposX-2,irisY-2,3,6); //over pupil highlight
    stroke(0);
    noFill();
    ellipse(leftposX,irisY,9,13);
    
    arc(222,196,20,10,3.2,6.3)

    //right eye (of body)
    noStroke();
    fill(255);
    ellipse(righteyex,eyey+1,20,16);
    fill(240);
    arc(righteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseX > 218 & mouseX < 230) {
        rightposX = mouseX;
    }
    if (mouseX > 230){
        rightposX = righteyex+6;
    }
    if (mouseX < 218) {
        rightposX = righteyex-4;
    }
    ellipse(rightposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(rightposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(rightposX,irisY,5,8); //pupil
    fill(255);
    ellipse(rightposX-2,irisY-2,3,6); //over-pupil highlight
    stroke(0);
    noFill();
    ellipse(rightposX,irisY,9,13);

    arc(262,196,20,10,3.2,6.3);
        

    //mouth
    stroke(0);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //frowning action
        while(mouthY < 245){
            mouthY = mouthY+1;
        }
        curve(228, mouthY, 233, 230, 240, 230, 245, mouthY);
        performingAnim = true;
    } 
    else {
        curve(228, 225, 233, 230, 240, 230, 245, 225);
        performingAnim = false;
    }
    if(mouseX > 230 & mouseX < 240 && mouseY > 220 && mouseY < 235 && mouseIsPressed === true){ //makes my mouth open and close randomly, for no good reason.
        stroke(0);
        fill(227, 85, 66);
        ellipse(236.5, 230,10,8);
        performingAnim = true;
    } 

    //nose
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);

    //eyebrows
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //eyebrow furrowing action
        while (leftbrowx < 215 && browY < 190 && rightbrowx > 268) {
            leftbrowx = leftbrowx+1
            rightbrowx = rightbrowx-1
            browY = browY+1

            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx,browY);
            curveVertex(leftbrowx+7,browY-5);
            curveVertex(leftbrowx+18,browY-1);
            curveVertex(leftbrowx+25,browY-2);
            curveVertex(leftbrowx+20,browY-8);
            curveVertex(leftbrowx+7,browY-8);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx,browY);
            curveVertex(rightbrowx-7,browY-1);
            curveVertex(rightbrowx-18,browY+3);
            curveVertex(rightbrowx-25,browY+2);
            curveVertex(rightbrowx-20,browY-4);
            curveVertex(rightbrowx-7,browY-4);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
        if (leftbrowx >= 215 & browY >= 190 && rightbrowx <= 268){
            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx-6,browY-5);
            curveVertex(leftbrowx-0,browY-3);
            curveVertex(leftbrowx+15,browY-0);
            curveVertex(leftbrowx+22,browY-1);
            curveVertex(leftbrowx+17,browY-6);
            curveVertex(leftbrowx+4,browY-6);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx-2,browY+2);
            curveVertex(rightbrowx-8,browY+4);
            curveVertex(rightbrowx-19,browY+7);
            curveVertex(rightbrowx-26,browY+6);
            curveVertex(rightbrowx-21,browY+1);
            curveVertex(rightbrowx-8,browY+1);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
    } else {
        let leftbrowx = 210;
        let browY = 185;
        let rightbrowx = 273;
        beginShape();
        curveVertex(leftbrowx,browY+3);
        curveVertex(leftbrowx+7,browY+2);
        curveVertex(leftbrowx+18,browY+4);
        curveVertex(leftbrowx+25,browY+3);
        curveVertex(leftbrowx+20,browY-1);
        curveVertex(leftbrowx+7,browY-1);
        endShape(CLOSE);
        beginShape();
        curveVertex(rightbrowx,browY+3);
        curveVertex(rightbrowx-7,browY+2);
        curveVertex(rightbrowx-18,browY+4);
        curveVertex(rightbrowx-25,browY+3);
        curveVertex(rightbrowx-20,browY-1);
        curveVertex(rightbrowx-7,browY-1);
        endShape(CLOSE);
        performingAnim = false;
    }
    

    //hair
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-15,haircenterY+10,20,50,8,3.5);
    noStroke();
    rect(haircenterX-16,haircenterY+5,5,5);
    stroke(hairRed+100, hairGreen+50, hairBlue+50);

    beginShape();
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-28,haircenterY+2);
    curveVertex(haircenterX-47,haircenterY-9);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    endShape();

    beginShape();
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-12,haircenterY+8);
    curveVertex(haircenterX-25,haircenterY+10);
    curveVertex(haircenterX-40,haircenterY);
    curveVertex(haircenterX-30,haircenterY+3);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    endShape();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX-1,haircenterY+2);
    curveVertex(haircenterX-5,haircenterY+8);
    curveVertex(haircenterX-15,haircenterY+14);
    curveVertex(haircenterX-27,haircenterY+15);
    curveVertex(haircenterX-16,haircenterY+8);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    endShape();

    beginShape();
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-50,haircenterY-12);
    curveVertex(haircenterX-35,haircenterY-16);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    endShape();

    beginShape();
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX-24,haircenterY-50);
    curveVertex(haircenterX-15,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    endShape();

    arc(haircenterX+36,haircenterY+5,90,90,5.3,6.9,OPEN);
    arc(haircenterX+28,haircenterY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+64,haircenterY+33);
    curveVertex(haircenterX+65,haircenterY+45);
    curveVertex(haircenterX+72,haircenterY+35);
    curveVertex(haircenterX+75,haircenterY+28);
    curveVertex(haircenterX+75,haircenterY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(haircenterX+10,haircenterY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(haircenterX-365,haircenterY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(haircenterX-390,haircenterY+130,15,30,7.8,4.8,CLOSE);
    arc(haircenterX-385,haircenterY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+20,haircenterY-2);
    curveVertex(haircenterX+28,haircenterY+6);
    curveVertex(haircenterX+40,haircenterY+14);
    curveVertex(haircenterX+65,haircenterY+25);
    curveVertex(haircenterX+48,haircenterY+10);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+35,haircenterY-8);
    curveVertex(haircenterX+35,haircenterY-8);
    endShape();

}
function mousePressed() {
    if (performingAnim === false) { //runs the code which changes all the variables
        eyeBlue = random(0,100);
        eyeRed = random(0,100);
        eyeGreen = random(0,100);
        hairRed = random(0,80);
        hairGreen = random(0,80);
        hairBlue = random(0,80);
        skinBlue = random(155,215);
        skinGreen = random(skinBlue,245);
        skinRed = random(skinGreen,255);
        hairLen = random(10,100);
    } else { //prevents it from doing that while the mouse is pressed down over the two animation spots
        eyeBlue = eyeBlue;
        eyeRed = eyeRed;
        eyeGreen = eyeGreen;
        hairRed = hairRed;
        hairGreen = hairGreen;
        hairBlue = hairBlue;
        skinBlue = skinBlue;
        skinGreen = skinGreen;
        skinRed = skinRed;
        hairLen = hairLen;
    }
    
}

I misinterpreted the original directions of the project and instead of making the face change, I made it interactive. Because (in all honesty) I was too lazy and didn’t want all my hard work to go to waste, I just left it and incorporated it into the portrait.

Project-02: Variable Faces

I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information.

sketch
// Angela Yang 
// Section C - Project 02

// Variables are set for each facial element. 
var eyeSizeW = 100;
var eyeSizeH = 100;
var eyeSizeW2 = 70;
var eyeSizeH2 = 70;
var pupilSizeW = 50;
var pupilSizeH = 50;
var pupilSizeW2 = 30;
var pupilSizeH2 = 30;
var faceWidth = 200;
var faceHeight = 200;
var faceWidthB = 350;
var faceHeightB = 250;  
var mouthType = 2;
var noseType = 1;
var r = 200; 
var g = 100;
var b = 150;
var on = false; 


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

function draw() {
  if(on) {
    background(243, 200, 174);
  } else {
    //background changes from yellowish-green to a pink tone with 30% transparency. 
    background(219, 226, 175, 30);
  }
  

   
//LEFT FIGURE
    //Body
    fill(r, g, b);
    stroke("white");
    ellipse(width/4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(r, g, b);
    ellipse(width / 4, height / 2, faceWidth,  faceHeight);
  
    // Eyes
    stroke(r, g, 50);
    strokeWeight(1);
    fill(255);
    var eyeLX = width / 4 - faceWidth * 0.25;
    var eyeRX = width / 4 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(r-100, g+50, b+50);
    var pupilLX = width / 4 - faceWidth * 0.25;
    var pupilRX = width / 4 + faceWidth * 0.25;
    ellipse(pupilLX, height/2, pupilSizeW, pupilSizeH);
    ellipse(pupilRX, height/2, pupilSizeW, pupilSizeH);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1.5){
       noStroke();
       rect(width/4 - faceWidth*0.03, height/2 + faceHeight*0.1, 10, 20);
       //When the value of nose type is >= to 0 and <= 1.5, a rectangular nose is drawn. 
      
    } else if(noseType > 1.5 & noseType <= 3){
        noStroke();
        ellipse(width/4, height/2 + faceHeight*0.1, faceWidth/5, faceHeight/10);
        //When the value of nose type is greater than 1.5 and smaller+equal to 3, 
        //a circular nose is drawn. 
      
    } else if(noseType > 3 & noseType <= 4.5){
        stroke("white");
        strokeWeight(4);
        line(width/4, height/2, width/4+15, height-230);
        //When the value of nose type is greater then 3 and smaller+equal to 4.5, 
        //a linear nose is drawn. 
      
    } else{
        noStroke();
        triangle(width/4, height/2, width/4+15, height-230, width/4-15, height-230);      
      //When the value of nose type is equal to all other numbers in the range of 0~6, 
      //a triangular nose is drawn. 
    }

  
   // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, 20, 5);
       // A confusing mouth is drawn. 
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill(r, g, b+80);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/6, faceHeight/10);
        //A shocking mouth is drawn. 
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, width/4+15, height-190, width/4-15, height-190); 
        //A happy mouth is drawn. 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/2, faceHeight/8);
        //A shocking mouth is drawn. 

    }
  
  
  
// RIGHT FIGURE 
    //Body
    fill(0, g, b+50);
    stroke("white");
    ellipse(width/1.4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(0, g, b+50);
    ellipse(width/1.4, height/2, faceWidthB, faceHeightB);
  
    // Eyes
    stroke(r, g, 100);
    strokeWeight(1);
    fill(255);
    var eyeLX2 = width / 1.4 - faceWidthB * 0.25;
    var eyeRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(eyeLX2, height / 2, eyeSizeW2, eyeSizeH2);
    ellipse(eyeRX2, height / 2, eyeSizeW2, eyeSizeH2);
    fill(r-100, g+50, b+50);
  
    var pupilLX2 = width / 1.4 - faceWidthB * 0.25;
    var pupilRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(pupilLX2, height/2, pupilSizeW2, pupilSizeH2);
    ellipse(pupilRX2, height/2, pupilSizeW2, pupilSizeH2);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1){
       noStroke();
       ellipse(width/1.4, height/2 + faceHeightB*0.1, faceWidthB/5, faceHeightB/10);
      
    } else if(noseType > 2 & noseType <= 4){
       noStroke();
       fill("white");
       rect(width/1.4 - faceWidthB*0.03, height/2 + faceHeightB*0.1, 30, 10);
      
    } else if(noseType > 4 & noseType <= 5.5){
        stroke("white");
        strokeWeight(5);
        line(width/1.4, height/2, width/1.4+15, height-230);
      
    } else{
        noStroke();
        triangle(width/1.4, height/2, width/1.4+50, height-220, width/1.4+50, height-220);      
    }
  
  
     // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, 20, 5);
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill("black");
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/6, faceHeightB/10);
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, width/1.4+15, height-190, width/1.4-15, height-190); 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/10, faceHeightB/8);
}
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 300.
    faceWidth = random(100, 300);
    faceHeight = random(100, 400);
    faceWidthB = random (100, 300);
    faceHeightB = random (200, 450);
    noseType = random(0, 6);
    mouthType = random(0, 8);
    eyeSizeW = random(10, 80);
    eyeSizeH = random(10, 80);
    eyeSizeW2 = random(30, 70);
    eyeSizeH2 = random(30, 70);
    pupilSizeW = random(5,30);
    pupilSizeH = random(5,20);
    pupilSizeW2 = random(10, 30);
    pupilSizeH2 = random (5, 30);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    if(mouseX > 250 & mouseX < 350 && mouseX);
    on = !on;

}

Project-02: Variable Faces

My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.

sketch
// Evan Stuhlfire
// estuhlfi, Section B
// Project-02: Variable Faces; Face Variables

// Declare global variables


// variable controling head dimensions and shape
var headX = 0; // x value of head center
var headY = 0; // y value of head center
var minHead = 100;
var maxHeadW = 500; //max head width
var maxHeadH = 420; // max head height
var headHeight = 300;
var headWidth = 350;

// variables controling face dimensions and attributes
var eyeSize = 25;
var percentEyeW = 1; // value to adjust eye shape and position
var percentEyeH = 1; // value to adjust eye shape and position
var eyeVert = 2;
var lookAdjustLeft = .25; // Controls eye placement for look direction
var lookAdjustRight = .25;
var lookMax = .45;

// variable to control nose
var nose1 = 1;
var nose2 = 1.1;
var nose3 = 1.1;
var nose4 = 1;
var noseEnd = 1;
var noseLeft1 = 1;
var noseLeft2 = .9;
var noseLeft2 = 1;

// mouth variables
var noseMouthGap = 10;
var mouthStart = 1;
var mouth1 = 1.05;
var mouth2 = 1;
var mouthIncrease = 1.02;

//  color variables
var color1 = 0;
var color2 = 0;
var color3 = 0;

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

    // set head center
    centerX = width/2;
    centerY = height/2;

    // get initial colors
    getRandomColors();
}

function draw() {
    var colorChange = .4; // factor to modify color

    background(color1, color2, color3); // draw background from color variables

    // calculate eyes
    var eyeLeftX = centerX - headWidth * lookAdjustLeft; // x coordingate of left eye
    // x coordinate of right eye, can look different directions
    var eyeRightX = centerX + headWidth * lookAdjustRight; 
    var eyeHeight = min(eyeSize * percentEyeH, headHeight * .90);
    var eyeWidth = eyeSize * percentEyeW;
    var eyePositionY = height / eyeVert; // calculate vertical position of eyes 

    
    // calculate pupils
    var pupilSize = .2;
    var pupilLook = 4;
    var pupilX = eyeLeftX;
    var pupilY = eyeRightX;

    if (lookAdjustLeft > lookAdjustRight){ // looking left move pupils left
        pupilX -= pupilLook;
        pupilY -= pupilLook;
    } else { // looking right move pupils right
        pupilX += pupilLook;
        pupilY += pupilLook;
    }

    // variables for nose
    var maxNose = .90;

    var nose1X = (eyeLeftX + eyeRightX)/2;
    var nose1Y = eyePositionY; 
    if (lookAdjustLeft > lookAdjustRight) { 
        // looking left point nose left
        var nose2X = nose1X * noseLeft1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * noseLeft2;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseLeft3;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);
    } else { 
        // looking right point nose right 
        var nose2X = nose1X * nose1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * nose3;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseEnd;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);   
    }

    // calculate mouth
    var maxMouth = .98;
    var mouth1X = centerX * mouthStart;
    var mouth1Y = min(nose4Y * mouth1, (centerY + headHeight/2) - noseMouthGap);
    // keep mouth on face
    if (headHeight > headWidth){
        mouth1X = centerX - noseMouthGap;
    }
    var mouth2X = mouth1X * mouthIncrease;
    var mouth2Y = mouth1Y * mouth2;
    var mouth3X = mouth2X * mouthIncrease;
    var mouth3Y = mouth2Y;
    var mouth4X = mouth3X * mouthIncrease;
    var mouth4Y = mouth1Y;



    // draw head
    fill(color1 * colorChange, color2, color3);
    ellipse(centerX, centerY, headWidth,  headHeight);

    // draw eyes
    fill(color1, color2 * colorChange, color3);
    ellipse(eyeLeftX, eyePositionY, eyeWidth, eyeHeight);
    ellipse(eyeRightX, eyePositionY, eyeWidth, eyeHeight);

    // draw pupils
    fill(10);
    ellipse(pupilX, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);
    ellipse(pupilY, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);

    // draw mouth
    beginShape();
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth2X, mouth2Y);
    curveVertex(mouth3X, mouth3Y);
    curveVertex(mouth4X, mouth4Y);
    curveVertex(mouth4X, mouth4Y);
    endShape();

    // draw nose 
    fill(color1 * colorChange, color2, color3);
    beginShape();
    curveVertex(nose1X, nose1Y);
    curveVertex(nose1X, nose1Y);
    curveVertex(nose2X, nose2Y);
    curveVertex(nose3X, nose3Y);
    curveVertex(nose4X, nose4Y);
    curveVertex(nose4X, nose4Y);
    endShape();
}

function mousePressed() {
    // When the mouse is clicked random values are generated to control the 
    // dimensions, position, and color of a face

    // randomly generate head value
    headWidth = random(minHead, maxHeadW);
    headHeight = random(minHead, maxHeadH);

    // randomly generate eye values
    eyeSize = headWidth * random(.1, .3);
    percentEyeW = random(.5, 1); 
    percentEyeH = random(.5, 1);
    eyeVert = random(2, 2.25); // vertical position of eyes
    lookAdjustLeft = random(.01, lookMax);
    lookAdjustRight = lookMax - lookAdjustLeft;

    // generate nose values
    nose1 = random(1, 1.1);
    nose2 = random(1, 1.2);
    nose3 = random(1.1, 1.15);
    nose4 = random(.98, 1.05);
    noseEnd = random(.95, 1.05);
    noseLeft1 = random(.95, 1);
    noseLeft2 = random(.85, 1);
    noseLeft3 = random(1, 1.12);

    // generate mouth values
    mouthStart = random(.95, 1.05);
    mouth1 = random(1.05, 1.2);
    mouth2 = random(.98, 1.02);
    mouthIncrease = random(1.02, 1.03);

    // randomly generate a new color combination
    getRandomColors();
}

function getRandomColors(){
    // function generates a random number for color variables
    color1 = random(80, 255); 
    color2 = random(80, 255);
    color3 = random(80, 255);
}

Project-02 Variable Faces

I was going to try with different expressions, but my if-else statement doesn’t seem to work for random(). However, I used mouseY instead for the crying effect.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(480, 640);
}

var width = 480;
var height = 640;
var x=width /100;
var y=height/100;
var faceWidth= 80*x;
var faceHeight= 80*y;
var r = 0;
var g = 0;
var b = 0;
var eyebrowshape=1;
var eyebrowy2= 27*y;
var eyebrowy1= 27*y;
var mouthSizeX = 20*x;
var mouthSizeY = 10*y;


function draw() {
    background(220);
    fill(255,229,204);
    ellipse(50*x, 50*y, faceWidth,  faceHeight); //head

    var leftEyex=50*x-faceWidth/4;                 //eyes
    var rightEyex=50*x+faceWidth/4;
    var leftEyey=50*y-faceHeight/8;
    var rightEyey=50*y-faceHeight/8;
    var eyeSizex=20*x;
    var eyeSizey=20*y;
    fill(255);
    ellipse(leftEyex, leftEyey, eyeSizex,eyeSizey);//Left eyes
    fill(r,g,b);
    ellipse(leftEyex, leftEyey, eyeSizex*2/3,eyeSizey*2/3);
    fill(255);
    ellipse(rightEyex,rightEyey,eyeSizex,eyeSizey);//Right eyes
    fill(r,g,b);
    ellipse(rightEyex,rightEyey,eyeSizex*2/3,eyeSizey*2/3);
    fill(r,g,b);                                     //hairs
    strokeWeight(0)
    rect(20*x,5*y,60*x,10*y);
    rect(20*x,15*y,10*x,7*y);
    rect(70*x,15*y,10*x,7*y);
    rect(30*x,15*y,10*x,5*y);
    rect(60*x,15*y,10*x,5*y);
    rect(40*x,15*y,15*x,2*y);
    rect(50*x,15*y,15*x,2*y);
    strokeWeight(10);                                  //eyebrow
    stroke(0);
    var z=5*x;
    var Leyebrowx1= 50*x-faceWidth/4-z ;
    var Reyebrowx1= 50*x+faceWidth/4-z;
    var Leyebrowx2= 50*x-faceWidth/4+10*x-z;
    var Reyebrowx2= 50*x+faceWidth/4+10*x-z;

    line(Leyebrowx1,eyebrowy1,Leyebrowx2,eyebrowy2); //left eyebrow
    line(Reyebrowx1,eyebrowy2,Reyebrowx2,eyebrowy1); //right eyebrow
    var mouthStroke = 2
    strokeWeight(mouthStroke);                       //mouthes
    fill(255,0,0);
    ellipse(50*x,70*y,mouthSizeX,mouthSizeY);     
    if(mouseY<=100*y/2) {        //tears
      fill(0,0,255)
      strokeWeight(0)
      rect(leftEyex,leftEyey+10*y,5*x,20*y)
      rect(rightEyex,rightEyey+10*y,5*x,20*y)
      rect(leftEyex-5*x,leftEyey+20*y,5*x,20*y)
      rect(rightEyex-5*x,rightEyey+20*y,5*x,20*y)
    }
    fill(204,102,0)
    ellipse(50*x,50*y,10*x,10*y);   

}


function mousePressed() {
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
    mouthSizeX =random(10*x,30*x);
    mouthSizeY =random(0*y,20*y);
    eyebrowy2= random (20*y,35*y)
    eyebrowy1= random (20*y,35*y)
}

Project-02

I started off using the baseline template for a generative face that was given. I then used multiple if else statements to randomize the use of the nose, round mouth, curved mouth, curved eyes, square eyes, and colors of the inner and outer shapes.

sketch

// Sowang Kundeling Section C Project 02

var r = 141;
var g = 35;
var b = 173;
var r2 = 210;
var g2 = 250;
var b2 = 233;
var eyeColor = 0
var faceWidth = 250;
var faceHeight = 300;
var eyeSize = 25;
var mouthWidth = 15;
var mouthPosition = 240;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(166, 215, 227);
    noStroke();

    fill(r, g, b);
    ellipse(width/2, height/2, faceWidth+130, faceWidth+130); // hair

    if(faceHeight <= 125) {
        fill(r2, g2, b2);
        ellipse(width / 2, height / 2, faceWidth*.5, faceHeight*1.5); // cross ellipses
        ellipse(width / 2, height / 2, faceWidth*1.5, faceHeight*.5);
    }   

    fill(r2, g2, b2);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face shape
    var eyeLX = width / 2 - faceWidth / 4; // eye variables
    var eyeRX = width / 2 + faceWidth / 4;

    
    if(r <= 100) {
        fill(eyeColor);
        ellipse(eyeLX, (height / 2) - 5, eyeSize, eyeSize); // eye
        ellipse(eyeRX, (height / 2) - 5, eyeSize, eyeSize);
        fill(r2, g2, b2);
        ellipse(eyeLX, height / 2, eyeSize, (eyeSize / 2) + 9); // under eye shape to make arc
        ellipse(eyeRX, height / 2, eyeSize, (eyeSize / 2) + 9);
    } else {
        fill(eyeColor);
        rect(eyeLX -8, (height / 2) - 13, eyeSize/2, eyeSize/2); // square eye
        rect(eyeRX -8, (height / 2) - 13, eyeSize/2, eyeSize/2);
    }

    if(eyeColor <= 50) {
        fill(eyeColor);
        ellipse(width / 2, mouthPosition + 30, mouthWidth, mouthWidth); // round mouth
    } else {
        fill(eyeColor)
        ellipse(width / 2, mouthPosition + 30, mouthWidth + 5, mouthWidth); // arc mouth
        fill(r2, g2, b2);
        ellipse(width / 2, mouthPosition + 25, mouthWidth + 8 , mouthWidth +3); // shape to make arc
    }

    if(mouthPosition >= 240) { // nose
        fill(eyeColor);
        triangle(width/2, height/2, width/2 + 8, height/2 + 18, width/2 - 8, height/2 + 18);
    }
}
 
function mousePressed() {
    r = random(0, 199);
    g = random(0, 199);
    b = random(0, 199);
    r2 = random(200, 255);
    g2 = random(200, 255);
    b2 = random(200, 255);
    eyeColor = random(0, 100);
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(20, 35);
    mouthWidth = random(10, 25);
    mouthPosition = random(220, 250);
}

Project 02 – Variable Faces

My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.

sketch
//Favour Adesina Section B

var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;


function setup() {
    createCanvas(600, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    noStroke()
    background(247, 195, 218);

    //SHOULDER
    fill(255, 67, 89);
    ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);

    //EARS
    fill(141, 75, 36);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4);  //left ear outer
    fill(34, 20, 13);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //right ear inner
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //left ear inner
    //FACE
    fill(141, 75, 36);
    ellipse(width/2, height/2, faceWidth, faceHeight);    // face

    //EARRINGS
    fill(255, 255, 0);
    triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
    triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);


    //EYES
    var LXeye = width/2 - faceWidth * 0.26;          
    var RXeye = width/2 + faceWidth * 0.26;
    fill(255, 255, 255);
    ellipse(LXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites 
    ellipse(RXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites
    fill(104, 54, 37);
    ellipse(LXeye, height/2, pupSize, pupSize);    //Pupils 
    ellipse(RXeye, height/2, pupSize, pupSize);     //pupils 
    fill(0);
    ellipse(LXeye, height/2, 20, 20);                //inner pupils 
    ellipse(RXeye, height/2, 20, 20);                //inner pupils
       
    //NOSE
    stroke(35, 31, 32);
    strokeWeight(7);
    line(width/2, height/2, width/2, (height/2)+ eyeHeight/3);                         //Nose bridge
    ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose 
    ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose

    //LIPS
    strokeWeight(2);
    var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
    fill(122, 22, 25);
    ellipse(width/2, BlipY, BlipWidth, lipHeight);
    noStroke();
    fill(173, 69, 87);                                   //light pink 
    ellipse(width/2, BlipY, lipWidth/2, lipHeight/2);  //inner mouth

    


    //HAIR
    fill(34, 20, 13);
    ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
    ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
    ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
 

        }

function mousePressed() {

    faceWidth = random(300, 500);
    faceHeight = random(260, 400);
    lipHeight = random(10, 50);
    pupSize = random(20, 70);
    lipWidth = random(10, 60);
    BlipWidth = random(30, 100);
    eyeWidth = random(20, 150);
    eyeHeight = random(80, 170);

}

Project 02: Variable Faces

This is my project 02 “Variable Faces”. The most challenging part of this project is organizing the logic of my code. Once the logic is sorted out it was actually not too complicated. I struggled a bit with certain shapes.

sketch
/* Jenny Wang
   Section B */

var eyes = 3;
var features = 3;
var mouth = 3;
var hair = 3;

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

function draw() {
    background(250,160,150);
    noStroke()
    fill(230,89,132);
    ellipse()
    noStroke();
    fill(226,190,134);
    ellipse(234,258,199,250);//face
    strokeWeight(2); //nose
    stroke(177,123,60);
    line(231,272,220,300);
    strokeWeight(2);
    stroke(177,123,60);
    line(220,300,236,302);


    if(eyes<=1){ //round eyes
        noStroke();
        fill(255,255,255);
        circle(182,252,46);
        noStroke();
        fill(162,196,231);
        circle(182,252,29);
        noStroke();
        fill(43,91,137);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        circle(292,252,46);
        noStroke();
        fill(162,196,231);
        circle(292,252,29);
        noStroke();
        fill(43,91,137);
        circle(292,252,17);
        //right eye
    }
    else if(eyes<=2){ //squint eyes
        strokeWeight(3);
        stroke(65,50,20)
        line(170,253,197,265);
        line(170,280,197,265);//left eye
        line(270,265,297,254);
        line(297,280,270,265);//right eye
    }
    else if (eyes<=3){ //half eyes
        noStroke();
        fill(255,255,255);
        arc(182,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(182,252,29);
        noStroke();
        fill(177,123,57);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        arc(292,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(292,252,29);
        noStroke();
        fill(177,123,57);
        circle(292,252,17);
    }

    if(features<=1){ //mole
        strokeWeight(3);
        fill(177,123,57)
        point(186,321);
    }
    else if(features<=2){ //freckles
        strokeWeight(3);
        fill(177,123,57);
        point(162,301);
        strokeWeight(3);
        fill(177,123,57);
        point(177,309);
        strokeWeight(3);
        fill(177,123,57);
        point(194,303);
        strokeWeight(3);
        fill(177,123,57);
        point(265,306);
        strokeWeight(3);
        fill(177,123,57);
        point(283,299);
        strokeWeight(3);
        fill(177,123,57);
        point(298,308);
    }
    else if(features<=3){ //blush
        noStroke();
        fill(239,171,199);
        ellipse(164,306,28,16);
        noStroke();
        fill(239,171,199);
        ellipse(305,306,28,16);
    }

    if(mouth<=1){ //happy laugh
        noStroke();
        fill(246,166,193);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
    }
    else if(mouth<=2){//sad mouth
        strokeWeight(4);
        stroke(246,160,193);
        line(214,350,235,343);
        strokeWeight(4);
        stroke(246,160,193);
        line(256,350,235,343);
    }
    else if(mouth<=3){ //mouth with teeth
        noStroke();
        fill(237,10,124);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
        noStroke();
        fill(255,255,255);
        rect(227,323,21,11);
    }

    if(hair<=1){ //red hair
        noStroke();
        fill(199,102,29);
        arc(233,179,160,93,2.6,0.5, OPEN);
        noStroke();
        fill(199,102,29);
        circle(347,197,95);
        noStroke();
        fill(199,102,29);
        circle(116,197,95);
    }
    else if(hair<=2) { //blonde hair
        noStroke();
        fill(231,209,100);
        circle(234,124,98);
        noStroke();
        fill(231,209,100);
        circle(305,148,84);
        noStroke();
        fill(231,209,100);
        circle(342,203,58);
        noStroke();
        fill(231,209,100);
        circle(347,244,45);
        noStroke();
        fill(231,209,100);
        circle(160,148,84);
        noStroke();
        fill(231,209,100);
        circle(127,203,58);
        noStroke();
        fill(231,209,100);
        circle(121,244,45);
    }
    else if(hair<=3){ //brown hair
        noStroke();
        fill(177,123,57);
        arc(233,180,232,126,2.6,0.5, OPEN);
        noStroke();
        fill(177,123,57);
        rect(118,180,38,205)
        noStroke();
        fill(177,123,57);
        rect(311,180,38,205);
    }
    
    noStroke(); //neck
    fill(226,190,134);
    rect(210,378,48,63);
    noStroke(); //body
    fill(226,190,134);
    rect(120,415,231,225,65,65,0,0);
    noStroke(); //dress
    fill(184,191,225);
    quad(155,527,202,415,265,415,320,527);
    noStroke(); 
    fill(226,190,134);
    triangle(202,415,265,415,233,475);
    noStroke(); 
    fill(184,191,225);
    rect(155,527,164,113);
}

function mousePressed() {
    eyes = random (0,3);
    features = random (0,3);
    mouth = random (0,3);
    hair = random (0,3);
}

Project 2: Variable Face

sketch
sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var R = 0;
var G = 0;
var B = 0;
var FR = 252;
var FG = 224;
var FB = 203;
var nose = 10
var HR = 100;
var HG = 100;
var HB = 100;
var CR = 140;
var CG = 140;
var CB = 140;



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R,G,B);
    noStroke();
    //back hair
    fill(HR,HG,HB);
    ellipse(width / 2, height / 2, faceWidth+10,  faceHeight+10);
    strokeWeight(2);
    stroke(0);
    rect(width / 2 - faceWidth/2-5, height / 2 -20, faceWidth + 10, faceHeight/2+25);
    noStroke();
    //clothes
    if(mouseX < width/2){
        fill(CR,CG,CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);
    }else{
        fill(255-CR,255-CG,255-CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);

    }
    //neck
    fill(FR-20,FG-20,FB-20);
    rect(width/2- faceWidth/8, height/2 + faceHeight/2 -10, faceWidth/4,20);
    ellipse(width/2, height/2 + faceHeight/2 +10, faceWidth/4,faceWidth/4);
    //face outline
    fill(FR,FG,FB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eye
    fill(255);
    strokeWeight(1);
    stroke(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    noStroke();
    fill(0);
    ellipse(eyeLX,height / 2,eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2);
    fill(255);
    ellipse(eyeLX + 2,height / 2 -2,eyeSize / 6);
    ellipse(eyeRX + 2,height / 2 -2,eyeSize / 6);

    //mouth
    fill(240,90,85);
    arc(150,180,20,20,0,PI, open);
    //teeth
    fill(255);
    rect(145,180,10,2);
    //nose
    strokeWeight(2);
    stroke(0);
    line(150,150,150,150 + nose);
    //front hair
    fill(HR,HG,HB);
    arc(width / 2, height / 2-15, faceWidth+10,  faceHeight-10, PI,2*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.
    R = random(50,250);
    G = random(0,256);
    B = random(0,256);
    FR = R + 50;
    FG = FR - 25;
    FB = FG - 25;
    HR = 255-R;
    HG = 255-G;
    HB = 255-B
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(20, 30);
    nose = random(10,20);
    CR = random(100,200);
    CG =random(100,200);
    CB =random(100,200);
}