Project-02-Variable-Face

Project-02

Here is my changing face! I think I struggled the most with deciding what nostril shape I wanted, as well as whether I wanted the eyebrows to be downturned (making them angry) or flat. I decided on flat, so that the face could smile.

sketch

// Amanda Wen Section C

var eyeSizeW = 50
var eyeSizeH = 70
var pupilSizeW = 20
var pupilSizeH = 30
var faceWidth = 180
var faceHeight = 150
var noseWidth = 5
var noseHeight = 3
var eyebrowWidth = 30
var eyebrowHeight = 10

var skinR = 60
var skinG = 137
var skinB = 97

var eyeR = 144
var eyeG = 185
var eyeB = 147

var pupilR = 34
var pupilG = 83
var pupilB = 75

var eyebrowR = 22
var eyebrowG = 59
var eyebrowB = 34

var noseR = 22
var noseG = 59
var noseB = 34

var mouthR = 186
var mouthG = 202
var mouthB = 181


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

function draw() {
    background(58, 81, 78); // background color
    noStroke();
// face
    fill(skinR, skinG, skinB); // face color
    ellipse(width / 2, height / 2, faceWidth, faceHeight); // face shape

// eyeballs
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyeR, eyeG, eyeB); // eye color
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH); // left eyeball
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH); // right eyeball

// pupils
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    fill(pupilR, pupilG, pupilB); // pupil color
    ellipse(pupilLX, height / 2, pupilSizeW, pupilSizeH); // left pupil
    ellipse(pupilRX, height / 2, pupilSizeW, pupilSizeH); // right pupil

// eyebrows
    var eyebrowLX = width / 2 - faceWidth * 0.35;
    var eyebrowRX = width / 2 + faceWidth * 0.2;
    fill(eyebrowR, eyebrowG, eyebrowB); // eyebrow color
    rect(eyebrowLX, height / 2.5, eyebrowWidth, eyebrowHeight); // left eyebrow
    rect(eyebrowRX, height / 2.5, eyebrowWidth, eyebrowHeight); // right eyebrow

// nostrils
    var noseLX = width / 2 - faceWidth * 0.05;
    var noseRX = width / 2 + faceWidth* 0.03;
    fill(noseR, noseG, noseB); // nose color
    rect(noseLX, height / 1.8, noseWidth, noseHeight) // left nostril
    rect(noseRX, height / 1.8, noseWidth, noseHeight) // left nostril

// mouth
    var mouth = width / 2 + faceWidth * 0.01;
    fill(mouthR, mouthG, mouthB); // mouth color
    arc(mouth, height * 0.6, 40, 20, radians(0), radians(180)); // mouth shape
}

function mousePressed() {
    // face shape random
    faceWidth = random(180, 150)
    faceHeight = random(180, 150)
    // eye shape random
    eyeSizeW = random(50, 70);
    eyeSizeH = random(50, 70);
    // pupil shaperandom
    pupilSizeH = random(20, 30);
    pupilSizeW = random(20, 30);

    // skin color random
    skinR = random(180, 200);
    skinG = random(180, 200);
    skinB = random(180, 200);
    // eye color random
    eyeR = random(100, 160);
    eyeG = random(100, 160);
    eyeB = random(100, 160);
    // pupil color random
    pupilR = random(108, 90);
    pupilG = random(108, 90);
    pupilB = random(108, 90);
    // eyebrow color random
    eyebrowR = random(110, 103);
    eyebrowG = random(110, 103);
    eyebrowB = random(110, 103);
    // nose color random
    noseR = random(130, 200);
    noseG = random(130, 200);
    noseB = random(130, 200);
    // mouth color
    mouthR = random(120, 100);
    mouthG = random(120, 100);
    mouthB = random(120, 100);
}

Project 02: Variable Face

This project was challenging because it took a lot of trial and error. Commenting helped a lot when going back and forth between editing different things to match them up.

sketch

/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

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

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}

Project 02: Variable Face

This one was a struggle, not gonna lie, so I chose to make this one simpler: cross-eyed monochrome faces.

// Kailani Small
// Section A

// cross-eyed monochrome faces
var eyeSize;
var pupilSize;
var faceWidth;
var faceHeight;
var r;
var g;
var b;

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

