Category: Project-02-Variable-Face

Project 02-Variable-Face

sketchDownload
//Sofia Rolla
//Section D

var eyeSize = 20;
var pupilSize= 5;
var faceWidth = 150;
var faceHeight = 200;
var noseWidth = 20;
var noseHeight = 30;
var mouthSize = 40;

var faceR = 199
var faceG = 177
var faceB = 140

var pupilR = 112
var pupilG = 166
var pupilB = 233
  
var noseR = 200
var noseG = 190
var noseB = 170

var mouthR = 0
var mouthG = 0
var mouthB = 0





function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(170,10,90);
    //head
    fill(faceR, faceG, faceB)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(255)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //pupils
    fill(pupilR, pupilG, pupilB)
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    //nose
    var noseY = height / 2 + faceHeight* 0.15;
    fill(noseR, noseG, noseB)
    ellipse(width/2, noseY, noseWidth, noseHeight); 
    //mouth
    fill(mouthR, mouthG, mouthB)
    ellipse(width / 2, height / 2 + .4 * faceHeight, mouthSize, faceHeight/10)
    //hair
    arc(width / 2, height / 2-35, faceWidth+10,  faceHeight-10, PI,2*PI, PI);
   
 
}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(20, 40);
    pupilSize = random(5,15);
    noseWidth = random(5,20)
    noseHeight= random (10,30);
    mouthX = random (20, 50);
    faceR = random (170,230)
    faceG = random (50,200)
    faceB = random (50,200)
    mouthR = random (50,200)
    mouthB = random (50,200)
    mouthG = random (50,200)
    pupilR = random (50,200)
    pupilG = random (50,200)
    pupilB = random (50,200)
    noseR = random (50,200)
    noseG = random (50,200)
    noseB = random (50,200)
    
}

This was a difficult process for me. I struggled with finding the right variables and with setting proper variables for positions of certain facial features. I hope that this process will get easier as I keep learning.

Project 2

Work to test out variable colour, ratio, shapes and size of facial features.

Project 2 image

var eyeSize = 20;
var faceWidth = 110;
var faceHeight = 150;
var mouthWidth = 30;
var mouthHeighth = 10;
var earSize =30;
var bodyWidth =200;
var bodyHeight = 300;
var shirtColour= 90;
var faceTone= 220;
var eyeTone=115;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(208,223,250)
    strokeWeight(0);
    rect(0,0,640,200)
    stroke(139,163,187);
    strokeWeight(5);
    line(0,200,640,200)
//background 

    strokeWeight(2);
    stroke(22, 62, 104);
    fill(11,31,shirtColour)
    ellipse(width / 2, height / 1.10, bodyWidth,  bodyHeight);
//body 

    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    var earLX = width / 1 - faceWidth * 1.5;
    var earRX = width / 1 + faceWidth * 1.5;
    ellipse(width/2.4, height / 1.9, earSize, earSize);
    ellipse(width/1.7, height / 1.9, earSize, earSize);
//ear

    strokeWeight(2);
    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    noFill();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyeTone,80,30)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
//face and eye

    fill(255,140,85)
    square(width / 2.09, height / 1.9, mouthWidth);
    var mouth = width / 1.1 - faceWidth * 0.5;
//mouth
}
 
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(100, 145);
    faceHeight = random(120, 200);
    eyeSize = random(10, 28);
    mouthWidth = random(20,30);
    mouthHeighth = random(5,15);
    earSize= random(25,40);
    bodyWidth= random(200,300);
    bodyHeight= random(300,370);
    shirtColour= random (20,350);
    faceTone= random (190,225);
    eyeTone= random (70,150);
}

Project-02

This is my variable face

sketch
// Michael
// Section C

