Project-02-Variable-Face

Project-02-Face

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//Project-02

var hairSpike = 100;
var skinColorR = 194;
var skinColorG = 141;
var cheekBone = 480;
var chinLength = 420;
var noseLength = 150;
var eyeX = 20;
var eyeY = 20;
var smileFactor = 350;


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

function draw() {
	background(165, 170, 247);
	//creates blue background
//HAIR
    noStroke();
    fill("yellow");
    beginShape();
    curveVertex(200, 200);
    curveVertex(200, 200);
    curveVertex(hairSpike, 50);
    curveVertex(200, 70);
    curveVertex(hairSpike+170, 10);
    curveVertex(305, 40);
    curveVertex(hairSpike+240, 5);
    curveVertex(350, 70);
    curveVertex(hairSpike+430, 30);
    curveVertex(500, 80);
    curveVertex(hairSpike+530, 140);
    curveVertex(200, 200);
    curveVertex(200, 200);
    endShape(CLOSE);
    //defines protruding points of hair

//bust
	noStroke();
	fill(200, 110, 40);
	beginShape();
	curveVertex(80, 480);
	curveVertex(80, 480);
	curveVertex(110, 410);
	curveVertex(300, 380);
	curveVertex(410, 410);
	curveVertex(550, 480);
	endShape(CLOSE);
	//draws bust

//FACE
	noStroke();
	fill(skinColorR, skinColorG, 159); 
	//defines skin color with a set blue value
	
	beginShape();
	curveVertex(240, 150);
	curveVertex(240, 150);
	curveVertex(300, 50);
	curveVertex(360, 100);
	curveVertex(cheekBone, 200);
	curveVertex(400, 300);
	curveVertex(300, chinLength); //defines lower end point of chin
	curveVertex(240, 380);
	curveVertex(noseLength, 200); //defines nose length
	curveVertex(240, 150);
	curveVertex(240, 150);
	endShape();
	//draws facial contour

	stroke(skinColorR/2, skinColorG/2, 159);
	strokeWeight(4);
	beginShape();
	curveVertex(240, 380);
	curveVertex(240, 380);
	curveVertex(noseLength, 200);
	curveVertex(300, 90);
	curveVertex(300, 90);
	endShape();
	//draws line around the nose

//EYES
	noStroke();
	fill(255);
	ellipse(300-(eyeX/2), 90, eyeX, eyeY);
	ellipse(300+(eyeX/2), 90, eyeX, eyeY);
	fill(0)
	ellipse(300-(eyeX/2), 90, 10, 10);
	ellipse(300+(eyeX/2), 90, 10, 10);
	//defines the size of eyes

//MOUTH
    stroke(255, 180, 0);
    fill(255, 100, 0);
    triangle(230, 300, smileFactor, 350, 310, smileFactor);
    //defines two poins of triangular mouth	
}

function mousePressed() {
	hairSpike = random(50, 150);
	skinColorR = random(0, 255);
	skinColorG = random(0, 255);
	cheekBone = random(400, 500);
	chinLength = random(400, 460);
	noseLength = random(70, 200);
	eyeX = random(10, 60);
	eyeY = random(10, 40);
	smileFactor = random(270, 380);
}

For this project, I tried to practice as much freedom I can with making the portrait. Compared to the first project, I now had a grasp of what JavaScript could manage to do, and expressed it with the random features of the “Ever-changing man”

Sarah Ransom Project-02-Variable-Face

sketch

//Sarah Ransom
//Section C 
//sransom@andrew.cmu.edu
//Self Portrait

var lefteyeHeight = 20
var righteyeHeight = 20
var faceHeight = 220
var noseHeight = 30
var mouthWidth = 30



function setup() {
    createCanvas(640, 480);
    background(255,204,150);
}

