Project-02-Variable-Face – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 2 – Portrait Variables

For my project, I chose to make very cartoonish but expression filled “blumans”. These little characters are portraits that change face shape, expression, and proportions based on the code below.

csavitzv_02

    //Cole Savitz-Vogel
    //Section A

    //Variability includes, Face Hight and Width, Eye Size, Eye Seperation, Eyebrow Position, Pupil Proportions, Mouth Size, Mouth Position, Smile Ratio, Skin Tone 

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 100;
var eyeWidth = .25
var mouthSize = 50;
var mouthDrop = 0;
var smile = 5;
var inBrow = 0;
var outBrow = 0;
var skinR = 200;
var skinG = 200;
var skinB = 250;

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

function draw() {
    background(255);
    fill(skinR,skinG,skinB)
    strokeWeight(0);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill(0);
    var mouth = width / 2 + faceWidth;
    arc(width / 2, (height / 2)+mouthDrop, mouthSize, mouthSize, 0, PI, OPEN);
    fill(skinR,skinG,skinB)
    arc(width / 2, (height / 2) + mouthDrop - 1, mouthSize - 1, mouthSize - smile, 0, PI, OPEN);
    var eyeLX = width / 2 - faceWidth * eyeWidth;
    var eyeRX = width / 2 + faceWidth * eyeWidth;
    fill(250);
    ellipse(eyeLX, height / 2, eyeSize + 4);
    ellipse(eyeRX, height / 2, eyeSize + 4);
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize - 2);
    ellipse(eyeRX, height / 2, eyeSize - 2);
    strokeWeight(10);
    line(eyeLX - inBrow, (height / 2) - 20, eyeLX + 20,(height / 2)- outBrow);
    line(eyeRX + inBrow, (height / 2) - 20, eyeRX - 20,(height / 2)- outBrow);
}
 
function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(100, 160);
    eyeSize = random(10, 30);
    eyeWidth = random(.2,.6);
    mouthSize = random(30,70);
    mouthDrop = random(0,40);
    smile = random(.1,50);
    inBrow = random(10,25);
    outBrow = random(10,25);
    skinR = random(100, 200);
    skinG = random(100, 200);
    skinB = random(200, 250);
    
}

Project – 02-Variable Face

sketch

// Emily Franco
// efranco
// Section C

//color only randomized when page is loaded
var x = 0;

//-----SLIDER VARS-----
//stores latest mouseX position for slider
var xPos;
//stores past x positions
var pastXPos=0;
//bar height
var barH = 20;
//bar height
var barWidth = 10;
//tracks if mouse has been pressed
var pressed = 0;

//-----DEFAULT FACE VARS----
var eyeWidth = 16;
var eyeHeight = 24;

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