function draw() {
background(225);
// face shape
ellipse(width / 2, height / 2, faceWidth, faceHeight);

// eyes
var lefteye = width / 2 - faceWidth * 0.25;
var righteye = width / 2 + faceWidth * 0.25;
ellipse(lefteye, height / 2, eyeSize, eyeSize);
ellipse(righteye, height / 2, eyeSize, eyeSize);
var leftpupil = width / 2 - faceWidth * 0.2;
var rightpupil = width / 2 + faceWidth * 0.2;
ellipse(leftpupil, height / 2, pupilSize, pupilSize);
ellipse(rightpupil, height / 2, pupilSize, pupilSize);

// mouth
ellipse(width / 2, height * .6, faceWidth * 0.25, faceHeight * 0.25);

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
faceColor = fill(random(140, 255));
pupilSize = random(5, 8);
}

Variable Face project 02

For this project, I wanted to make something cuter than last week’s face, so I mapped everything out in illustrator and then translated the shapes to js. This workflow was much more efficient and allowed me to create cartoon facial expressions since I wasn’t focused on generating the coordinates or RGB codes for every shape. Unfortunately wordpress cuts a bit of the right side off 🙁

sketch

// hfroling Hazel Froling Section C *\

    
    var r=170;
    var g=204;
    var b=170;
    var x= 300;
    var dir= 1;
    var speed= 5;
    var mouth= 1;
    

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

function mousePressed() {
    mouth += 1;
    if ( mouth > 3) {
        mouth = 1;        
    }
}