function draw() {
	noStroke();
	fill("brown");
	ellipse(200,280,60,300); //ponytail in the background

	noStroke();
	fill(255, 240, 173);
	ellipse(200,250,200,faceHeight); //face
	
	noStroke();
	fill("brown");
	arc(200, 230, 200, 180, PI, TWO_PI, OPEN); //bangs

	noStroke();
	fill("brown");
	ellipse(200,140,50,50); //"ponytail bump"

	noStroke();
	fill('#222222');
	ellipse(160,250,lefteyeHeight,30); // left eye

	noStroke();
	fill('#222222');
	ellipse(240,250,righteyeHeight,30); // right eye

	noStroke();
	fill("red");
	arc(200,280,noseHeight,40,0,PI); // nose

	noFill();
	stroke(0);
	strokeWeight(3);
	arc(210,320,mouthWidth,10,0,HALF_PI); //mouth

	noFill();
	stroke(0);
	strokeWeight(2);
	arc(160,265,20,7,0,PI); // left eye bag

	noFill(); // right eye bag
	stroke(0);
	strokeWeight(2);
	arc(240,265,20,7,0,PI);
}

function mousePressed() {
	lefteyeHeight = random(10,50);
	righteyeHeight = random(10,50);
	noseHeight = random(20,40);
	mouthWidth = random(10,70);
	

}

I wanted to avoid changing the head size since it fit perfectly with the hair so, instead, I went for making the facial features as variable as possible without changing their original colors. This resulted in eyes that change size independently of each other as well as the width of the nose and mouth changing at random.

mreyes-Project-02-Variable-Face

mreyes-project-02

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Assignment-01

// size and color variables
var eyeSize = 20;
var puiplilSize = 10

var faceWidth = 75;
var faceHeight = 100;

var noseHeight = 100
var noseWidth = 50

var mouthWidth = 20
var mouthHeight = 20
 
var r = 147
var g = 100
var b = 179 // pastel color pallet

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke()
    background(182,242,211);
    // face 
    fill(r,g,b)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //blush 1 
    var blushX = width / 2 + faceWidth * 0.25 - faceWidth / 2;
    var blushY = height / 2 + faceHeight * 0.25 ; 
    fill(g,b,r) // reverse for complimentary color
    ellipse(blushX + faceWidth / 1.25, blushY, mouthWidth, mouthHeight)
    //eye 1
    ellipse(blushX + faceWidth / 1.25, height / 2, eyeSize, eyeSize)
    fill(50)
    ellipse(blushX + faceWidth / 1.25, height / 2, puiplilSize, puiplilSize)
    //nose 
    fill(r,g,b)
    var noseX = width / 2 + faceWidth * 0.25;
    var noseY = height / 2 + faceHeight * 0.25
    ellipse(noseX, noseY, noseWidth, noseHeight);
    // blush 2 
    fill(g,b,r)
    ellipse(blushX, blushY, mouthWidth, mouthHeight)
    //eye 2
    noStroke()
    var eyeX = width / 2 - faceWidth * 0.25;
    fill(g,b,r) 
    ellipse(eyeX, height / 2, eyeSize, eyeSize);
    fill(50)
    ellipse(eyeX, height / 2, puiplilSize, puiplilSize) // the eyes and blush are sepperate so the nose over laps in a non awkward way
    // nose definition
    noFill()
    strokeWeight(3)
    stroke(100);
    var noseX1 = width / 2 + faceWidth * 0.25 ;
    var noseY1 = height / 2 + faceHeight * 0.40;
    var noseX2 = width / 2 + faceWidth * 0.25 - noseWidth / 2;
    var noseY2 = height / 2 + faceHeight * 0.40;
    var noseX3 = noseX1 - 10
    var noseY3 = noseY1 - 10
    curve(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3, noseX1, noseY1)   
}

function mousePressed() {
  
    mouthWidth = (70,20)
    mouthHeight = (70,20)

    noseHeight = random(150,70)
    noseWidth = random(70,20)

    faceHeight = random(100,200);
    faceWidth = random(75,150);

    puiplilSize = random(5,15)
    
    eyeSize = random(10,30);
    
    r = random (147,255)
    g = random(100,200)
    b = random(179,255)


}