function draw() {
	//reference for position of face elements
	var y_ref_pos = width/2.5;
	strokeWeight(0);
	background (138,176,162);	

	//header 
	fill(0);
	textSize (20);
	text ('Slide the arrow to pick a face for me.',10,barH+barWidth+20);

	//----EMOTION METER----
	//meter sliderer mark
	fill("black");
	triangle (((width/5)*2)+(width/10),barH-2,((width/5)*2)+(width/10)-3,barH-7,((width/5)*2)+(width/10)+3,barH-7);
	if (mouseIsPressed){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos=mouseX,barH-2,mouseX-3,barH-7,mouseX+3,barH-7);
		pressed = 1;
	}else if (pressed==1){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos,barH-2,xPos-3,barH-7,xPos+3,barH-7);
	}
	
	//meter
	fill (85,180,220); //blue
	//very happy
	rect(0,barH,(width/5),barWidth);
	//happy
	fill(193,230,90); //green
	rect(width/5,barH,(width/5),barWidth);
	//meh...
	fill(225,181,37); //yellow
	rect((width/5)*2,barH,(width/5),barWidth);
	//shock
	fill(252,65,18); //red
	rect((width/5)*3,barH,(width/5),barWidth);
	//angry
	fill(137,5,5); //dark red
	rect((width/5)*4,barH,(width/5),barWidth);

	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,260,400);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-32+44,y_ref_pos+158,280,70,Math.PI,0);
	//shirt 
	rect((width/2)-87,y_ref_pos+140,181,180);

	//------DEFALUT FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-106,y_ref_pos,32,60);
	ellipse ((width/2)+106,y_ref_pos,32,60);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)+1, y_ref_pos+130,90,60);
	strokeWeight (0);
	rect((width/2)-44, y_ref_pos+90,90,40);
	//base face
	stroke("black");
	strokeWeight (.5);
	ellipse (width/2,y_ref_pos,200,232);

	if (pressed == 1){
	//nose 
	strokeWeight (0);
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-20,(width/2)-20,y_ref_pos+40, width/2,y_ref_pos+38);
	}

	//-----EXPRESSIONS----
	//mouse position over emotion meter changes face expression
	//VERY HAPPY
	if (xPos<width/5){
			//outter eye
			strokeWeight (0.25);
			fill (242,239,234); //white
			stroke (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+40);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+40);
			//eye pupil
			fill (58,37,22);  //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+30);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+30); 
			//eye highlight
			fill (242,239,234); //white
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
			//eye small highlights
			fill (242,239,234); //white
			ellipse ((width/2)-56,y_ref_pos-30,eyeWidth-10);
			ellipse ((width/2)+56,y_ref_pos-30,eyeWidth-10); 
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+55,80,50,0,3.15);
			line ((width/2)+38,y_ref_pos+55,(width/2)-42,y_ref_pos+55);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+54,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//HAPPY
		else if (xPos<(width/5)*2 & xPos>=width/5){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-20,eyeWidth,eyeHeight);
			ellipse ((width/2)+44,y_ref_pos-20,eyeWidth,eyeHeight);
			//mouth
			strokeWeight (1);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+70,20,14,0,3);	
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
		} 
		//MEH
		else if (xPos<(width/5)*3 & xPos>=(width/5)*2){
			//mouth 
			strokeWeight (1);
			stroke("black");
			line ((width/2)+40,y_ref_pos+65,(width/2)-40,y_ref_pos+65);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
			//outter eye
			fill (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
		}
		//SHOCK 
		else if (xPos<(width/5)*4 & xPos>=(width/5)*3){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			ellipse ((width/2)+44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+95,40,90,3.15,0);
			line((width/2)+18,y_ref_pos+95,(width/2)-22,y_ref_pos+95);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+60,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//ANGRY
		else if (xPos>(width/5)*4){
			//eyes 
			fill (58,37,22); //dark brown
			arc((width/2)-50,y_ref_pos-20,50,25,0,3.15);
			arc((width/2)+50,y_ref_pos-20,50,25,0,3.15);
			//eyebrows
			strokeWeight (3);
			stroke(58,37,22); //dark brown
			line ((width/2)-75,y_ref_pos-35,(width/2)-25,y_ref_pos-25);	
			line ((width/2)+75,y_ref_pos-35,(width/2)+25,y_ref_pos-25);	
			//mouth
			strokeWeight (2);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+80,30,40,3.1,0);
		
		}

	//------BODY-----
	//shoulders
	strokeWeight (0);
	fill (238, 217, 197); //beige
	circle((width/2)-120, y_ref_pos+182,80);
	circle((width/2)+126, y_ref_pos+180,80);
	//arms
	rect((width/2)-160,y_ref_pos+180,80,140);
	rect((width/2)+86,y_ref_pos+180,80,140);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-114,y_ref_pos+30,16); 
	square ((width/2)+100,y_ref_pos+30,16);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-230, y_ref_pos+140,40,150);
	rotate (1.7);
	ellipse (width/2-5, y_ref_pos-330,40,150);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	x=x+30;
	if (x==30) {
		stroke(r=random(200),g=random (200),b=random(200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+50,y_ref_pos-60,(width/2)+80,y_ref_pos-80);
	//shirt details
	strokeWeight(8);
	stroke(r,g,b);
	point(width/2, y_ref_pos+200);
	

}

Project 02- Variable Faces

efleischer -02 – project

/* 
    eliana fleischer
    efleisch
    section e
*/

//Global variables to be used across different functions
//these are all the variables that will be used to make the initial face before randomization.

var eyewidth = 20;
var eyeheight = 20;
var faceshape = 1;
var facewidth = 200;
var faceheight = 200;
var eyecolorR = (15);
var eyecolorG = (255);
var eyecolorB = (100);
var noseheight = 5;
var nosewidth = 5;
var iris = 10;
var skinR = 100;
var skinG = 100;
var skinB = 100;
var x = 320;
var y = 240;


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

function draw() {

    background(eyecolorR, eyecolorG, eyecolorB); // sets background to the random variables for the eye color
    //faces 
    push();
    fill(skinR,skinG, skinB);
    noStroke()
    if (faceshape == 1){

        face1 = ellipse(x,y, facewidth, faceheight); //draws ellipse face

    } else {

        face2 = rect(x - facewidth /2 , y - faceheight /2 , facewidth , faceheight); //draws square face
    }

    //nose
    fill(255, 204, 255)
    nose = ellipse(x, y, noseheight, nosewidth); //draws nose at the center of the face
    pop();

    //eyes
    fill(255); //white fill for irises
    strokeWeight(2); // outline for eyes
    Leye = arc(x - facewidth / 5, y - faceheight / 5, eyewidth, eyeheight, 0, PI + QUARTER_PI, OPEN); //draws left eye
    Reye = arc(x + facewidth / 5, y - faceheight / 5, eyewidth, eyeheight,100, PI + QUARTER_PI, OPEN); //draws right eye

    //iris
    fill(eyecolorR, eyecolorG, eyecolorB); // fills in the irises with the random eye color
    Riris = ellipse(x + facewidth / 5, y - faceheight / 5, iris, iris)
    Liris = ellipse(x - facewidth / 5, y - faceheight / 5, iris, iris);

    //mouth
    strokeWeight(1);
    mouth = line(x - facewidth / 5, y + faceheight / 5, x + facewidth / 5, y + faceheight / 5 );

}


function mousePressed() {

    // when the user clicks, these variables are reassigned


    facewidth = random(100, 200);
    faceheight = random(100, 200);
    eyewidth = random(15, 45);
    eyeheight = random(10, 45);
    nosewidth = random(5,15);
    noseheight = random(5,15);
    iris = random(1, 7);
    eyecolorR = random(0,255);
    eyecolorG = random(0,255);
    eyecolorB = random(0,255);
    faceshape = int(random(1,3));
    skinR = random(100,200);
    skinG = random(100,200);
    skinB = random(100,200);
}

The most difficult part of this project for me was figuring out a creative solution to increase variability and actually make unique and distinct images through randomization.

project 02: variable faces

m’s project 2

/* atayao
    lab section E
    project 2
*/

// random reassignment (RR)
var eyeSize = 20;
var eyeDistance = 0.20;
var faceWidth = 115;
var faceHeight = 105;

// pick a card, any card (PAC)
var mouth = 0;
var skin = 0;

// variables from canvas dimensions
var x = 320;
var y = 240;

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

function draw() {
    background(255);
    strokeWeight(2.5);
    /* if-else statements test for the current value of 
    PAC variables to fill in skin color, mouth, & any facial marks.*/

    // SKIN COLORS
    if (skin == 0) {
        // bright blue skin
        fill(33, 118, 255);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 1) {
        // pink skin
        fill(255, 79, 170);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 2) {
        // green skin
        fill(136, 212, 38);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 3) {
        // orange skin
        fill(255, 117, 43);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 4) {
        // turquoise skin
        fill(2, 206, 217);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else {
        // yellow skin
        fill(255, 228, 56);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    }   

    // MOUTH SHAPES
    if (mouth == 0) {
        // open mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/6); 
    } else if (mouth == 1) {
    // neutral mouth
        line((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4));
    } else if (mouth == 2) {
    // smiling mouth
        fill(255);
        triangle((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4), x, (y + faceHeight/3));
    } else {
    // dot mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/25); 
    }

    // EYES
    var eyeLX = width / 2 - faceWidth * eyeDistance;    // x-coordinate for left eye
    var eyeRX = width / 2 + faceWidth * eyeDistance;    // x-coordinate for right eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);    // left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);    // right eye
    fill(0);
    ellipse(eyeLX, height/2, eyeSize/2, eyeSize/2);    // left pupil
    ellipse(eyeRX, height/2, eyeSize/2, eyeSize/2);    // right pupil
    fill(0);
}

function mousePressed() {
    /* when the mouse is clicked, variables are reassigned to random values within
    specified ranges. */

    // RR
    eyeSize = random(18, 35);
    eyeDistance = random(0.20, 0.28);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);

    // PAC
    skin = int(random(0, 6)); 
    mouth = int(random(0, 4));
    cheeks = int(random(0, 6));
}

The most challenging and interesting part of this project for me was figuring out the maximum random variability possible to create interesting combinations while still making the overall images legible as faces.

Project-02: Variable Faces; Face Variables

P2 Shirley

sketch

//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);
    //
}