//Variables
//face
var faceWidth = 100;
var faceHeight = 100;
var faceround = 10
var randomSkin = 0
//background
var r = 140
var g = 200
var b = 230
//eye
var eyeBrow = 1
var browHeight = 10
var eyeSize = 20;
var pupilPos = 0
//moith
var mouthType = 1
var mouthLevel = 50
var noseType = 1
//hair
hairType = 1
stubble = 2
hairColor = 0

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    print (pupilPos.toString())
    //background color
    background(r, g, b);

    //Eye Variables
    //use facewidth to determine the eye positions
    var eyeLX = width / 2 - faceWidth * 0.2; 
    var eyeRX = width / 2 + faceWidth * 0.2;

    //hair color
    //Randomize hair color with different shades of grey
    fill(hairColor)

    //hair back
    //Two different thicknesses of hair
    //Use FaceWidth and faceHeight to determine the hair thickness
    if(hairType == 1){  //Thick Hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.2,  faceHeight*1.2);
        fill (r, g, b);
        rect(0, height/(faceHeight/60), width, height)
    } else if (hairType == 2) //Thin hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.1,  faceHeight*1.1);
        fill (r, g, b);
        rect(0, height/(faceHeight/53), width, height)

    //skincolor
    //4 different skin types
    //predetermined skin colors
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }   
    
    //ears

    ellipse(width/2 - faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    ellipse(width/2 + faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    fill(95, 44, 5)
    ellipse(width/2 - faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
    ellipse(width/2 + faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
  
    //Skin Color 
    //Randomize skin color 
    //Fill the skin colors again due to the fill command in the ears
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }  

    //neck
    //use facewidth to determin neck width
    rect(eyeLX - faceWidth/18, height/2, faceWidth/2, 70)

    //Face
    //Use to ellipses to draw the face
    strokeWeight(0)
    ellipse(width / 2, 1.15*height / 3, faceWidth,  faceHeight);
    ellipse(width / 2, 1.45*height / 3, faceWidth/1.25, faceHeight/1.25)
    fill(hairColor+30)

    //eyes
    //Use the eye positions variable to draw the eyes and the pupils
    fill(255)
    ellipse(eyeLX, 1.25*height / 3, eyeSize*1.3, eyeSize*1.3);
    ellipse(eyeRX, 1.25* height / 3, eyeSize*1.3, eyeSize*1.3);
    fill(0);
    //Use pupilPos to randomize the pupil position whenever mouse clicks
    ellipse(eyeLX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    ellipse(eyeRX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    

    //eyebrows
    //two different eyebrows, straight and curve
    if (eyeBrow == 1){ //Curve
        strokeWeight(5) //use eyesize to determin eyebrow position
        curve (eyeLX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeLX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, //browHeight to randomize brow when click
               eyeLX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeLX + eyeSize/3, height/2 - eyeSize/1.5)
        curve (eyeRX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeRX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, 
               eyeRX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeRX + eyeSize/3, height/2 - eyeSize/1.5)
        strokeWeight(0);
    } if  (eyeBrow == 2){ //straight
        rect (eyeLX-eyeSize/1.5 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
        rect (eyeRX-eyeSize/1.8 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
    }

    //mouth
    //5 different types of mouths
    //use faceHeight and width to determine mouth position
    if (mouthType <= 2){ // Open Mouth
        fill(255, 166, 193)
        ellipse(width/2, height/2 + faceHeight/mouthLevel, faceWidth/3, faceHeight/10)
        fill(255)
        ellipse(width/2, height/2.06 + faceHeight/mouthLevel, faceWidth/6, faceHeight/20)
    } else if (mouthType == 3){ //Meh face No. 1
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height*2.75/5)
        strokeWeight(0)
    } else if (mouthType == 4){// Straight Face
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if (mouthType == 5){//Meh face No.2
        strokeWeight(5);
         line(eyeLX, height*2.75/5, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if(mouthType == 6) {//Smile
        strokeWeight(4)
        noFill()
        curve (eyeLX - eyeSize/10, height/2.7 - faceHeight/20,
               eyeLX - eyeSize/10, 1.5*height/3 - faceHeight/50, 
               eyeRX + eyeSize/10, 1.5*height/3 - faceHeight/50,
               eyeRX + eyeSize/10, height/2.7 - faceHeight/20)
        strokeWeight(0)
    }
   
    //nose
    //two different types of noses
    //use faceheight and width to determine mouth position
    if(noseType == 1) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/5, faceWidth*0.05, faceHeight/5)
    } else if (noseType == 2) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/10, faceWidth*0.1, faceWidth*0.1)
    }

}


function mousePressed() {
    // Randomize the variables when the use clicks their mouse
    //Background color, high rgb for faded colors
    r = random (200, 250)
    g = random (200, 250)
    b = random (200, 250)
    //face
    //Max width less than max height
    faceWidth = random(100, 120);
    faceHeight = random(100, 150);
    //skin color
    randomSkin = int(random (0, 4)) 
    //eyes
    eyeSize = random(20, 28);
    browHeight = random(0, 10)
    eyeBrow = int(random(1, 3))
    pupilPos = random (0, 0.5)
    //mouth
    mouthType = int(random(1, 7))
    mouthLevel = random (6, 50)
    //hair
    hairColor = random (0, 100)
    stubble = int(random(0, 3))
    hairType = int(random(1, 3))
    //nose
    noseType = int(random(1, 3))
}

Project 02

sketch
sketch
// for my design, i tried to move the eye within the face and all the other sense organs go along with it.
// also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.
// in addition, the mouth also change the radian by itself.
// by having these, it can create a series of variation for the face.
var eyeSize = 30;
var faceWidth = 300;
var faceHeight = 200;
//variables for eyes
var eyeWidthVariation = 20;
var eyeHeightVariation = 10;
//variables for mouth
var mouthWidthShift = 10;
var mouthHeightShift = 15;
//color
var r = 243;
var g = 197;
var b = 194;
//eyeball movement
var movementX = 10;
var movementY = 10;
//eyebrow movement
var eyebrowChangeL = 5
var eyebrowChangeR = 5

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

function draw(){
    background(249, 233, 211);
    //face
    noStroke();
    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    
    //hair
    fill(r-20,g-20,b+30);
    rect(width/2- faceWidth/3, height/2-faceHeight/2-10,faceWidth/1.5,faceHeight/6)
    
    //noise
    noStroke();
    fill(r-50, g-50, b-50);
    ellipse(width / 2-eyeWidthVariation, height/2+2*eyeHeightVariation, 20, 30);
    
    //eyes socket
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25 - eyeWidthVariation;
    var eyeRX = width / 2 + faceWidth * 0.25 - eyeWidthVariation;
    
    //blush left
    fill(255,171,171);
    ellipse(eyeLX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    //blush right
    ellipse(eyeRX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    fill(r+50, g+50, b+50);
    ellipse(eyeLX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    
    //eyeball
    fill(0);
    ellipse(eyeLX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    
    //eyebrow left
    fill(0)
    rect(eyeLX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation/2);
    //eyebrow right
    rect(eyeRX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation/2);
    
    //mouth
    noFill();
    stroke(r-35, g-35, b-35);
    strokeWeight(6);
    beginShape();
    curveVertex(width/2 - mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    curveVertex(width/2 - mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2-eyeWidthVariation, height / 2 + faceHeight * 0.40);
    curveVertex(width/2 + mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2 + mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    endShape();
}

function mousePressed() {
    //face random
    faceWidth = random(200, 600);
    faceHeight = random(200, 460);
    //eye random
    eyeSize = random(30, 80);
    eyeWidthVariation = random(-50, 50);
    eyeHeightVariation = random(3, 25);
    //mouth random
    mouthWidthShift = random(-20, 20);
    mouthHeightShift = random(-20, 20);
    //color random
    r = random(51, 204);
    g = random(51, 204);
    b = random(51, 204);
    //eyeball random
    movementX = random(-eyeSize/4,eyeSize/4);
    movementY = random(-eyeSize/4,eyeSize/4);
    //eyebrown random
    eyebrowChangeL = random(0,30);
    eyebrowChangeR = random(0,30)
}

Project 02

This is my variable face project

this is my project

sketch
// Natalie Koch; Section A

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

function draw() {
    background(132,200,180);
    fill(0)
    ellipse(240,310,420,410) //back of hair
    fill(255,208,172)
    ellipse(90,350,50,70) //left ear
    ellipse(390,350,50,70) //right ear
    rect(175,400,125,200) //neck
    ellipse(width/2,height/2,300,350) //head
    fill(197,220,222) 
    rect(90,250,125,100) //left glasses lens
    rect(265,250,125,100) //right glasses lens
    fill(255,208,172) 
    rect(205,345,70,30) //nose
    fill(0)
    line(215,275,265,275) //glasses bridge
    line(190,420,290,420) //mouth
    rect(90,200,300,50) //bangs
    ellipse(240,175,275,100) //bangs
    fill(255)
    rect(140,260,65,20) //glasses light flare
    rect(315,260,65,20) //glasses light flare
    fill(81,89,66)
    ellipse(240,639,500,150) //shirt

if (mouseIsPressed) {
    background (180,39,8)
    fill(0)
    ellipse(240,310,420,410) //back of hair
    fill(255,208,172)
    ellipse(90,350,50,70) //left ear
    ellipse(390,350,50,70) //right ear
    rect(175,400,125,200) //neck
    ellipse(width/2,height/2,300,350) //head
    fill(33,13,5)
    ellipse(width/2,430,140,50) //mouth
    fill(255)
    rect(190,405,100,20) //teeth
    fill(0)
    rect(90,200,300,50) //bangs
    ellipse(240,175,275,100) //bangs
    fill(81,89,66)
    ellipse(240,639,500,150) //shirt
    fill(255)
    ellipse(155,300,70,60) //eye base
    ellipse(330,300,70,60) //eye base
    fill(0)
    ellipse(160,295,40,40) //pupil
    ellipse(325,295,40,40) //pupil
    fill(197,220,222)
    rect(90,320,125,100) //left glasses lens
    rect(265,320,125,100) //right glasses lens
    line(80,300,90,370) //left earpiece
    line(390,370,400,300) //right earpiece
    fill(255,208,172)
    rect(205,345,70,30) //nose
    fill(255)
    rect(140,330,65,20) //glasses light flare
    rect(315,330,65,20) //glasses light flare
    ellipse(170,290,20,20) //eye light flare
    ellipse(340,290,20,20) //eye light flare
    fill(70,43,15)
    ellipse(150,200,80,40) //eyebrows color
    ellipse(325,200,80,40) //eyebrows color
    fill(0)
    ellipse(150,210,70,30) //eyebrows cover
    ellipse(325,210,70,30) //eyebrows cover (i don't know how to code arcs!)
}
}

Project – 02

//Katie Makarska
//Section C

var eyeWidth = 20;
var eyeHeight = 20
var faceWidth = 100;
var faceHeight = 150;
var smileWidth = 80;
var smileHeight = 40;

function setup() {
createCanvas(300, 300);
bgColor = color( random(255), random(255), random(255));
}

function draw() {
background(bgColor);
//eyes
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 – faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
//smile
var smile1 = width/2 – faceWidth *0.01;
var smile2 = width/2 + faceHeight *0.25;
arc(smile1, smile2, smileWidth, smileHeight, 0, PI);

//random colors
r = random(50, 255);
g = random(100,200);
b = random(100, 200);

}

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(90, 150);
faceHeight = random(100, 200);
eyeWidth = random(10, 30);
eyeHeight = random(10, 30);
smileWidth = random(50, 80);
smileHeight = random(20, 40);
//random face color
fill(r, g, b);
//random background color
bgColor = color( random(255), random(255), random(255));

}

Project 2

project 2

sketch 

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 250;
var counter = 1;
var hatH = faceHeight/1.5;
var bodyR = 90;
var bodyG = 100;
var bodyB = 90;
var eyeY = 3;
var eyeX = 1;
var faceR = 90;
var faceG = 100;
var faceB = 90;
var hatR = 140;
var normFaceR = 255;
var normFaceG = 220;

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

function draw() {
    strokeWeight(1);
    stroke(0);
    background(20,160,190);
    if(counter >= 1 & counter < 2){
    //body
    fill(bodyR,bodyG,bodyB);
    circle(width/2,height-50,500);
}
    //face
    fill(normFaceR, normFaceG, 177);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;
    strokeWeight(3);
    fill(250,250,250);
    //eye
    ellipse(eyeLX, height / 2-10, eyeSize*2, eyeSize-5);
    ellipse(eyeRX, height / 2-10, eyeSize*2, eyeSize-5);
    fill(70,30,20);
    circle(eyeLX, height / 2-10, eyeSize/2, eyeSize/3);
    circle(eyeRX, height / 2-10, eyeSize/2, eyeSize/3);

   
//cowboy 
    if (counter >= 1 & counter < 2){
        noStroke();
        fill(hatR,75,0);
        rect(width/2-60,height/2-faceHeight/2-hatH,120,hatH)
        ellipse(width/2,height/2-faceHeight/2,faceWidth-50,40);
       //facial hair
        strokeWeight(5);
        stroke(140,110,100);
        noFill();
        curve( width/2-faceWidth/2 + 30, height/2 -100,
        width/2-faceWidth/2 + 50, height/2 -50,
        width/2-faceWidth/2 + 80, height/2 -50,
        width/2-faceWidth/2 + 110, height/2 -30);
        curve( width/2+faceWidth/2 + 30, height/2 -100,
        width/2+faceWidth/2 - 50, height/2 -50,
        width/2+faceWidth/2 - 80, height/2 -50,
        width/2+faceWidth/2 - 110, height/2 -30);
        stroke(200,20,30);
        fill(200,20,30);
        //mouth
        curve(width/2-faceWidth/2 + 110,height/2-70
        ,width/2-50,height/2+30
        ,width/2+50,height/2+30,
        width/2+faceWidth/2 ,height/2-30);
        //arms
        fill(20);
        stroke(10);
        strokeWeight(5);
        curve(width/2 - 150, height/2+100,
        width/2-200,height/2+150,
        width/2-100,height-20,
        width/2-40, height-50);
        curve(width/2 + 150, height/2+100,
        width/2+200,height/2+150,
        width/2+100,height-20,
        width/2+40, height-50);

    }

//alien
     if (counter >= 2 & counter < 3){
        strokeWeight(8);
        stroke(50,210,150);
        line(width/2,height/2-faceHeight/2, width/2, faceHeight/10+30);
        fill(mouseX,mouseY,mouseX);
        ellipse(width/2, faceHeight/10+30, faceWidth/5, faceHeight/3);
        fill(faceR,faceG,faceB);
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        //eye
        fill(0,50,10);
        noStroke();
        ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX, eyeSize*eyeY);
        ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY, eyeSize*eyeX);
        fill(0);
        ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX-5, eyeSize*eyeY-5);
        ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY-10, eyeSize*eyeX-10);
        //body
        stroke(0);
        strokeWeight(1);
        fill(0,faceG-80,faceB+50);
        triangle(150,height/2+150,width-150,height/2+150,width/2,height-20);
        //arms
        fill(0,200,0);
        stroke(0,200,0);
        strokeWeight(1);
        curve(width/2 - 60, height/2+100,
        width/2-200,height/2+150,
        width/2-30,height-80,
        width/2-40, height-50);
        line(width/2-30,height-80,width/2-50,height-60);
        curve(width/2 + 60, height/2+100,
        width/2+200,height/2+150,
        width/2+30,height-80,
        width/2+40, height-50);
        line(width/2+30,height-80,width/2+50,height-60);
        //mouth
        fill(20,200,200);
        strokeWeight(2);
        stroke(30,100,500);
        rect(width/2-faceWidth/6,height/2+faceHeight/6,faceWidth/3,faceHeight/20);

   }

   //crazy

    if(counter < 1){
        background(200,50,50);
        fill(200,50,90);
        ellipse(width / 2, height / 2, faceWidth+random(20,50),  faceHeight+random(20,50));
        fill(255);
        //body
        stroke(0);
        strokeWeight(1);
        fill(0,faceG-80,faceB+50);

        //

        fill(255);

       //eye
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        ellipse(eyeLX+30, height / 2-10, random(30,50),random(40,80));
        ellipse(eyeRX-30, height / 2-10, random(30,50),random(20,80));
        fill(random(10,80),random(100,255),random(150,255));
        ellipse(eyeLX+30, height / 2-10, random(30,50)-10,random(40,80)-10);
        fill(random(150,255),random(10,80),random(150,205));
        ellipse(eyeRX-30, height / 2-10, random(30,50)-10,random(20,80)-10);
        fill(random(30));
        ellipse(eyeLX+30, height / 2-10, 10,10);
        ellipse(eyeRX-30, height / 2-10, 10,10);
        //brows
        line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
        line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
        line(width/2+80,height/2-random(60,100),width/2+random(20,40),height/2-20);
        line(width/2+80,height/2-random(60,90),width/2+random(10,50),height/2-20);
        //nose
        fill(random(100,255),50,50);
        ellipse(width/2-10,height/2+30,10,20);
        ellipse(width/2+10,height/2+30,10,20);
        //mouth
        curve(width/2-faceWidth/2 + random(90,120),height/2+100
        ,width/2-50,height/2+random(60,80)
        ,width/2+50,height/2+random(60,70),
        width/2+faceWidth/2 ,height/2+random(90,120));
        //body
        fill(20,20,20);
        triangle(width/2,height/2+130, random(50,100),random(height-50,height),width-random(50,100),random(height-50,height));
        //arms
        curve(width/2 - 150, height/2-100,
        width/2-random(190,210),height/2-150,
        width/2-100,height-30,
        width/2-40, height-50);
        curve(width/2 + 150, height/2-100,
        width/2+200,height/2-150,
        width/2+random(90,110),height-30,
        width/2+40, height-50);
    }

}
 
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(300, 400);
    faceHeight = random(190,270);
    eyeSize = random(15, 30);
    counter = random(0,3);
    bodyR = random(100,110);
    bodyG = random(100,160);
    bodyB = random(30,150);
    faceR = random(20,80);
    faceG = random(100,250);
    faceB = random(100,110);
    eyeY = random(1,6);
    eyeX = random(0.5,2);
    hatR = random(100,255);
    normFaceR = random(210,255);
    normFaceG = random(190,220);
}

Project-02: Variable Faces; Face Variables

//Xinyi Du 
//15104 Section B

var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;

function setup() {
    createCanvas(300, 300);

}
 
function draw() {
    background(80);
    noStroke();

    // clothing
    fill(255-r, 255-g, 255-b);
    triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);

    fill(255, 229, 204);
    ellipse(width / 2, height / 2, face, face); // face

    fill(255, 229, 204);
    ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
    fill(255, 229, 204);
    ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
    fill(255, 102, 102);
    ellipse(width/2, height/2+face/4, mouth,); // mouth

    var eyeL = width/2 - face/4; // left eye
    var eyeR = width/2 + face/4; // right eye
    fill(64, 64, 64);
    ellipse(eyeL, height/2, eyes, eyes+5);
    ellipse(eyeR, height/2, eyes, eyes+5);

    //hairstyle
    fill(r, g, b);
    ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
    fill(r, g, b);
    // hair 1
    var x1 = width/2-hair/2;
    var y1 = height/2-face/2-hairDeco-hair;
    var x2 = width/2+hair/2;
    var y2 = height/2-face/2-hairDeco-hair;
    var x3 = width/2;
    var y3 = height/2-face/2-hairDeco/2;
    triangle(x1, y1, x2, y2, x3, y3);
    fill(r-30, g-30, b-30);
    ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
    ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3

    // hair 2
    var x1 = width/2-face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2-face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2-face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

    // hair 3
    var x1 = width/2+face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2+face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2+face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

}
 
function mousePressed() {
    face = random(80, 150);
    eyes = random(10, 20);
    ears = random(12, 30);
    mouth = random(10, 25);
    hairDeco = random(10, 30);
    hair = random(20, 50);
    r = random(10, 250);
    g = random(10, 250);
    b = random(10, 250);
    cloth = random(150, 300);
    //
}

Project – 02

sketch

sketch

//Leo Deng Section A

var eyeWidth = 20;
var eyeHeight = 20;
var faceWidth = 140;
var faceHeight = 160;
var LeyebrowX = 115;
var LeyebrowY = 125;
var ReyebrowXx = 185;
var ReyebrowYy = 125;
var mouthX = (300 / 2);
var mouthY = (300/2 + 40); 
var mouthW = 30;
var mouthH = 10;
var mouthStart = 90;
var mouthEnd = 195;
var on = -1;
var R = 255;
var G = 215;
var B = 0;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(233,150,122);
    strokeWeight(3);
    stroke(175,238,238);
    if (on == -1) {         //color flip from yellow to orange
        fill(R, G, B);
    } else if (on == 1) {
        fill(R, G - 100, 0);
    }
    triangle(0, 0, 125, 145, 145, 100);  //pointy design elements
    triangle(150, 0, 100, 145, 200, 145);
    triangle(299, 0, 185, 145, 100, 145);
    triangle(299, 150, 165, 100, 165, 195);
    triangle(0, 150, 135, 100, 135, 195);
    triangle(0, 299, 125, 155, 145, 200);
    triangle(150, 299, 100, 155, 200, 155);
    triangle(299, 299, 185, 155, 100, 155);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;           //local eye variables
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    line(LeyebrowX, LeyebrowY, 135, 125);                //eyebrows
    line(165, 125, ReyebrowXx, ReyebrowYy);
    ellipse(eyeLX, height / 2, eyeWidth * (2 / 3), eyeHeight);  //eyes
    ellipse(eyeRX, height / 2, eyeWidth * (2 / 3), eyeHeight);
    arc(mouthX, mouthY, mouthW, mouthH, mouthStart, mouthEnd, PIE);  //mouth

}
 
function mousePressed() {
    on = on * -1;
    // when the user clicks, these variables are reassigned to make the face look angry
    faceWidth = (faceWidth + 50);
    eyeWidth = (eyeWidth + 10);
    LeyebrowX = (LeyebrowX - 10);
    LeyebrowY = (LeyebrowY - 10);
    ReyebrowXx = (ReyebrowXx + 10);
    ReyebrowYy = (ReyebrowYy - 10);
    mouthX = (mouthX - 10);
    mouthH = (mouthH + 10);

if(faceWidth > 190) {
    // next 3 clicks changes from mischevious face to unsure face
        faceWidth = (faceWidth - 60);
        eyeWidth = (eyeWidth - 10);
        LeyebrowX = (LeyebrowX + 15);
        LeyebrowY = (LeyebrowY + 15);
        ReyebrowXx = (ReyebrowXx - 15);
        ReyebrowYy = (ReyebrowYy + 15);
        mouthX = (mouthX + 5); 
        mouthW = (mouthW + 10);
        mouthH = (mouthH - 10);
        mouthStart = 0;
        mouthEnd = PI + QUARTER_PI;

    }

if(faceWidth < 160) {
    //return to original face
eyeWidth = 20;
eyeHeight = 20;
faceWidth = 140;
faceHeight = 160;
LeyebrowX = 115;
LeyebrowY = 125;
ReyebrowXx = 185;
ReyebrowYy = 125;
mouthX = (300 / 2);
mouthY = (300/2 + 40);
mouthW = 30;
mouthH = 10;
mouthStart = 90;
mouthEnd = 195;
on = -1;
R = 255;
G = 215;
B = 0;
}
}