I didn’t do a preliminary sketch for this project and just fiddled around with different shapes. this turned out to be unfruitful as I ended up spending a lot of time on trying to make sure things were not awkward. The arch for the nose was on of the hardest parts as I wanted the ellipse for the nose to change drastically and I had to fiddle with the variables a lot to make sure the curve stayed on the face.

Jiyoung Ahn-Project-02-Variable-Face

ahnjiface




var eyeSize = 25;
var pupilSize = 15
var faceWidth = 200;
var faceHeight = 200;
var mouthHeight = 50; 
var mouthWidth = 60;
var earSize = 30;
var hair = 70;
var hairColor = '#dc8ac6';
var otherColors = ['#dc8ac6', '#8adc9f', '8aa9dc'];


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

}
 
function draw() {
    background(255,188,72);

    //face
    fill(248,203,170);
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye
    fill(250);
    var eyeLX = width / 2 - faceWidth * 0.21;
    var eyeRX = width / 2 + faceWidth * 0.21;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupil
    fill(0);
    var pupilLX = width / 2 - faceWidth * 0.21;
    var pupilRX = width / 2 + faceWidth * 0.21;
    ellipse(pupilLX, height / 2, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2, pupilSize, pupilSize);

    //ear
    fill(248,203,170);
    var earLX = width / 2 - faceWidth * 0.53;
    var earRX = width / 2 + faceWidth * 0.53;
    ellipse(earLX, height / 2, earSize, earSize);
    ellipse(earRX, height / 2, earSize, earSize);

    //mouth
    fill(255,0,0);
    ellipse(width / 2, height / 2+40, mouthWidth,  mouthHeight);

    //hair
    fill(hairColor);
    ellipse(width / 2, height / 3, hair);
    ellipse(width / 2+60, height / 3+15, hair);
    ellipse(width / 2-60, height / 3+15, hair);
    ellipse(width / 2+100, height / 3+65, hair);
    ellipse(width / 2-100, height / 3+65, hair);


}

function mousePressed() {
    
    eyeSize = random(15, 30);
    pupilSize = random(5, 20);
    earSize = random(20, 40);
    mouthWidth = random(30, 70);
    mouthHeight = random(10, 50);
    hairColor = random(otherColors);
}

I tried to draw a face by using circles only.

Diana Connolly – Project 2

For this project, I took elements from my self portrait last week and changed it from a female face to a general male face form. I wanted to play around with the shape of the head, shape of the hair, smile, and hair style — as well as skin and hair colors. I was able to get the system to choose from specific colors, as opposed to any random color.

sketch

var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 250;
var noseWidth = 20;
var noseHeight = 20;
var mouthHeight = 80;
var skinTone = ["#dc9a7a"];
var hairTone = ["#5a372a"];
var hairStyleType = 'drawMowhawk';

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

function draw() {
    background(187,245,180);
    
    //Face
    noStroke();
    ellipseMode(CENTER);
	fill(skinTone);  
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //Ears
    noStroke();
    ellipse(width/2+faceWidth/2, height/2, 40, 50);
    ellipse(width/2-faceWidth/2, height/2, 40, 50);
    
    //Eyes
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;
    fill(0);
    ellipse(eyeLX, height / 2 + faceHeight*.01,  eyeSize, eyeSize*1.5);
    ellipse(eyeRX, height / 2 + faceHeight*.01,  eyeSize, eyeSize*1.5);

    hairStyle();

    //Nose
    var noseX = width/2;
    var noseY = height/2 + faceHeight/11;
    noStroke();
    fill(205, 138, 107);
    ellipse(noseX, noseY, noseWidth, noseHeight);

    //Brows
    fill(hairTone);
	quad(eyeRX - faceWidth/8, height/2 - faceHeight/10, eyeRX + faceWidth/10, height/2 - faceHeight/10, eyeRX + faceWidth/18, height/2 - faceHeight/7, eyeRX - faceWidth/8, height/2 - faceHeight/7);
	quad(eyeLX - faceWidth/8, height/2 - faceHeight/10, eyeLX + faceWidth/10, height/2 - faceHeight/10, eyeLX + faceWidth/10, height/2 - faceHeight/7, eyeLX - faceWidth/18, height/2 - faceHeight/7);

    //Mouth
    fill(159, 67, 55);
	arc(width/2, height/2 + faceHeight/5, 40, mouthHeight, TWO_PI, PI, OPEN);
    
    }