project2-variable face

sketch

PROJECT 02: VARIABLE FACES

For this project I wanted to make a fun character that dances every time you click it!

sketch

Variable Faces

This project was extremely difficult for me because I kept making tiny mistakes which absolutely broke my code. This was definitely a learning experience, and towards the end I had more fun creating.

sketch

// Kathy Lee
//Section D

// Variable Setup
var faceHeight = 200;
var faceWidth = 200;
var shirt = 200;
var eye = 50;
var mouth = 50;

// Color Variables
var r = 50;
var g = 50;
var b = 50;

// mouthsize, hair length, eyesize

function setup() {
    createCanvas(640, 480);
    text("Smiling Alien", 10, 15);
}

function draw() {
    background (220);
    noStroke();

    // Shirt
    fill(200 - r, 200 - g, 200 - b);
    ellipse((width / 2), (height / 2) + 200, shirt + 100, shirt * 1.5);

    // Face
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 50, faceWidth, faceHeight);

    // Eyes
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2.5) + 25, height / 2, faceWidth - 150, eye); // left eye
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2) + 40, height / 2, faceWidth - 150, eye); // right eye
    fill("black");
    ellipse((width / 2.5) + 20, height / 2, faceWidth - 200, eye - 30); // left pupil
    fill("black")
    ellipse((width / 2.5) + 110, height / 2, faceWidth - 200, eye - 30); // right pupil
    
    // Mouth
    fill(r + 175, g + 175, b + 175);
    ellipse(width / 2, (height / 2) + 75, mouth + 50, mouth / 2);
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 70, mouth + 50, mouth / 2); // top ellipse to make smiling mouth

}