function draw() {

    if (mouth == 1) {
        background(r, g, b);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,334,160,52) //above mouth cover
        stroke(168,125,80) //skin line color
        strokeWeight(2); //2pt stroke
        fill(255); //white
        rect(248,386,104,11); //teeth
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(222,280,88,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,280,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,280,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(377,280,88,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,280,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,280,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(201,324,133,83); // left cheek cover
        ellipse(402,324,133,83); // right cheek cover
        fill(242,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
    }
    if (mouth == 2) {
        background(221,168,181);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,344,160,57); //above mouth cover
        stroke(168,125,80); //skin line color
        strokeWeight(2); //2pt stroke
        line(249,400,351,400); //top lip
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(224,280,82,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,275,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,275,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(375,280,82,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,275,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,275,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(210,320,133,83); // left cheek cover
        ellipse(393,320,133,83); // right cheek cover
        fill(250,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
        fill(221,168,181); // tounge color
        ellipse(300,450,44,39); //tounge shape
        fill(182,95,65); // mouth fill
        ellipse(300,418,63,33); //tounge cover
        strokeWeight(0);
        fill(124,54,36); //tonsil color
        ellipse(306,431,12,24) //right tonsil
        ellipse(294,431,12,24) //left tonsil
        fill(221,168,181); // tounge color
        rect(287,433,26,14); // tonsil cover
        strokeWeight(3);
        stroke(182,95,65); //tounge line color
        line(300,434,300,458) //tounge groove
        } else if (mouth == 3){ 
                background(200,200,255); //light blue
                fill(107,77,38); //hair color
                strokeWeight(0);
                rect(111,168,374,329,45); //hair back
                fill(57,91,63); //green shirt
                rect(94,509,411,168,100); //shirt rect
                fill(244,212,189); //skin color
                stroke(168,125,80) // neck line color
                strokeWeight(2); //neck stroke
                rect(244,422,120,127,50); //neck
                ellipse(478,286,60); //right ear
                ellipse(120,286,60);  //left ear
                rect(130,130,340,340,150); //face
                fill(244,212,189); //skin color
                ellipse(303,335,41,26); //nose
                strokeWeight(0);
                rect(254,307,52,63); //nose cover
                fill(96,57,19); //eye liner brown
                ellipse(218,279,91,83); //eye liner shape left
                ellipse(381,279,91,83); //eye liner shape right
                fill(255); //white
                ellipse(222,280,92,87); //left eye white 
                fill(119,119,75); // green iris
                ellipse(222,280,52,49); //left eye iris
                fill(0); //black pupil
                ellipse(222,280,31,29); //left eye pupil
                fill(255); //white glint
                ellipse(232,272,10,17); //left glint
                fill(255); //white
                ellipse(377,280,92,87); //right eye white 
                fill(119,119,75); // green iris
                ellipse(377,280,52,49); //right eye iris
                fill(0); //black pupil
                ellipse(377,280,31,29); //right eye pupil
                fill(255); //white glint
                ellipse(387,272,10,17); //right glint
                fill(244,212,189); //skin color
                ellipse(201,330,133,83); // left cheek cover
                ellipse(402,330,133,83); // right cheek cover
                fill(242,200,189); //cheek color
                ellipse(203,338,107,83); //left cheek
                ellipse(396,338,107,83); //right cheek
                fill(96,57,19); //eye liner brown
                triangle(165,280,174,279,173,286); //left lower lash
                triangle(168,273,175,273,174,278); //left upper lash
                triangle(435,280,426,279,426,285); //right lower lash
                triangle(425,273,425,278,431,273); //right upper lash
                fill(107,77,38); //hair color
                ellipse(300,140,300,83); //top of hair
                ellipse(139,202,57,115); //left of hair
                ellipse(459,202,57,115); //right of hair
                ellipse(213,165,180,105); //left bangs
                ellipse(385,165,180,105); //right bangs
                stroke(168,125,80); // neck line color
                strokeWeight(2);
                fill(182,95,65); //mouth fill
                ellipse(300,412,40,53); //round mouth
        }

    if (mouseX > width/2 & mouseY > height/2){
        strokeWeight(4);
        stroke(119,119,75); //stem green
        line(583,300,583,350); //stem
        fill(57,91,63); //dark green
        strokeWeight(0);
        rect(548,411,69,138,20); //arm
        fill(244,212,189); //skin color
        stroke(168,125,80); // skin line color
        strokeWeight(2); //neck stroke
        rect(584,335,21,60,20); //thumb
        rect(552,349,60,21,20); //top finger
        rect(552,369,60,21,20); //middle finger
        rect(552,390,60,21,20); //bottom finger
        strokeWeight(0);
        rect(583,350,21,60,20); //knuckle cover
        fill('white'); //petal color
        rect(583,292,19,19,19); //petal
        rect(564,292,19,19,19); //petal
        rect(559,275,19,19,19); //petal
        rect(573,266,19,19,19); //petal
        rect(588,275,19,19,19); //petal
        fill(255,206,0); //yellow color
        rect(573,281,19,19,19); //center petal
    }
    if( mouseX > width/2 & mouseY < height/2){
            strokeWeight(4);
            stroke(119,119,75); //stem green
            line(583,300,583,350); //stem
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill(240,230,255); //petal color
            rect(583,292,19,19,19); //petal
            rect(564,292,19,19,19); //petal
            rect(559,275,19,19,19); //petal
            rect(573,266,19,19,19); //petal
            rect(588,275,19,19,19); //petal
            fill('white'); //white
            rect(573,281,19,19,19); //center petal
        }
        if( mouseX < width/2 & mouseY > height/2){
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,315,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover

        }
            else if (mouseX < width/2 & mouseY < height/2){
            strokeWeight(0);
            fill(57,91,63); //dark green
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill('white'); //petal color
            rect(547,259,63,90,30); //bunny body
            rect(556,217,12,58,30); //bunny ear L
            rect(588,217,12,58,30); //buny ear r
            strokeWeight(4);
            stroke(0);
            fill(0);
            point(563,282); //bunny eyes
            point(592,282); //bunny eyes
            triangle(577,290,580,299,574,299); //bunny nose
            strokeWeight(2);
            line(577,299,577,308); //bun mouth
            line(577,308,583,312); //bun mouth
            line(577,308,569,312); //bun mouth
        }
}

sketch


var eyeSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var mouthSize=20;
var State= 0;

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

function draw() {
    background(180);
    fill (255,160,122);
    ellipse(width/2, height/2, faceWidth,  faceHeight);// face
    var eyeLX = width / 2 - faceWidth * 0.25;// x position of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;// x position of right eye
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//right eye
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);//left pupil
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);//right pupil
    fill(255,0,0);
    var mouthX =width/2;
    var mouthY =height/2+0.25*faceHeight;
    ellipse(mouthX, mouthY, mouthSize, mouthSize);//mouth
    fill(139,69,19);
}

function mousePressed() {
State= int(random(1,4))
   if (State == 1) {
faceWidth= 200;
faceHeight= 400;
eyeSize= 70;
mouthSize=40;
mouthY=height/2+0.5*faceHeight;// surprise face
} else if (State == 2) {
faceWidth= 325;
faceHeight= 275;
eyeSize=30
mouthSize=10;//relaxed face 
} else {
faceWidth= 300;
faceHeight= 300;
eyeSize=50;
mouthSize=20// normal face
}
}

When I was designing the project, I was thinking about different states of facial expression and trying to show them in the product.

Project 02

For my project, I wanted to create a face who’s expression of shock varies every time the mouse is pressed.

sketch

var faceWidth = 300;
var faceHeight = 500;
var eyeSize = 30;
var faceColour = 196
var mouthWidth = 30
var mouthHeight = 50
var background1 = 227
var background2 = 181
var background3 = 189

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

function draw() {
    background(background1, background2, background3)
    noStroke();
    fill(faceColour,89,114);
    beginShape(); // face
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex((width/2) - (faceWidth/4), (height/2) - (3*faceHeight/8));
    curveVertex((width/2) - (3*faceWidth/8), (height/2) - (faceHeight/8));
    curveVertex((width/2) - (faceWidth/2), (height/2) + (faceHeight/8));
    curveVertex((width/2), (height/2) + (faceHeight/4));
    curveVertex((width/2) + (faceWidth/2), (height/2) + (faceHeight/8));
    curveVertex((width/2) + (3*faceWidth/8), (height/2) - (faceHeight/8));
    curveVertex((width/2) + (faceWidth/4), (height/2) - (3*faceHeight/8));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    endShape();
    fill(255, 228, 218)
    circle((width/2) - (faceWidth/8), (height/2) - (faceHeight/8), eyeSize); // left eye
    circle((width/2) + (faceWidth/8), (height/2) - (faceHeight/8), eyeSize); // right eye
    ellipse((width)/2, (height/2) + (faceHeight/8), mouthWidth, mouthHeight)
}

function mousePressed() {
    faceWidth = random(225, 400)
    faceHeight = random(350, 600)
    eyeSize = random(10,35)
    mouthWidth = random(20, 50)
    mouthHeight = random (20, 50)
    faceColour = random(100, 250)
    background1 = random(1, 255)
    background2 = random(1, 255)
    background3 = random(1, 255)
}

Project 02 Variable Face

In my process, I wanted to figure out how to play with color and how that could change through pressing the mouse. I also was interested in and had a lot of fun figuring out how simple shape changes could affect expression.

project2

//Rachel Legg Class Section C

var eyeSize = 50;
var eyeHeight = 25;
var faceWidth = 300;
var bodyWidth = 400;
var faceHeight = 300;
var eyebrowHeight = 200;

var r;         // making rgb variable
var g;
var b;
var on = false;

var x = 0;
var y = 0;

function setup() {
    createCanvas(640, 480);
    background(220);
}
 
function draw() {
    noStroke();
    if(on){                                  //alternate background color on click
        background(252, 169, 133);    //orange
    }else{
        background(204, 236, 239);    //blue
    }

    //shirt
    fill(r, g, b);                                    
    ellipse(width / 2, height, bodyWidth, height);             
    fill(r + 10, g + 10, b +10);  
    ellipse(width / 4, height, bodyWidth / 4, height / 2);         
    ellipse(width * 3/4, height, bodyWidth / 4, height / 2); 

    //head
    if(on){                                //alternate head color on click
        fill(253, 222, 238);  //pink
    }else{
        fill(224, 243, 176);  //green
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  

    //eyes
    fill(r, g, b, 200);                                          
    var eyeLX = width / 2 - faceWidth * 0.25;                   
    var eyeRX = width / 2 + faceWidth * 0.25; 
    if(mouseX < width / 2){
        ellipse(eyeLX, height / 2, eyeSize, eyeHeight);               
        ellipse(eyeRX, height / 2, eyeSize, eyeHeight);
        fill(0);                                                                //pupils
        ellipse(eyeLX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        ellipse(eyeRX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        fill(255, 255, 255, 200);
        ellipse(eyeLX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);    //glare
        ellipse(eyeRX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);
    }else{
        if(on){                                //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(eyeLX - 10, height / 2, eyeLX + 10, height / 2);         //closing eyes when mouse is on right side
        line(eyeRX + 10, height / 2, eyeRX - 10, height / 2);
    }               

    //mouth
    if(mouseY > height / 2){
        fill(0);
        noStroke();
        circle(width / 2, 2/3 * height, 20, 20);                     //open mouth when below half
    }else{
        if(on){                       //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(2/5 * width, 2/3 * height, 3/5 * width, 2/3 * height);  
    }

    //nose
    noStroke();
    if(on){                           //alternate nose color on click
        fill(251, 182, 209);          //darker pink
    }else{
        fill(145, 210, 144);          //darker green
    }
    beginShape();
    curveVertex(1/5 * width, 4/5 * height); 
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(4/5 * width, 4/5 * height);
    endShape();

    //eyebrow
    if(on){                       //alternate eyebrow color on click
        stroke(251, 182, 209);    //darker pink
    }else{
        stroke(145, 210, 144);    //darker green
    }
    strokeWeight(3);
    if(mouseX < width/ 2){
        line(eyeLX - 10, eyebrowHeight - 10, eyeLX + 15, eyebrowHeight - 15);               
        line(eyeRX + 10, eyebrowHeight - 5, eyeRX - 15, eyebrowHeight - 15);
    }else{
        line(eyeLX - 10, eyebrowHeight - 30, eyeLX + 15, eyebrowHeight - 20);               
        line(eyeRX + 10, eyebrowHeight - 30, eyeRX - 15, eyebrowHeight - 20);
    }

}
 
function mousePressed() {
    if(on){                               //change background on click
        on = false;
    }else{
        on =true;
    }
    faceWidth = random(300, 500);         //with click, face width changes
    bodyWidth = random(375, 415);         //with click, shirt width changes along with arms
    faceHeight = random(200, 400);        //face height changes
    eyeSize = random(20, 80);             //eye size changes
    eyeHeight = random (20, 60);
    r = random(0, 255);                   //eye and shirt color change
    g = random (0, 255);
    b = random (0, 255);
    eyebrowHeight = random(180, 200);     //eyebrow position changes
}

Project-02-Variable Face

sketch

function setup() {
    createCanvas(640, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 300;
var mouthHeight = 230;
var noseHeight = 190;
 
var rface = 240;
var gface = 188;
var bface = 212;

var rmouth = 48;
var gmouth = 213;
var bmouth = 200;

var rnose = 62;
var gnose = 12;
var bnose = 94;

var reyes = 208;
var geyes = 255;
var beyes = 206;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);


    fill (rface,gface,bface);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill (reyes,geyes,beyes);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    fill(rmouth, gmouth, bmouth);
    arc (width/2, mouthHeight, 30, 10, TWO_PI, PI); //mouth

    fill (rnose, gnose, bnose);
    ellipse (width/2, noseHeight, 20); //nose
}
 
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(200, 350);
    eyeSize = random(10, 40);
    mouthHeight = random(210, 240);
    noseHeight = random (180, 200);
    rface = random (200, 290);
    gface = random (170, 200);
    bface = random (200, 240);

}

Variable Face

generative face

var x = 150;
var y = 220;
var faceWidth = 150;
var faceHeight = 200;
var hairLength = 180;
var mouthSize = 20;
var eyeL = 40;
var eyeW = 20;
var pupiL = 15;
var bgR = 225;
var bgG = 123;
var bgB = 138;
var bodThic = 100;



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

function draw() {

    //original face but made dependant on itself not coords make teh stuff in relation to the face width
    background(bgR, bgG, bgB);

    fill(0)
    rect(width/2-0.6*faceWidth, height/2-0.2*faceHeight, (width/2+0.6*faceWidth)-(width/2-0.6*faceWidth), hairLength)

    fill(255-bgR, 225-bgG,225-bgB);
    ellipse(width / 2, height, bodThic, height);

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2, height/2, faceWidth, faceHeight);    //face

    fill(0);
    quad(width/2-0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.6*faceWidth, height/2-0.2*faceHeight, width/2-0.6*faceWidth, height/2-0.2*faceHeight)    //trap bang

    fill(225,199,190);
    triangle(width/2, height/2 ,width/2-0.07*faceWidth,height/2+0.23*faceHeight,width/2+0.07*faceWidth,height/2+0.23*faceHeight);    //nose

    strokeWeight(3);
    stroke(239,94,94);
    noFill();
    ellipse(width/2, height/2+0.35*faceHeight, mouthSize);


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, eyeL, eyeW);    //eye left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, eyeL, eyeW);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, pupiL);   //pupil left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, pupiL);    // pupil right 

    fill(253,227,220);
   // rect((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, eyeW / 2);    //lids left
  
    fill(10)
    rect ((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left
    rect ((width/2+0.25*faceWidth) - (eyeL / 2), (height/2+0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left

}


function mousePressed(){
    faceWidth = random(75, 200);
    faceHeight = random(100, 300);
    hairLength = random(100, 300);
    mouthSize = random(5, 40);
    eyeL = random(20, 50);
    eyeW = random(10, 50);
    pupiL = random(5, 20);
    bgR = random(0, 225);
    bgG = random(0, 225);
    bgB = random(0, 225);
    bodThic = random(100, width);
}

aarnavp – Project 2 Variable Face

sketch

The pupils follows your cursor!

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var r = 220;
var g = 220;
var b = 220;
var faceW = 150; 
var faceH = 150;
var randomR = 221;
var randomG = 161;
var randomB = 119;
var eyeSize = 5;
var eyeGap = 50
var noseW = 30;
var noseH = 30;
var mouthType = 1;
var mouthSize = 50;
var bodyW = 200;


function draw() {

	background(r, g, b);
	//body
	fill(255 - r, 255 - g, 255 - b);
	ellipse(width / 2, height, bodyW, height);

	//face
	noStroke();
	fill(randomR, randomG, randomB);
	ellipse(width / 2, height / 2, faceW, faceH);

	//eye
	fill(255);
	ellipse((width / 2) - (eyeGap / 2), height / 2, eyeSize * 2);
	ellipse((width / 2) + (eyeGap / 2), height / 2, eyeSize * 2);
	fill(0);
	var y;
	if (mouseY >= (height / 2) + (eyeSize / 2)) {			//if pupil goes past top of eye
		y = min(mouseY, (height / 2) + (eyeSize / 2));
	} else if (mouseY  <= (height / 2) - eyeSize / 2) {		//if pupil goes past bottom of eye
		y = max(mouseY, (height / 2) - (eyeSize / 2));
	} else {												//if pupil is in eye gap
		y = height / 2;
	}

	var xL; 
	var xR;
	if (mouseX >= (width / 2) + (eyeGap / 2)) {								//if pupil goes past right eye
		xR = min(mouseX, (width / 2) + (eyeGap / 2) + (eyeSize / 2));
		xL = min(mouseX, (width / 2) - (eyeGap / 2) + (eyeSize / 2));
	} else if (mouseX <= (width / 2) - (eyeGap / 2)) {						//if pupil goes past left eye
		xL = max(mouseX, (width / 2) - (eyeGap / 2) - (eyeSize / 2));
		xR = max(mouseX, (width / 2) + (eyeGap / 2) - (eyeSize / 2));
	} else {																//if pupil is in eye gap
		xL = (width / 2) - (eyeGap / 2);
		xR = (width / 2) + (eyeGap / 2);
	}

	ellipse(xL, y, eyeSize);	//leftEye
	ellipse(xR, y, eyeSize);	//rightEye

	//nose
	fill(randomR - 20, randomG - 20, randomB - 20);
	ellipse(width / 2, (height / 2) + (faceH / 5), noseW, noseH);
	fill(randomR, randomG, randomB);
	ellipse(width / 2, (height / 2) + (faceH / 5) - 10, noseW, noseH);

	//mouth
	fill(0);
	if (mouthType <= 2 & mouthType >= 1) {
	    rect((width / 2) - (mouthSize / 2), (height / 2) + (faceH / 5) * 2, mouthSize, 3);
	} else {
		circle(width / 2, (height / 2) + (faceH / 5) * 2, mouthSize * 0.25);
	}

}

function mousePressed() {
	bodyW = random(width / 1.5, width / 3);

	faceW = random(width / 4, width / 2);
	faceH = random(height / 4, height / 2);

	randomR = random(150, 200);
	randomG = random(110, 130);
	randomB = random(70, 90);

	eyeGap = random(faceW / 2, faceW / 5);
	eyeSize = random(5, 20);

	noseW = random(20, 40);
	noseH = random(30, 50);

	mouthType = random(0, 2);
	mouthSize = random(faceW / 2, faceW / 10);

	r = random(255);
	g = random(255);
	b = random(255);

}