function hairStyle() {
    if (hairStyleType == 'drawPuffyHair') {
        drawPuffyHair();
    }
    else if(hairStyleType == 'drawMowhawk') {
        drawMowhawk();
    }
    else if(hairStyleType == 'drawBald') {
        drawBald();
    }
}

function drawPuffyHair() {
    //Puffy Hair
    fill(hairTone);
    ellipse(width/2-faceWidth/3, height/2-faceHeight/3, faceWidth/3, faceHeight/4);
    ellipse(width/2-faceWidth/5, height/2-faceHeight/2, faceWidth/3, faceHeight/4);
    ellipse(width/2, height/2-faceHeight/1.8, faceWidth/3, faceHeight/4);
    ellipse(width/2, height/2 - faceHeight/3, faceWidth/2, faceHeight/4);
    ellipse(width/2+faceWidth/5, height/2-faceHeight/2, faceWidth/3, faceHeight/4);
    ellipse(width/2+faceWidth/3, height/2-faceHeight/3, faceWidth/3, faceHeight/4);
}

function drawMowhawk() {
    //Mowhawk
    fill(hairTone);
    quad(width/2, height/2 - faceHeight/2.5, width/2 + 20, height/2 - faceHeight/2.05, width/2, height/2 - faceHeight/1.1, width/2 - 20, height/2 - faceHeight/2.05);
}

function drawBald() {
    //Bald
    noFill();
    stroke(255, 255, 255, 95);
    strokeWeight(15);
    arc(width/2 + faceWidth/2 - 90, (height/2 - faceHeight/2) + 65, 80, 80, PI+PI/2, 7.2*PI/4);
}


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(200, 250);
    faceHeight = random(200, 300);
    noseWidth = random(10, 30);
    noseHeight = random(10, 15);
    mouthHeight = random(10, 80);
    skinTone = random(["#dc9a7a", "#f3bea1", "#a66a49"]);
    hairTone = random(["#5a372a", "#bb852f", "#1e0a03"]);
    hairStyleType = random(['drawPuffyHair', 'drawMowhawk', 'drawBald']);
}

SiminLi Project 2

siminliproject02

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 02
var eyeSize = 20;
var faceWidth = 222;
var faceHeight = 260;
var a = 180;
var b = 160; //coordinates of drop 2
var k = 8; //size of drop 2
var i = 0;
var c = 175;
var d = 163;//coordinates of drop 1
var m = 18; //size of drop 1
var j = 0;
var noseHeight = 40;
var rd = 171;
var gn = 31;
var bl = 31;// RGB of lip color

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(193,222,239); //blue
    noStroke();
    
    fill(248,213,178); // arm
    triangle(0, 300, 0, 0, 550 ,0)
    
    fill(240,174,164); //mosquito bite
    ellipse( 150, 120, 30,  50); 
    fill(249,223,213 ); 
    ellipse( 150, 120, 6,  6); 

    fill(240,174,164); //mosquito bite
    ellipse( 300, 70, 40,  20); 
    fill(249,223,213 ); 
    ellipse( 299, 70, 6,  6); 

var noseY = height / 2 - noseHeight; //y of nose bridge point
var noseX = width / 2 - faceWidth * 0.5 - noseHeight * 0.3; //x ofnose tip
var nosey = height / 2 - faceHeight / 3; //y of nose tip
    fill(254,242,195 ); 
    triangle(noseX,nosey, width / 2, height / 2 - faceHeight / 2, width / 2, noseY);//nose
    
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face 

var eyeRX = width / 2 + faceWidth * 0.25; //positions the mouth
   
    fill(0) ; // eye liner
    arc(eyeRX, height / 2 - 30 , eyeSize + 17, eyeSize + 17,PI ,TWO_PI,CHORD);
    noStroke();
    fill(252,253,255)   ; // eye whites
    ellipse(eyeRX, height / 2 - 30, eyeSize, eyeSize);
    fill(0) ; // pupil
    arc(eyeRX, height / 2 - 30, eyeSize - 15, eyeSize - 15, QUARTER_PI,TWO_PI,PIE);
    