function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    shirt = random(200, 300);
    eye = random(50, 60);
    mouth = random(50, 150);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

Kaitlyn Project 2- Section A

Project 2

While I was creating this, I just thought of the things that could change and added as I went. The first things that came to mind were doing things with the eyes because unfilled they looked a bit creepy. But then I added hair and thought it would be fun to have other things pop up.

Project – 02

I started by trying to make the original face a more cartoonish version of my self-portrait from the first week. After that, I started to play around with different variables and changes that I could make with the drawing. My favorite part of the project is being able to color in the background when the user presses a key.

sketch

//Nakshatra Menon 
//Section C 

var centerOfFaceX = 278;
var centerOfFaceY = 377;
var faceHeight = 470
var faceWidth = 374
var centerOfEyeLX  = 220; 
var centerOfEyeY = 347;
var centerOfEyeRX = 408;
var eyeWidth = 92;
var eyeHeight = 62; 
var hair = 1;
var mouth = 1;
var value1 = 130;
var value2 = 15;
function setup() {
    createCanvas(480, 640);
    background(0);
}

function draw() {
        if(// when the mouse is pressed --> realistic face 
        mouseIsPressed==true){
        background(0)
        noStroke();
        fill(60, 20, 54);                //purple1 
        beginShape();
            vertex(207, 139);
            vertex(323, 130);
            vertex(344, 450);
            vertex(323, 523);
            vertex(280, 605);
            vertex(186, 576);
            vertex(126, 521);
            vertex(104, 469);
            vertex(89, 367);
        endShape(CLOSE);
        fill(76, 28, 90);                //purple2
        beginShape();
            vertex(323, 130);
            vertex(312, 370);
            vertex(287, 329);
            vertex(281, 336);
            vertex(292, 356);
            vertex(298, 348);
            vertex(346, 461);
            vertex(323, 531);
            vertex(280, 605);
            vertex(133, 504);
            vertex(104, 310);
            vertex(126, 377);
            vertex(133, 356);
            vertex(152, 351);
            vertex(205, 365);
            vertex(188, 328);
            vertex(189, 309);
            vertex(165, 292);
            vertex(172, 255);
            vertex(204, 212);
            vertex(204, 183);
            vertex(226, 146);
            vertex(276, 146);
        endShape(CLOSE);
        fill(126, 53, 79);                 //purple3
        beginShape();
            vertex(325, 131);
            vertex(226, 162);
            vertex(187, 280);
            vertex(207, 287);
            vertex(202, 326);
            vertex(226, 375);
            vertex(159, 366);
            vertex(131, 414);
            vertex(195, 482);
            vertex(197, 493);
            vertex(178, 506);
            vertex(207, 533);
            vertex(226, 529);
            vertex(212, 483);
            vertex(234, 484);
            vertex(255, 471);
            vertex(276, 477);
            vertex(269, 444);
            vertex(288, 415);
            vertex(305, 407);
            vertex(305, 429);
            vertex(283, 424);
            vertex(279, 445);
            vertex(302, 449);
            vertex(315, 441);
            vertex(336, 459);
            vertex(325, 471);
            vertex(288, 476);
            vertex(297, 490);
            vertex(284, 496);
            vertex(306, 547);
            vertex(254, 559);
            vertex(266, 591);
            vertex(299, 620);
            vertex(356, 611);
            vertex(425, 458);
            vertex(304, 318);
            vertex(309, 369);
            vertex(291, 379);
            vertex(278, 319);
            vertex(303, 319);
        endShape(CLOSE);

        fill(78, 34, 6);                     //brown1
        beginShape();
            vertex(150, 315);
            vertex(147, 296);
            vertex(203, 285);
            vertex(278, 303);
            vertex(274, 312);
            vertex(194, 309);
            vertex(165, 319);
            vertex(150, 315);
        endShape(CLOSE);
        beginShape();
            vertex(358, 349);
            vertex(374, 302);
            vertex(444, 274);
            vertex(444, 331);
            vertex(440, 342);
            vertex(450, 366);
            vertex(448, 444);
            vertex(427, 476);
            vertex(417, 525);
            vertex(380, 573);
            vertex(221, 490); 
            vertex(253, 498);
            vertex(389, 489); 
        endShape(CLOSE);
        beginShape();
            vertex(138, 538);
            vertex(181, 573);
            vertex(284, 606); 
            vertex(296, 618);
            vertex(312, 618);
            vertex(343, 742); 
            vertex(115, 742); 
        endShape(CLOSE); 
        fill(130, 69, 20);                        //brown2
        beginShape();
            vertex(207, 285);
            vertex(222, 285);
            vertex(292, 303);
            vertex(303, 315);
            vertex(257, 315); 
            vertex(255, 323);
            vertex(280, 337);
            vertex(276, 343);
            vertex(249, 323);
            vertex(227, 323);
            vertex(222, 306);
            vertex(276, 312);
            vertex(278, 303);
        endShape(CLOSE)
        beginShape();
            vertex(245, 326);
            vertex(284, 351);
            vertex(284, 358);
            vertex(262, 341);
            vertex(240, 330);
        endShape(CLOSE);
        beginShape();
            vertex(236, 337);
            vertex(248, 337);
            vertex(264, 349);
            vertex(262, 352);
            vertex(235, 352);
            vertex(239, 346);
        endShape(CLOSE);
        beginShape();
            vertex(222, 360);
            vertex(264, 355);
            vertex(284, 360);
            vertex(278, 369);
            vertex(249, 377);
            vertex(242, 364);
        endShape(CLOSE);
        beginShape();
            vertex(373-30, 365-50);
            vertex(415-30, 319-50);
            vertex(473-30, 332-50);
            vertex(470-30, 337-50);
            vertex(438-30, 339-50);
            vertex(408-30, 353-50);
            vertex(460-30, 345-50);
            vertex(474-30, 356-50);
            vertex(461-30, 374-50);
        endShape(CLOSE);
        triangle(386-30, 374-50, 388-30, 400-50, 411-30, 372-50);
        beginShape();
            vertex(421-30, 373-50);
            vertex(440-30, 373-50);
            vertex(447-30, 379-50);
            vertex(421-30, 378-50);
        endShape(CLOSE);
        beginShape();
            vertex(422-30, 384-50);
            vertex(421-30, 392-50);
            vertex(424-30, 400-50);
            vertex(412-30, 406-50);
            vertex(413-30, 414-50);
            vertex(404-30, 416-50);
            vertex(399-30, 408-50);
            vertex(392-30, 406-50);
            vertex(404-30, 541-50);
            vertex(420-30, 539-50);
            vertex(403-30, 562-50);
            vertex(392-30, 548-50);
            vertex(356-30, 552-50);
            vertex(361-30, 559-50);
            vertex(351-30, 561-50);
            vertex(344-30, 568-50);
            vertex(312-30, 565-50);
            vertex(312-30, 573-50);
            vertex(324-30, 576-50);
            vertex(342-30, 596-50);
            vertex(355-30, 600-50);
            vertex(356-30, 660-50);
            vertex(321-30, 666-50);
            vertex(327-30, 670-50);
            vertex(384-30, 664-50);
            vertex(402-30, 643-50);
            vertex(421-30, 578-50);
            vertex(440-30, 558-50);
            vertex(452-30, 526-50);
            vertex(473-30, 489-50);
            vertex(478-30, 416-50);
            vertex(442-30, 400-50);
            vertex(447-30, 390-50);
            vertex(439-30, 384-50); 
        endShape(CLOSE);

        fill(183, 95, 53);        //orange1 
        beginShape();
            vertex(237-30, 324-50);
            vertex(259-30, 225-50);
            vertex(352-30, 189-50);
            vertex(461-30, 259-50);
            vertex(473-30, 289-50);
            vertex(473-30, 327-50);
            vertex(404-30, 349-50);
            vertex(392-30, 359-50);
            vertex(422-30, 359-50);
            vertex(460-30, 349-50);
            vertex(460-30, 369-50);
            vertex(386-30, 380-50);
            vertex(401-30, 422-50);
            vertex(429-30, 417-50);
            vertex(420-30, 410-50);
            vertex(440-30, 406-50);
            vertex(444-30, 415-50);
            vertex(461-30, 413-50);
            vertex(470-30, 424-50);
            vertex(470-30, 485-50);
            vertex(452-30, 513-50);
            vertex(430-30, 506-50);
            vertex(427-30, 523-50);
            vertex(404-30, 547-50);
            vertex(351-30, 552-50);
            vertex(337-30, 544-50);
            vertex(345-30, 529-50);
            vertex(362-30, 526-50);
            vertex(375-30, 513-50);
            vertex(351-30, 493-50);
            vertex(348-30, 469-50);
            vertex(354-30, 456-50);
            vertex(356-30, 435-50);
            vertex(347-30, 414-50);
            vertex(322-30, 353-50);
        endShape(CLOSE);
        beginShape();
            vertex(339-30, 572-50);
            vertex(389-30, 563-50);
            vertex(391-30, 570-50);
            vertex(376-30, 591-50);
            vertex(359-30, 595-50);
            vertex(341-30, 583-50);
        endShape(CLOSE);
        beginShape(); 
            vertex(299-30, 625-50);
            vertex(351-30, 613-50);
            vertex(377-30, 595-50);
            vertex(408-30, 556-50);
            vertex(416-30, 551-50);
            vertex(408-30, 617-50);
            vertex(399-30, 645-50);
            vertex(351-30, 661-50);
            vertex(306-30, 643-50);
        endShape(CLOSE);
        beginShape();
            vertex(197-30, 425-50);
            vertex(299-30, 425-50);
            vertex(314-30, 437-50);
            vertex(288-30, 504-50);
            vertex(254-30, 521-50);
            vertex(215-30, 502-50);
            vertex(200-30, 469-50);
        endShape(CLOSE);
        quad(259-30, 362-50, 275-30, 366-50, 275-30, 369-50, 259-30, 369-50);
        fill(227, 122, 43);
        beginShape();
            vertex(284-30, 218-50);
            vertex(328-30, 205-50);
            vertex(361-30, 201-50);
            vertex(462-30, 265-50);
            vertex(470-30, 326-50);
            vertex(392-30, 350-50);
            vertex(374-30, 396-50);
            vertex(392-30, 505-50);
            vertex(374-30, 509-50);
            vertex(358-30, 496-50); 
            vertex(351-30, 480-50);
            vertex(361-30, 468-50);
            vertex(361-30, 436-50);
            vertex(352-30, 418-50);
            vertex(335-30, 354-50);
            vertex(252-30, 319-50);
            vertex(264-30, 258-50);
        endShape(CLOSE);
        beginShape();
            vertex(375-30, 399-50);
            vertex(384-30, 399-50);
            vertex(394-30, 418-50);
            vertex(411-30, 426-50);
            vertex(456-30, 419-50);
            vertex(465-30, 431-50);
            vertex(463-30, 486-50);
            vertex(442-30, 503-50);
            vertex(416-30, 496-50);
            vertex(419-30, 517-50);
            vertex(406-30, 544-50);
            vertex(355-30, 551-50);
            vertex(342-30, 540-50);
            vertex(355-30, 532-50);
            vertex(361-30, 546-50);
            vertex(369-30, 523-50);
            vertex(407-30, 504-50);
            vertex(372-30, 409-50);
        endShape(CLOSE);
        circle(252-30, 472-50, 81);
        beginShape()
            vertex(401-30, 565-50);
            vertex(411-30, 565-50);
            vertex(404-30, 583-50);
            vertex(406-30, 623-50);
            vertex(390-30, 649-50);
            vertex(335-30,649-50);
            vertex(321-30, 628-50);
            vertex(370-30, 617-50);
            vertex(385-30, 602-50);
            vertex(384-30, 592-50);
        endShape(CLOSE);
        beginShape()
            vertex(422-30, 364-50);
            vertex(435-30, 358-50);
            vertex(437-30, 349-50);
            vertex(455-30, 349-50);
            vertex(461-30, 359-50);
            vertex(446-30, 369-50);
        endShape(CLOSE); 
        triangle(351-30, 581-50, 374-30, 565-50, 384-30, 576-50);
        fill(251, 151, 55);                   //Orange2
        beginShape();
            vertex(306-30, 220-50);
            vertex(364-30, 215-50);
            vertex(443-30, 253-50);
            vertex(463-30, 284-50);
            vertex(466-30, 322-50);
            vertex(406-30, 342-50);
            vertex(377-30, 359-50);
            vertex(374-30, 388-50);
            vertex(373-30, 417-50);
            vertex(399-30, 483-50);
            vertex(392-30, 500-50);
            vertex(382-30, 507-50);
            vertex(361-30, 488-50);
            vertex(369-30, 467-50);
            vertex(364-30, 427-50);
            vertex(351-30, 396-50);
            vertex(346-30, 354-50);
            vertex(290-30, 319-50);
            vertex(306-30, 297-50);
            vertex(295-30, 264-50);
        endShape(CLOSE);
        beginShape();
            vertex(379-30, 415-50);
            vertex(410-30, 430-50);
            vertex(425-30, 430-50);
            vertex(443-30, 419-50);
            vertex(460-30, 426-50);
            vertex(460-30, 475-50);
            vertex(454-30, 492-50);
            vertex(435-30, 494-50);
            vertex(411-30, 476-50);
            vertex(411-30, 516-50);
            vertex(402-30, 532-50);
            vertex(370-30, 545-50);
            vertex(370-30, 527-50);
            vertex(393-30, 509-50);
            vertex(403-30, 487-50);
        endShape(CLOSE);
        beginShape();
            vertex(331-30, 632-50);
            vertex(382-30, 620-50);
            vertex(392-30, 628-50);
            vertex(386-30, 643-50);
            vertex(356-30, 643-50);
        endShape(CLOSE);
        circle(256-30, 469-50, 60);

        fill(254, 187, 79);            //yellow 
        beginShape();
            vertex(356-30, 373-50);
            vertex(373-30, 379-50);
            vertex(373-30, 414-50);
            vertex(364-30, 414-50);
            vertex(356-30, 396-50);
        endShape(CLOSE);
        beginShape();
            vertex(374-30, 420-50);
            vertex(425-30, 438-50);
            vertex(450-30, 430-50);
            vertex(457-30, 448-50);
            vertex(453-30, 478-50);
            vertex(443-30, 482-50);
            vertex(411-30, 467-50);
            vertex(392-30, 472-50);
        endShape(CLOSE)
        beginShape();
            vertex(373-30, 433-50);
            vertex(399-30, 491-50);
            vertex(392-30, 500-50);
            vertex(375-30, 487-50);
            vertex(377-30, 476-50);
        endShape(CLOSE);
        beginShape(); 
            vertex(272-30, 391-50);
            vertex(287-30, 393-50);
            vertex(287-30, 400-50);
            vertex(270-30, 401-50);
        endShape(CLOSE);
        quad(424-30, 387-50, 440-30, 387-50, 440-30, 398-50, 424-30, 398-50);
        ellipse(392-30, 284-50, 95, 105);

        fill(21, 6, 1);                  //black hair 
        beginShape();
            vertex(70, 144);
            vertex(154, 95);
            vertex(270, 54);
            vertex(370, 100);
            vertex(477, 204);
            vertex(498, 742);
            vertex(291, 742);
            vertex(313, 618);
            vertex(364, 614);
            vertex(372, 593);
            vertex(379, 573);
            vertex(417, 525);
            vertex(427, 476);
            vertex(448, 444);
            vertex(450, 366);
            vertex(440, 342);
            vertex(444, 331);
            vertex(443, 239);
            vertex(437, 212);
            vertex(322, 139);
            vertex(210, 165);
            vertex(193, 200);
            vertex(139, 269);
            vertex(131, 296);
            vertex(151, 338);
            vertex(121, 302);
            vertex(119, 375);
            vertex(108, 331);
            vertex(93, 360);
            vertex(111, 485);
            vertex(126, 521);
            vertex(181, 570);
            vertex(218, 742);
            vertex(0, 742);
            vertex(0, 405);
        endShape(CLOSE);
        fill(40, 20, 16);                    //brown1
        beginShape();
            vertex(251-30, 115-50);
            vertex(314-30, 101-50);
            vertex(361-30, 172-50);
            vertex(355-30, 182-50);
            vertex(327-30, 190-50);
            vertex(290-30, 189-50);
            vertex(310-30, 167-50);
            vertex(252-30, 155-50);
            vertex(285-30, 136-50);
        endShape(CLOSE);
        fill(56, 17, 4);                    //brown2
        beginShape();
            vertex(327-30, 180-50);
            vertex(356-30, 171-50);
            vertex(322-30, 114-50);
            vertex(317-30, 137-50);
            vertex(337-30, 159-50);
            vertex(327-30, 180-50);
        endShape(CLOSE);
    } else { // cartoon face
        if (//press on a key to color in the background
            keyIsPressed == true){
            stroke(mouseY, mouseX, value1);
            strokeWeight(40);
            point(mouseX, mouseY)
        }
        strokeWeight(1);
        // hair
            fill(44, 23, value2);
            noStroke();
            ellipse(244, 680, 630, 1290);
        //face and neck 
            strokeWeight(1);
            fill(235, 171, 127);
            beginShape();
                vertex(135, 511);
                vertex(304, 605);
                vertex(270, 742);
                vertex(179, 742);
            endShape(CLOSE);
            stroke(174, 115, 75);
            strokeWeight(3);
            ellipse(centerOfFaceX, centerOfFaceY, faceWidth, faceHeight); //face 

        //left eye     
            stroke(44, 23, 17);
            strokeWeight(10);
            line(143, 311, 174, 295);
            line(174, 295, 270, 295);
            strokeWeight(2);
            stroke(0);
            fill("black");      // eyeliner 
            triangle(centerOfEyeLX, centerOfEyeY-25, 143, 329, centerOfEyeLX, centerOfEyeY+25);
            fill("white");      //eye
            ellipse(centerOfEyeLX, centerOfEyeY, eyeWidth, eyeHeight);
            fill("black");      // left pupil 
            ellipse(constrain(mouseX, centerOfEyeLX-15, centerOfEyeLX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);   
        // right eye 
            stroke(44, 23, 17);
            strokeWeight(10);
            line(365, 295, 441, 295);
            line(441, 295, 450, 303);
            strokeWeight(2);  
            stroke(0);
            fill("black");            // eyeliner 
            triangle(centerOfEyeRX, centerOfEyeY-25, 463, 321, centerOfEyeRX, centerOfEyeY+25); 
            fill("white");            // eye 
            ellipse(centerOfEyeRX, centerOfEyeY, eyeWidth, eyeHeight);    
            fill("black");            //right pupil
            ellipse(constrain(mouseX, centerOfEyeRX-15, centerOfEyeRX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);   
        //Hair - bangs 
            if(hair <= 1){
            fill(44, 23, value2);
            stroke(44, 23, value2);
            beginShape();
                curveVertex(327, 124);
                curveVertex(268, 145);
                curveVertex(215,158);
                curveVertex(191, 224);
                curveVertex(127, 292);
                curveVertex(137, 331);
                curveVertex(78, 426);
                curveVertex(99, 191);
            endShape(CLOSE);
            }
            if(hair <=2 & hair>1){
            fill(44, 23, value2);
            stroke(74, 46, value2);
            beginShape();
                vertex(278, 136);
                vertex(390, 155);
                vertex(463, 282);
                vertex(71, 292);
                vertex(175, 150);
            endShape(CLOSE);
            }
            if(hair <=3 & hair>2){
            fill(44, 23, value2);
            stroke(44, 23, value2);
            beginShape();
                curveVertex(327, 124);
                curveVertex(268, 145);
                curveVertex(215,158);
                curveVertex(191, 224);
                curveVertex(127, 292);
                curveVertex(137, 331);
                curveVertex(78, 426);
                curveVertex(99, 191);
            endShape(CLOSE);
            beginShape();
                curveVertex(298, 121);
                curveVertex(298, 121);
                curveVertex(340, 190);
                curveVertex(412, 255);
                curveVertex(455, 308);
                curveVertex(458, 410);
                curveVertex(466, 536);
                curveVertex(486, 325);
                curveVertex(399, 138);
            endShape(CLOSE);
            }
        // mouth  
            if(mouth <=1){
                fill(196, 99, 99); 
                stroke(137, 41, 41);
                strokeWeight(10);
                ellipse(centerOfFaceX+36, centerOfFaceY+133, mouseX/7, mouseY/7);
            }
            if(mouth <=2 & mouth>1){
                if(mouseX2){
                fill(196, 99, 99);
                stroke(137, 41, 41);
                strokeWeight(10);
                triangle(centerOfFaceX+96, centerOfFaceY+123, centerOfFaceX+26, centerOfFaceY+123, centerOfFaceX+61, centerOfFaceY+123+mouseY/9)
            }
        // nose 
            strokeWeight(7);
            stroke(189, 137, 102);
            noFill();
            beginShape();
                vertex(348, 311);
                vertex(337, 352);
                vertex(337, 373);
                vertex(365, 444);
                vertex(342, 467);
                vertex(319, 446);
            endShape();
            if(hair <= 1){//nose ring changes w/ hair (gold)
            strokeWeight(4);
            stroke(255, 215, 0); 
            noFill() 
            beginShape();
                vertex(330, 443);
                vertex(320, 462); 
                vertex(331, 472);
                vertex(334, 460);
            endShape();
            }
            if(hair <=2 & hair>1){// nose ring changes w/ hair (silver)  
            strokeWeight(4);
            stroke(192, 192, 192); 
            noFill(); 
            beginShape();
                vertex(330, 443);
                vertex(320, 462); 
                vertex(331, 472);
                vertex(334, 460);
            endShape();
            }
            if(hair <=3 & hair>2){// nose ring changes w/ hair (stud)
            strokeWeight(7)
            stroke(255, 215, 0)
            point(330, 443)
            }
        }
} 
function mousePressed(){
    //when you click on the mouse the eye size, hair, haircolor, mouth, and background color changes 
    eyeWidth = random(60, 150);
    eyeHeight = random(50, 100);
    hair = random(0, 3);
    mouth = random(0,3); 
    value1 = random(0, 255);
    value2 = random(0, 100);

}