var mouthWidth = width / 2 - faceWidth * 0.25; //positions the mouth
    stroke(rd,gn,bl);
    strokeWeight(15.0);
    fill(228,95,136 )   ; //mouth
    ellipse(mouthWidth,height / 2 + 15,faceHeight / 4,faceWidth / 4);

    noStroke();          //blood drop 1
    fill(225,39,39);
    beginShape();
    curveVertex(c,  d);
    curveVertex(c + (1 / 2) * m,  d + m * 2);
    curveVertex(c + (3 / 4) * m,  d + m * 3);
    curveVertex(c,  d + 4 * m);
    curveVertex(c - (3 / 4) * m,  d + m * 3);
    curveVertex(c - (1 / 2) * m,  d + m * 2);
    endShape(CLOSE);
    d = d + 2.5; 
    j ++;  // so drop can return to origin
    if ( d > 420)
    { d = d - j * 2.5; 
        j = 0; }

    noStroke(); //(dark) blood drop 2
    fill(138,24,24);
    beginShape();
    curveVertex(a,  b);
    curveVertex(a + (1 / 2) * k,  b + k * 2);
    curveVertex(a + (3 / 4) * k,  b + k * 3);
    curveVertex(a,  b + 4 * k);
    curveVertex(a - (3 / 4) * k,  b + k * 3);
    curveVertex(a - (1 / 2) * k,  b + k * 2);
    curveVertex(a,  b);
    endShape(CLOSE);
    b = b + 2.9; 
    i ++; // so drop can return to origin
    if ( b > 420)
    { b = b - i * 2.9; 
        i = 0; }

    fill(0);
    text("this mosquito is hungry for blood..", 410, 465);
}
 
function mousePressed() {

    faceWidth = random(200, 300); //changes the shape of the face 
    faceHeight = random(200, 300);
    eyeSize = random( 12, 60); 
    noseHeight = random(30, faceHeight / 2 ); 
    rd = random(0, 255);
    gn = random(0, 255);
    bl = random(0, 255);
}

This project turned out very different from what I originally planned. I wanted to make a person with a nosebleed and when I got to making the nose, the pointy quality of it inspired me to make a mosquito sucking blood. I am very happy with my decision.

Shannon Case- Project 02- Variable Face

scase-project-02

// Shannon Case
// Section D
// scase@andrew.cmu.edu
// Project 02

//set variables
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 15;
var mouthY = 15;

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

function draw() {
    background(255,8,127); // makes the background hot pink

    //faceshape
    fill(238,90,200); //makes the face purple
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //creates the face
    
    //sets eye variables
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //eyes
    ellipseMode(RADIUS); 
    fill(255);  // Set fill to white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); 
    ellipseMode(CENTER); 
    fill(127,255,12); //makes pupils lime green
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);

    ellipseMode(RADIUS);  
    fill(255);  // Set fill to white
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
    ellipseMode(CENTER); 
    fill(127,255,12); // lime green color 
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //mouth
    fill(151,255,255); //fill the mouth blue
    ellipse((width/2)+10,(height/2)+30, mouthX, mouthY); //adds a mouth

    //eyebrows
    fill(255);
    rect(eyeLX-15, eyeLX-95, 30, 5); // left eyebrow
    rect(eyeRX-15, eyeRX-150, 30, 5); //right eyebrow

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(80, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 25);
    mouthX = random(1,20);
    mouthY = random(1,20);
}

For this project I started with the simple template given. I wanted to create a face that showed a surprised emotion, as it is surprising when the face changes with each click. I chose to show this with wide open eyes, an open mouth, and raised eyebrows, one slightly above the other. I chose to give the background and face fun colors to make a more interesting shape. The hardest part of this assignment for me was keeping the shapes on the face, as sometimes they tended to fly out into random places.

Isabella Hong-Project-02

ijhong02

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-02

// eye color and placement  
var I = 25;

// pupils 
var p = 15;

//eye color 
var eyeColorR = 255;
var eyeColorG = 255; 
var eyeColorB = 255;

//skin color 
var skinColorR = 255;
var skinColorG = 229;
var skinColorB = 180;

//nose color 
var nColorR = 255;
var nColorG = 229; 
var nColorB = 180;

//mouth size 
var m = 12;

//surprise lines thickness
var sl = 10;

  

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

function draw() {
	background(255);

	//face 
		noStroke();
		fill(skinColorR, skinColorG, skinColorB);
		ellipse(width / 2, height / 2.3, 200, 250);  
	
	//eyes
		noStroke();
		fill(eyeColorR, eyeColorG, eyeColorB);
		var ILX = width / 2 - 200 * 0.25; 
		var IRX = width / 2 + 250 * 0.25;
		ellipse(ILX - 40, height / 2.5, I, I + 10);
		ellipse(IRX - 80, height / 2.5, I, I + 10);

	//pupils 
		noStroke(); 
		fill(0);
		ellipse(ILX - 40, height / 2.5, p - 5, p + 5);
		ellipse(IRX - 80, height / 2.5, p - 5, p + 5);

	//nose
		stroke(255);
		strokeWeight(5);
		fill(nColorR, nColorG, nColorB);
		triangle(260, 260, 202, 240, 260, 200);

	//mouth
		noStroke();
		fill(231, 84, 128);
		ellipse(270, 280, m, m);


	//surprise lines 
		stroke(173, 216, 230);
		strokeWeight(sl);
		line(100, 100, 150, 150);
		line(550, 100, 450, 150);
		line(325, 60, 325, 5);
		line(460, 240, 580, 240);
		line(212, 100, 150, 15);

}	

function mousePressed(){
	//skin color changing
	skinColorR = random(250, 255);
	skinColorG = random(220, 255);
	skinColorB = random(180, 255);

	//eye color changing
	eyeColorR = random(0, 255);
	eyeColorG = random(0, 255);
	eyeColorB = random(0, 255);

	//eye size changing
	I = random(35, 70);

	//pupil size changing
	p = random(20, 30);

	//nose color changing
	nColorR = random(0, 255);
	nColorG = random(0, 255);
	nColorB = random(0, 255);

	//mouth size changing
	m = random(12, 60);

	//surprise lines thickness changing 
	sl = random(10, 25);
}

For Project 02, I decided to convey the emotion of surprise by assigning variables to various facial features and having them change to random colors and increase in size. I used the range 0-255 for all RGB colors to increase the unpredictability of what one would see after clicking upon the image.

The most difficult aspect of this project was making sure that I used all the variables correctly and my code was easily readable. Keeping my code organized was essential in order to ensure that I was changing the elements I intended to.

Project2-Variable-Face

sketch

//color
var colorA=255;
var colorB=240;
var colorC=178;
var skinA=242;
var eyeballcolorA=35;
var eyeballcolorB=39;
//size
var earsize=50;
var eyesize=88;
var nosesize=18;
var facesizeY=344;
var facesizeX=310;
//XY
var earY=276;
var eyeballLX=227;
var eyeballRX=eyeballLX+140;
var eyeballY=230;
var noseX=312;
var noseY=294;
var mouseLX=263;
var mouseLY=357;
var mouseRX=350;
var mouseRY=337;

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

function draw() {
    background(180);

    //hair   
    fill(colorA,colorB,colorC);
    noStroke();
    arc(320,254,420,425,2*PI,2*PI);

    //ears
    fill(247,skinA,216);
    ellipse(163,earY,earsize,earsize);
    ellipse(462,earY,earsize,earsize);

    //neck
    rect(245,369,140,155);

    //face
    stroke(220);
    strokeWeight(3);
    ellipse(312,260,facesizeX,facesizeY);

    //eyes
    fill(255);
    stroke(1);
    strokeWeight(2);
    ellipse(237,243,61,eyesize);
    ellipse(377,243,61,eyesize);

    //eyeballs
    fill(58,eyeballcolorB,eyeballcolorA);
    stroke(1);
    ellipse(eyeballLX,eyeballY,33,48);
    ellipse(eyeballRX,eyeballY,33,48);

    //nose
    noFill();
    stroke(1);
    ellipse(noseX,noseY,nosesize,nosesize);

    //mouse
    stroke(1);
    line(mouseLX,mouseLY,mouseRX,mouseRY);

    //hairban
    fill(colorA,colorB,colorC);
    noStroke();
    ellipse(396,125,150,75);

    //brows
    noFill();
    stroke(1);
    //browLeft
    beginShape();
    curveVertex(218,164);
    curveVertex(238,165);
    curveVertex(250,168);
    curveVertex(261,176);
    curveVertex(280,199);
    endShape();
    //browRight
    beginShape();
    curveVertex(350,193);
    curveVertex(351,190);
    curveVertex(354,184);
    curveVertex(364,176);
    curveVertex(375,171);
    curveVertex(403,167);
    endShape();
}

function mousePressed() {
	//color
	colorA = random(0,255);
	colorB = random(220,240);
	colorC = random(160,200);
	skinA = random(221,242);
	eyeballcolorA=random(0,255);
	eyeballcolorB=random(0,255);
	//size
	earsize = random(50,70);
	eyesize = random(80,120);
	nosesize=random(15,25);
	facesizeY=random(320,360);
	facesizeX=random(270,330);
	//XY
	earY = random(250,285);
	eyeballLX=random(227,250);
	eyeballRX=eyeballLX+140;
	eyeballY=random(230,250);
	mouseLX=random(265,290);
	mouseLY=random(340,365);
	mouseRX=random(340,360);
	mouseRY=random(325,360);
}

I used simple geometries to create this face. Hair colour, eye size, eyeball colour and size, mouth, nose and ears are set random each time mouse is clicked.

sketch

var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 300;
var BrowW = 30;
var BrowH = 5;
var MouthWidth = 60;
var MouthHeight = 5;
var AntW = 5;
var AntH = 100;
var AntB = 20
var cheek = 20
function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(150,200,255);
    // Ears
    fill(255,120,160);
    ellipse(width/2,height/2,faceWidth*1.3,faceHeight/3);
    // Antenna
    fill(200,90,230);
    rect(width/2-5,110,AntW,AntH);
    // Antenna Ball
    fill(180,180,255);
    ellipse(width/2,105,AntB,AntB);
    // Head
    fill(255,120,160);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.35;
    var eyeRX = width / 2 + faceWidth * 0.25;
    // Left Cheek
    fill(255,140,140);
    ellipse(width-310,height-300,cheek,cheek);
    // Right Cheek
    fill(255,140,140);
    ellipse(width-190,height-300,cheek,cheek);
    // Two Eyes
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, 10);
    fill(255,255,255);
    ellipse(eyeRX, height / 2, eyeSize, 10);
    //  Two Pupils
    fill(0);
    ellipse(eyeLX,height/2,5,10);
    fill(0);
    ellipse(eyeRX,height/2,5,10);
    // Eyebrows:
    // Left Eyebrow
    fill(200,100,130);
    rect(eyeLX/1.01,height/2.2,BrowW,BrowH);
    // Right Eyebrow
    fill(200,100,130);
    rect(eyeRX/1.11,height/2.2,BrowW,BrowH);
    // Mouth
    fill(200,90,230);
    rect(width/2.3,height/1.8,MouthWidth,MouthHeight);
    
    



}

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(150, 250);
    faceHeight = random(200, 380);
    eyeSize = random(40, 70);
    BrowW = random(30,35);
    BrowH = random(5,10);
    MouthHeight = random(5,8);
    MouthWidth = random(50,70);
    AntW = random(5,10);
    AntH = random(300,300);
    AntB = random(30,50);
    cheek = random(30,50);
}

Rather than making a human, I decided to make an alien (hence the antenna).I tried to not make it boring which is why I didn’t use regular skin tones.The hardest part was getting the facial features to actually stay on the head when it started randomizing, because they kept flying all over the place.