Category: Project-02-Variable-Face

Tanvi Harkare – Project 02 – Variable Face

tanvi_facevariable

/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-02-Face Variables */

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColorR = 150
var eyeColorG = 250
var eyeColorB = 5;
var mouthWidth = 50;
var mouthHeight = 30; 
var mouthY = 340; 
var browHeight = 300;
var eyeHeight = 320;

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

function draw() {
    background(150);

    //hair
    stroke(0);
    strokeWeight(150);
    line(width/2, height/2 - 20, width/2, height - 225);

    //face
    fill(255, 220, 177);
    noStroke(); 
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eyes
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, eyeHeight, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, eyeHeight, eyeSize, eyeSize); //right eye
    //pupils
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, eyeHeight, eyeSize/2, eyeSize/2); //left pupil
    ellipse(eyeRX, eyeHeight, eyeSize/2, eyeSize/2); //right pupil

    //mouth
    noFill();
    strokeWeight(2);
    stroke(100, 75, 80);
    arc(240, mouthY, mouthWidth, mouthHeight, 0, 3.14, OPEN);

    //eyebrows
    strokeWeight(2);
    stroke(0);
    line(eyeLX - 10, eyeHeight - 10 - eyeSize, eyeLX + 10, eyeHeight - 10 - eyeSize);
    line(eyeRX - 10, eyeHeight - 10 - eyeSize, eyeRX + 10, eyeHeight - 10 - eyeSize);

    //nose
    noStroke();
    fill(198, 171, 137);
    ellipse(width/2, height/2 + eyeSize, 10, 8);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(100, 130);
    faceHeight = random(110, 160);
    eyeSize = random(10, 20);
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);
    mouthWidth = random(30, 60);
    mouthHeight = random(20, 40);
    mouthY = random(335, 350);
    browHeight = random(290, 305);
    eyeHeight = random(315, 325);
}

For this project, I created a face from simple shapes such as ellipses, arcs, and lines. My favorite part of the project was coming up with different ways to create a unique face with colors, size, and position on the face. At first I had a difficult time dealing with facial features that were overlapping, but was able to solve that by changing the values of the random integers near the end .

Xindi Lyu-Project-02-Variable-faces

sketch

/*Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-02-Face Variables */

//face
var faceWidth = 100;
var faceHeight =95;

var skinR = 250;
var skinG = 180;
var skinB = 150;
//eyes

var color1 = 0;
var color2 = 0;
var color3 = 0;


//hair
var hairR = 200;
var hairG = 40;
var hairB = 210;





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

function draw(){
createCanvas(640, 480);
noStroke();
background(skinR*(1/5),skinG*(1/5), skinB);

//hair
fill(hairR, hairG, hairB);
rect(320-faceWidth/2-20, 240-faceHeight/2-30, faceWidth+40, faceHeight+60, 150,150,10,10);

//face
fill(skinR,skinG,skinB);
rect(320-faceWidth/2, 240-faceHeight*7/24, faceWidth, faceHeight, 10,10, 70,70);

//eyes
fill(color1, color2, color3);
rect(320-faceWidth/2+15, 240-faceHeight/2+50, 10, faceHeight*1/4);
rect(320+faceWidth/2-25, 240-faceHeight/2+50, 10, faceHeight*1/4);

//mouth
noFill();
stroke(skinR*1/2, skinG*1/2, skinB*1/2);
arc(320,240-faceHeight/2+80,12,6,0,PI);
}

function mousePressed() {
faceWidth = random(95,110);
faceHeight = random(90, 140);
skinR = random(220,280);
skinG = random(150,210);
skinB = random(120,170);
color1 = random(0,255);
color2 = random(0,255);
color3 = random(0,255);
hairR = random(150,250);
hairG = random(0,90);
hairB = random(160,270);




}

For this project I played with color variations and light changes of face length and width.

Katherine Hua – Project 02 – Variable Face

sketch

/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/

var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;



 
function setup() {
    createCanvas(480, 640);
    background(backgroundColorR, backgroundColorG, backgroundColorB);
}
 
function draw() {

	//background
	background(backgroundColorR, backgroundColorG, backgroundColorB);
	
	ellipse(x, 80, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 160, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 240, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 320, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 400, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 480, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	ellipse(x, 560, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	//y
 	ellipse(y, 80, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 160, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 240, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 320, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 400, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 480, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	ellipse(y, 560, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	//z
 	ellipse(z, 80, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 160, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 240, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 320, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 400, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 480, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	ellipse(z, 560, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	//a
 	ellipse(a, 80, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 160, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 240, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 320, 50, 50);
  	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 400, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 480, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	ellipse(a, 560, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	//b
 	ellipse(b, 80, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 160, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 240, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 320, 50, 50);
  	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 400, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 480, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
 	ellipse(b, 560, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	//c
 	ellipse(c, 80, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 160, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 240, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 320, 50, 50);
  	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 400, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 480, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
 	ellipse(c, 560, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	//d
 	ellipse(d, 80, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 160, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 240, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 320, 50, 50);
  	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 400, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 480, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
 	ellipse(d, 560, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	//e
	ellipse(e, 80, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 160, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 240, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 320, 50, 50);
  	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 400, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 480, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
 	ellipse(e, 560, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	//f
	ellipse(f, 80, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 160, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 240, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 320, 50, 50);
  	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 400, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 480, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
 	ellipse(f, 560, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}

    //character shape
    strokeWeight(5);
    point(0, 640);
    point(40, 440);
    point(70,320);
    point(150, 160);
    point(300, 160);
    point(380, 300);
    point(420, 440);
    point(480, 640);
    strokeWeight(5);
    fill(250-skin, 223-skin, 198-skin);
    beginShape();
    curveVertex(0, 640);
    curveVertex(0, 640);
    curveVertex(40, 440);
    curveVertex(70, 320);
    curveVertex(150, 160);
    curveVertex(300, 160);
    curveVertex(380, 300);
    curveVertex(420, 440);
    curveVertex(480, 640);
    curveVertex(480, 640);
    endShape();
    beginShape();
    curveVertex(120, 500);
    curveVertex(120, 500);
    curveVertex(170, 560);
    curveVertex(210, 565);
    curveVertex(170, 440);
    curveVertex(150, 400);
    curveVertex(150, 440);
    endShape();
    beginShape();
    curveVertex(360, 500);
    curveVertex(360, 500);
    curveVertex(310, 560);
    curveVertex(270, 565);
    curveVertex(310, 440);
    curveVertex(330, 400);
    curveVertex(330, 440);
    endShape();

//hair
    if (hair < 1) {
    	fill(0, 0, 0)
   		arc(230, 280, 300, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 2) {
   		fill(0, 0, 0)
   		arc(230, 280, 350, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   		fill(0,0,0);
   		rect(52, 275, 50, 125, 5);
   		rect(358, 275, 50, 125 ,5);
   	}
   	else if (hair < 3) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(120, 120, 75, 75);
   		ellipse(340, 120, 75, 75);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 4) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(57, 280, 80, 50);
   		ellipse(403, 280, 80, 50);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}

 //brows
 	if (brows < 1) {
 		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
    	arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
 	}
 	else if (brows < 2) {
		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI, PI+HALF_PI);
    	arc(270, 275, 30, 30, PI+HALF_PI, 0);
 	}
    else if (brows < 3) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+HALF_PI, 0);
    	arc(270, 275, 30, 30, PI, PI+HALF_PI);
    }
    else if (brows < 4) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    	arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    }


    //eyes
    //whites
    fill(255);
    ellipse(180, 300, eyeWidth, eyeHeight);
    ellipse(270, 300, eyeWidth, eyeHeight);
    //pupil
    fill(0);
    ellipse(180, 300, pupilWidth, pupilHeight);
    ellipse(270, 300, pupilWidth, pupilHeight);


    //lips
    if (lips < 1) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    }
    else if (lips < 2) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	fill(0);
    	ellipse(225, 307, 20, 5);
    }
    else if (lips < 3) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
   		ellipse(225, 300, 40, 15);
   		fill(0);
    	ellipse(225, 307, 20, 5);
   		noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}
   	else if (lips < 4) {
   		fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}

   	//cheeks
   	fill(cheekColorR, cheekColorG, cheekColorB);
   	noStroke();
   	ellipse(140, 320, 40, 20);
   	ellipse(320, 320, 40, 20);

   	stroke(0,0,0);
}

function mousePressed() {
	backgroundColorR = random(200, 255);
	backgroundColorG = random(137, 255);
	backgroundColorB = random(175, 255);
	eyeWidth = random (30, 40);
	eyeHeight = random(15, 30);
	pupilWidth = random(1,7);
	pupilHeight = random(1,7);
	skin = random(1, 150);
	lips = random(4);
	hair = random(4);
	brows = random(4);
	cheekColorR = random(220, 255);
	cheekColorG = random(180, 255);
	cheekColorB = random(139, 255);
}

This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.

Sketch of my character design

 

ChristineSeo-Project-02-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-02
var xPos;
var yPos;
var xR;
var scale;
var eyeScale;
var curve;
var shirtH;
var shirtW;
var hatR;
var earSize;
var eyeW;
var eyeH;
var earringS;
var mouthH;
var headS;
var faceS;
var circleG;
var circleB;
var skinR;
var skinG;
var skinB;
var neckR;
var neckG;
var neckB;
var faceWidth = 100;
var faceHeight = 160;
var hairLength= 155;
 
function setup() {
  createCanvas(480, 640);
  xPos = random(0,width); 
  yPos = random(0,height);
  xR = random(10,width);
  scale=random(10,height);
  shirtR=random(10,width);
  harR=random(10,width);
  eyeScale=random(10,20);
  earSize=random(25,45);
  curve=20
  shirtH=80
  shirtW=185
  eyeW=140
  eyeH=210
  earringS=210
  mouthH=240
  headS=180
  faceS=80
  circleG=90;
  circleB=80;
  skinR=247;
  skinG=225;
  skinB=200;
  neckR=231;
  neckG=195;
  neckB=156;

}

 
function draw() {

  background(46, 47, 69);
  noStroke(0);

  //circles
  fill(xR,circleG,circleB);
  ellipse(xPos, yPos, scale,scale); 
  

  //neck
  fill(neckR, neckG, neckB);
  rect(width/2-80, height/3, faceWidth/2-15, width/4.2, curve/2);


  //shirt
  fill(shirtR,circleG,circleB);
  rect(width/3.84, height/2.1, shirtH, shirtW, curve);

  //shoulders
  fill(skinR, skinG, skinB);        
  rect(height/3.5, height/2.2, shirtH-35, shirtW+40, curve);
  rect(width/3.84, height/2.1, shirtH-70, shirtW+10, curve);

  //hair
  fill (141, 114, 41);
  ellipse(width/2.91,height/3.6,width/3.2,height/3.8);
  rect(height/7, width/2.6, width/7, hairLength);

  //ears
  fill(neckR, neckG, neckB);
  ellipse(width/3.84,earringS,height/18,earSize);

  //earring
  fill(1);
  rect(width/4.5,earringS,earringS/30,earringS/30);

  //face
  fill (skinR, skinG, skinB);
  ellipse(width / 3, height /3, faceWidth,  faceHeight);

  //eyes
  fill(1);
  ellipse(eyeW,eyeH,eyeW/7,eyeScale);
  fill(990);
  ellipse(eyeW,eyeH,eyeW/17,eyeScale);

  //nose
  stroke(1);
  line(eyeW, eyeH+30, width/2.5, width/3);
  line(eyeW,eyeH+30,width/3.2,mouthH);
  ellipse(width/3,mouthH,width/160);

  //mouth
  noStroke(0);
  fill(236, 185, 248);
  triangle(width/2.5,mouthH,width/2.8,width/2,width/3.2,height/2.5);

  //bangs
  noStroke(0);
  fill(141, 114, 41);
  translate(width/-9, height/2.95);
  rotate(PI/0.6);
  ellipse(width/3,headS,faceS,width/4);

  //hat
  fill(1);
  translate(width/1.6, height/35);
  rotate(PI/2);
  ellipse(height/4,width/4-3,height/2.5,width/20);
  rect(faceS,height/48,headS,width/4.8);
  fill(hatR, circleG,circleB);
  rect(faceS,height/9,headS,width/24);

}
function mousePressed() {

  xPos = random(0,width); 
  yPos = random(0,height);
  xR = random(10,width);
  scale= random(10,height);
  eyeScale= random(10,20);
  shirtR= random(10,width);
  hatR=random(10,width);
  faceWidth = random(75, 100);
  faceHeight = random(110, 150);
  hairLength = random(120,255);
  earSize= random(25,45);



}

Although I had difficulties in the beginning of using variables, I was able to find the convenience of them! I experimented with different shapes and sizes. It was great to learn about how much I could play around with the software; it makes everything so much more dynamic!

Liz Maday Project 2

sketch lizm

//Elizabeth Maday
//Section A
//emaday@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 100;
var eyeBrowHeight = 0;
var mouthWidth = 27;
var bodySize = 114; 

var a = 3;
var b = 20;
var c = 17;
var d = 15;
var e = 28;

var r = 203;
var g = 129;
var B = 51;



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

function draw() {
    background(255, 173, 184);
    ellipseMode(CENTER);

    //grass
    strokeWeight(2);
    fill(0, 182, 15);
    ellipse(width/2, 480, 900, 250);

    //tail
    strokeWeight(7);
    noFill();
    bezier(width/2 + bodySize/4, height/2 + bodySize/1.4, width/2 + bodySize/1.45, height/2 + bodySize/2.1, width/2 + bodySize/1.3, height/2 + bodySize/4.5, width/2 + bodySize/1.3, height/2 - bodySize/6);

    //body
    strokeWeight(3);
    fill(r, g, B);
    ellipse(width / 2, 340, bodySize, bodySize);

    //front feet
    fill(r, g, B);
    line(width / 2, 397, width / 2, 368);
    line(width / 2 - 15, 397, width / 2 - 15, 368);
    line(width / 2 + 15, 397, width / 2 + 15, 368);
    arc(width / 2 - 15, 397, 30, 30, PI, 0, CHORD);
    arc(width / 2 + 15, 397, 30, 30, PI, 0, CHORD);

    //ears
    fill(r, g, B);
    triangle(width / 2 + (faceWidth * 0.20), height / 2 - (faceHeight * 0.4), width / 2 + (faceWidth * 0.40), height / 2 - (faceWidth * 0.2), width / 2 + (faceWidth * 0.45), height / 2 - (faceHeight * 0.60));
    triangle(width / 2 - (faceWidth * 0.20), height / 2 - (faceHeight * 0.4), width / 2 - (faceWidth * 0.40), height / 2 - (faceWidth * 0.2), width / 2 - (faceWidth * 0.45), height / 2 - (faceHeight * 0.60));

    //head
    fill(r, g, B);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);

    //stripes
    line(width/2, height/2 - faceHeight/2, width/2, height/2 - faceHeight/2.6);
    line(width/2 - 8, height/2 - faceHeight/2, width/2 - 8, height/2 - faceHeight/2.45);
    line(width/2 + 8, height/2 - faceHeight/2, width/2 + 8, height/2 - faceHeight/2.45);

    //eyebrows
    line(width/2 + faceWidth/6, height/2 - eyeSize + eyeBrowHeight, width/2 + faceWidth/3.4, height/2 - eyeSize + eyeBrowHeight);
    line(width/2 - faceWidth/6, height/2 - eyeSize + eyeBrowHeight, width/2 - faceWidth/3.4, height/2 - eyeSize + eyeBrowHeight);

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

    //pupil
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize / 4, eyeSize / 4);
    ellipse(eyeRX, height / 2, eyeSize / 4, eyeSize / 4);

    //nose
    triangle((width / 2) - a, (height / 2) + c, width / 2, (height / 2) + b, (width / 2) + a, (height / 2) + c);

    //whiskers 
    strokeWeight(2);
    line((width / 2) - faceWidth * 0.6, (height / 2) + d, (width / 2) - 9, (height / 2) + 20);
    line((width / 2) - faceWidth * 0.6, (height / 2) + e, (width / 2) - 9, (height / 2) + 23);
    line((width / 2) + 9, (height / 2) + 20, (width / 2) + faceWidth * 0.6, (height / 2) + d);
    line((width / 2) + 9, (height / 2) + 23, (width / 2) + faceWidth * 0.6, (height / 2) + e);

    //mouth
    ellipseMode(CORNER);
    noFill();
    arc(width / 2, (height / 2) + b - 13, mouthWidth, mouthWidth, 0, PI);
    arc((width / 2) - mouthWidth, (height / 2) + b - 13, mouthWidth, mouthWidth, 0, PI);    

    //twitching whiskers
    if (mouseIsPressed) {
        d = 10;
        e = 33;
    } else {
        d = 15;
        e = 28;
    }
}

function mousePressed() {
    faceWidth = random(75, 165);
    faceHeight = random(100, 200);
    eyeSize = random(10, 40);
    mouthWidth = random(18, 34);
    bodySize = random(85, 140);
    eyeBrowHeight = random(-5, 5);

    a = random(1, 5);
    b = random(18, 23);
    c = random(13, 19);
    d = random(10, 15);

    r = random(18, 215);
    g = random(110, 160);
    B = random(35, 265);
}

This project was really fun for me to work on because I had to figure out how to do a lot of new commands. Being successful after working on it for a long time was really satisfying. It was also interesting for me to start using more difficult things to work with such as ‘bezier’.

Jonathan Liang – Project 02 – Variable Face

sketch

// Simple beginning template for variable face.
var eyeSize = 30;
var eyeHeight = 2.5 * eyeSize;
var eyeWidth = 2 * eyeSize;
var faceWidth = 300;
var faceHeight = 300;
var canvasWidth = 640;
var canvasHeight = 480;
var pupilWidth = 10;
var pupilHeight = 15;
var mouthStroke = 3;
var llWall = canvasWidth / 2 - eyeSize - pupilWidth;
var lrWall = canvasWidth / 2 - eyeSize + pupilWidth;
var rlWall = canvasWidth / 2 + eyeSize - pupilWidth;
var rrWall = canvasWidth / 2 + eyeSize + pupilWidth;
var tlWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var blWall = canvasHeight / 2 - eyeSize * 3 + eyeSize;
var trWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var brlWall = canvasHeight / 2 - eyeSize * 3 +  eyeSize;
var mouthStart = 320;
var noseSize = eyeSize
var backgroundColor = 1;
var headColor = 1;




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

function draw() {
    switch(backgroundColor){
    	case 1:
    		background('pink');
    		break;
    	case 2:
    		background('lime');
    		break;
    	case 3:
    		background(71, 170, 215);
    		break;
    	case 4:
    		background('magenta');
    		break;
    	case 5:
    		background('cyan');
    		break;
    	case 6:
    		background('orange')
    		break;
    	case 7:
    		background(237,204, 248);
    		break;
    	case 8:
    		background('yellow');
    		break;
    	}

//head
    noStroke();
    switch(headColor){
    	case 1:
    		fill(71, 170, 215);
    		break;
    	case 2:
    		fill('yellow');
    		break;
    	case 3:
    		fill('lime');
    		break;
    	case 4:
    		fill('red');
    		break;
    	case 5:
    		fill('orange');
    		break;

    }
    strokeWeight(3);
    ellipse(canvasWidth / 2, canvasHeight / 2, faceWidth, faceHeight);
    

//white fills on face 
    noStroke();
    fill('white');
    ellipse(canvasWidth / 2, canvasHeight / 2 + eyeSize, faceWidth/1.25, faceHeight/1.25);

//eyes
    ellipse(canvasWidth / 2 - eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);
    ellipse(canvasWidth / 2 + eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);

//pupils
	var xrL = constrain(mouseX, llWall, lrWall);
	var xrR = constrain(mouseX, rlWall, rrWall);
	var yrL = constrain(mouseY, tlWall, blWall);
	var yrR = constrain(mouseY, trWall, brlWall);

    noStroke();
    fill('black');
    ellipse(xrL, yrL, pupilWidth, pupilHeight);
    ellipse(xrR, yrR, pupilWidth, pupilHeight);


//mouth
	noFill();
	stroke('black');
	strokeWeight(mouthStroke);
	line(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2, mouthStart);
	arc(canvasWidth / 2, mouthStart - faceWidth / 4, faceWidth * 0.65, faceWidth * 0.5, 0, PI, OPEN);

	
//left whiskers	
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight);
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);
	
//right whiskers
	line(canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6);
	line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
	line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);
	
//nose and highlight
    noStroke();
    fill('red');
    ellipse(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6, noseSize, noseSize);

    noStroke();
    fill('white');
    ellipse(canvasWidth / 2 - 1, canvasHeight / 2 - eyeSize * 1.63, pupilWidth, pupilWidth);    
    
}

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(10, 250);
    faceHeight = random(150, 250);
    eyeSize = random(10, 40);
    noseSize = random(10, 70);
    backgroundColor = int(random(1,8));
    headColor = int(random(1,5));
   

}

As a child, one of my favorite cartoons was Doraemon. I always wondered if there were more to the Doraemon family and if they were in different colors. I also took inspiration from a scene in Guardians of the Galaxy volume 2, I’m not gonna specify which scene.

Kevin Thies – Variable Face

sketch

//Kevin Thies
//Section C
//kthies@andrew.cmu.edu
//Project-02

// Core Variables
var headHeight = 200; // head height and width
var headWidth = 200;
var noseHeight = headHeight * 2.5; // relates proportion of head to  nose
var noseAngle = -4;

var skinR = 221; // color values for skin and background
var skinG = 203;
var skinB = 161;

var backR = 25; // background color offset from skin color values
var backG = 25; // additionally used to offset eye color
var backB = 25; // so the colors all harmonize

var eyeOffset = 50; // setback from head width
var eyeWidth = headWidth/2 - eyeOffset; // eye position
var eyeHeight = eyeWidth * headHeight / headWidth; // use head proportions for eyes
var eyeTop = 3;
var eyeBottom = 3.5;
var pupilRatio = .8; // ratio of eye white to black
var irisRatio = 1.4; // ratio of eye black to color


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

function draw() {

    // Background that
    background(skinR + backR, skinG + backG, skinB + backB);

    // Head Shape
        // Nose, sometimes it looks more like a nose and that's ok
        noStroke();
        fill(skinR, skinG, skinB);
        arc(width/2, height/3, headWidth, noseHeight, noseAngle, 0, CHORD);

        // Hide the top half of nose generated
        fill(skinR + backR, skinG + backG, skinB + backB);
        rect(0,0, width, height/3);

        // Head's main ellipse
        fill(skinR, skinG, skinB);
        ellipse(width/2, height/3, headWidth, headHeight);

    // Nose

    // Eyes
        // Pupil
        fill(0);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth,
            eyeHeight, eyeTop, eyeBottom, PIE);
        // Iris
        fill(skinR - backR, skinG - backG, skinB - backB);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio * irisRatio,
            eyeHeight * pupilRatio * irisRatio, eyeTop, eyeBottom, PIE);
        // White
        fill(255);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio,
            eyeHeight * pupilRatio, eyeTop, eyeBottom, PIE);


}

function mousePressed() {

    //Reshuffle the head dimensions
    headWidth = random(120, 200);
    headHeight = random(100, 160);
    noseHeight = headHeight * random(2, 3);
    noseAngle = -random(3.66, 4); //radian angle of  arc

    //Change eye color and Shape
    eyeOffset = random(45, 60);
    eyeTop = random(2.61, 3.14); // 5/6 Pi to Pi
    eyeBottom = random(3.14, 3.66); //Pi to 7/6 pi
    pupilRatio = random(.75, .5);
    irisRatio = random(1.2, 1.3);

    // Constrain face color to less saturated, darker values
    skinR = random(140, 225);
    skinG = random(143, 225);
    skinB = random(140, 184);

    // Reshuffle background color offset
    backR = random(-50, 25);
    backG = random(-50, 25);
    backB = random(-50, 25);
}

There was a lot of math involved in this one. If I could go back in time, I think bezier curves would’ve been a better fit than arcs simply based on the parameters they use. At the same time, since I used arcs, the end product morphed into what it is now instead of more ‘realistic’ shapes.

Project 02 – Variable Face – Sara Frankel

sketch

var eyeSize = 60;
var faceWidth = 300;
var faceHeight = 350;
var value = 'blue';

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(141,209,247);
   if (mouseX < width/2)
      background(51);

    //head
    fill(77,47,23);
    arc(width / 2, height / 3 + 0.75 * faceHeight, faceWidth * 1.5 , faceHeight * 2.3, PI, TWO_PI);
    fill('tan');
    ellipse(width / 2,height / 2,faceWidth,faceHeight);
    fill(77,47,23)
    arc(width / 2, height / 3, faceWidth * 0.9 , faceHeight * 0.6, PI, TWO_PI);
    

    //left eye
    fill('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    ellipse(eyeLX, height / 2, 1.5 * eyeSize, eyeSize);

    //left eyeball (blue iris, black pupil and white glissen)
    fill(value);
    ellipse(eyeLX + 15, height / 2, 0.5 * eyeSize, 0.5 * eyeSize);
    fill(51);
    ellipse(eyeLX + 15, height / 2, 0.25 * eyeSize, 0.25 * eyeSize);
    fill('white');
    ellipse(eyeLX + 10, height / 2, eyeSize / 8, eyeSize / 8);

     //right eye
    fill('white');
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX, height / 2, 1.5 * eyeSize, eyeSize);

    //right eyeball (blue iris, black pupil and white glissen)
    fill(value);
    ellipse(eyeRX + 15, height / 2, eyeSize / 2, eyeSize /2);
    fill(51);
    ellipse(eyeRX + 15, height / 2, eyeSize / 4, eyeSize /4);
    fill('white');
    ellipse(eyeRX + 10, height / 2, eyeSize / 8, eyeSize / 8);

    //eyebrows (left then right)
    fill(77,47,23);
    ellipse(eyeLX, height / 2 - 30 , eyeSize * 1.5, eyeSize / 6);
    ellipse(eyeRX, height / 2 - 30, eyeSize * 1.5, eyeSize / 6);

    //mouth
    noFill();
    arc(width / 2, height * 0.66, faceWidth / 4, faceHeight  / 4, 0, PI);

}

function mouseClicked() {
   if(value === 0) {
        value = 'blue';
    } else {
        value = color(random(0,255), random(0,255), random(0,255));
    } 

}
 
function mousePressed() {
    faceWidth = random(200, 350);
    faceHeight = random(325, 350);
    eyeSize = random(35, 50);
}

I really enjoyed this project as I felt that I now have a better understanding of how to use a lot of the code that was established last week and cool new functions introduced this week. I also enjoyed this project in the sense that it was kind of entertaining to play with and trying to understand the ratio of canvas and face features using established values and ratios.

Julie Choi-Project-02-Variable-Face

juliechoi_project_02

// declare character variables
var faceWidth = 130;
var faceHeight = 150;
var eyeSize = 25;
var pupilSize = 10;
var mouthSize = 25;
var tongueSize = 20;
var bodySize = 160;
var legSize = 20;
var blushSize = 20;

// declare other object variable
var discoSize = 85;

// declare color variables
var r = 0;
var g = 0;
var b = 0; 
var skinColor1 = 249; 
var skinColor2 = 205;
var skinColor3 = 161;
var colorA = 0;
var colorB = 0;
var colorC = 0;


function setup() {
    createCanvas(640,480);
 }
function draw() {
	// draw background
    background(r, g, b);

    // draw face + body + legs
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    fill(249, 205, 161);
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 2, height / 2 + 100, bodySize, bodySize);
    fill(249, 205, 161);
    noStroke();
    fill(skinColor1, skinColor2, skinColor3);
    ellipse(width / 1.8, height / 1.15, legSize / 1.9, legSize + 30);
    noStroke();
    ellipse(width / 2.2, height / 1.15, legSize / 1.9, legSize + 30);

    // declare eye variables
    var eyeLeft = width / 2 - faceWidth * 0.25;
    var eyeRight = width / 2 + faceWidth * 0.25;
    var pupilLeft = width / 2 - faceWidth * 0.25;
    var pupilRight = width / 2 + faceWidth * 0.25;

    // draw eyes + pupil
    fill(255);
    ellipse(eyeRight, height / 2.25, eyeSize, eyeSize);
    ellipse(eyeLeft, height / 2.25, eyeSize, eyeSize);

    fill(0);
    ellipse(pupilRight, height / 2.2, pupilSize, pupilSize);
    ellipse(pupilLeft, height / 2.2, pupilSize,pupilSize);

    // draw nose with curveVertex
    strokeWeight(1);
    stroke(255);
    noFill(0);
    beginShape();
    curveVertex(width / 1.95, height / 2.3);
    curveVertex(width / 1.95, height / 2.3);
    curveVertex(width / 1.94, height/ 2.1);
    curveVertex(width / 1.9, height/ 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    endShape();

    // draw hair strand with curveVertex
    strokeWeight(3);
    stroke('brown');
    noFill(0); //320, 240
    beginShape();
    curveVertex(323, 170);
    curveVertex(323, 170);
    curveVertex(320, 166);
    curveVertex(325, 159);
    curveVertex(323, 153);
    curveVertex(326, 148);
    curveVertex(322, 142);
    curveVertex(324, 135);
    curveVertex(324, 135);
    endShape();

    // draw mouth
    colorA = 243;
    colorB = 159;
    colorC = 76;

    noStroke();
    fill(colorA, colorB, colorB);
    ellipse(width / 2, height / 2 + 20, mouthSize + 5, mouthSize / 2 + 5);

    fill(colorA, colorC, colorC);
    //strokeWeight(5);
	//fillStroke(243, 159, 159);
    ellipse(width / 2, height / 2 + 20, mouthSize + 2, mouthSize / 1.9);

	// draw tongue
    noStroke();
    fill(colorA, colorC, colorC);
    ellipse(width / 2, height / 2 + 25, tongueSize / 1.8, tongueSize + 3);

    // draw blush
    fill('pink');
    strokeWeight(1);
    stroke(255, 255, 255, 50);
    ellipse(width / 2.4, height / 2 + 10, blushSize * 2, blushSize);

    strokeWeight(1);
    stroke(255, 255, 255, 50);
    ellipse(width / 1.7, height / 2 + 10, blushSize * 2, blushSize);

    //draw disco ball shape
    noStroke();
    fill(150);
    rect(315, 0, 15, 25);
    quad(315, 25, 330, 25, 335, 35, 310, 35);
    ellipse(width / 1.99, height / 6.5, discoSize, discoSize);

    fill(0);
    ellipse(307, 52, 15, 15);
    ellipse(327, 72, 15, 15);

    fill(0);
    ellipse(345, 60, 15, 15);
    ellipse(319, 100, 15, 15);

    fill(0);
    ellipse(298, 78, 15, 15);
    ellipse(343, 88, 15, 15);

    fill(243, 36, 202); //pink
    ellipse(305, 50, 15, 15);
    ellipse(325, 70, 15, 15);

    fill(24, 138, 255); //blue
    ellipse(347, 60, 15, 15);
    ellipse(321, 100, 15, 15);

    fill(255, 255, 24); //yellow
    ellipse(300, 80, 15, 15);
    ellipse(345, 90, 15, 15);
}

function mousePressed() {
    faceWidth = random(150, 250);
    faceHeight = random(150, 200);
    eyeSize = random(10, 40);
    pupilSize = random(5, 10);
	mouthSize = random(20, 28);
	tongueSize = random(15, 18);
	bodySize = random(160,200);
	blushSize = random(15,20)
    colorA = random(0, 255);
    colorB = random(0, 255);
    colorC = random(0, 255);
    skinColor1 = random(0, 255);
    skinColor2 = random(0, 255);
    skinColor3 = random(0, 255);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

For this project, I personally had so much fun using all the new materials from this week. I ended up creating a character in a rave with randomized expression and color. I was able to figure out that when I randomize the color under the draw function, the background changes extremely quickly since the draw function is in a loop. Although applying that part looks more like a rave, I didn’t apply it to my code for this post because it might hurt some people’s eyes. Instead, if you are curious, download this: real_rave  to see how it looks. I hope you enjoy!

Kyle Leve – Project 02 – Variable Face

sketch

//Kyle Leve
//Section A
//kleve@andrew.cmu.edu
//Project-02-Variable Faces

var glassesWidth = 8;
var glassesHeight = 8;
var faceWidth = 350;
var faceHeight = 350;
var eyeSize = 50;
var irisSize = 30;
var pupilSize = 15;
var glimmerSize = 7;
var backgroundColor;
 
function setup() {
    createCanvas(640, 480);
    var red; random(50, 250);
    var green; random(100, 250);
    var blue; random(20, 250);
    backgroundColor = color(red, green, blue);
}
 
 function draw() {
    background(backgroundColor);

    //face
    noStroke();
    fill('tan');
    ellipse(width / 2, height / 2, faceWidth, faceHeight);

    //eyes
    fill('white'); //left eyeball
    var eyeLX = width / 2 - faceWidth * 0.25;
    ellipse(eyeLX + 10, height / 2 + 15, eyeSize, eyeSize);

    fill('white'); //right eyeball
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX - 30, height / 2 + 15, eyeSize, eyeSize);

    fill(77,47,23); //left iris
    ellipse(eyeLX + 15, height / 2 + 20, irisSize, irisSize);

    fill(77,47,23); //right iris
    ellipse(eyeRX - 25, height / 2 + 20, irisSize, irisSize);

    fill('black'); //left pupil
    ellipse(eyeLX + 20, height / 2 + 25, pupilSize, pupilSize);

    fill('black'); //right pupil
    ellipse(eyeRX - 20, height / 2 + 25, pupilSize, pupilSize);

    fill('white'); //left eye shimmer
    ellipse(eyeLX + 25, height / 2 + 22, glimmerSize, glimmerSize);

    fill('white'); //right eye shimmer
    ellipse(eyeRX - 15, height / 2 + 22, glimmerSize, glimmerSize);

    //Glasses
    fill('black');
    rect(280, 250, 40, glassesHeight);

    fill('black');
    rect(280, 210, glassesWidth, 80);

    fill('black');
    rect(180, 210, 100, glassesHeight);

    fill('black');
    rect(180, 285, 108, glassesHeight);

    fill('black');
    rect(180, 210, glassesWidth, 75);

    fill('black');
    rect(155, 247, 30, glassesHeight);

    fill('black');
    rect(315, 210, glassesWidth, 80);

    fill('black');
    rect(315, 210, 100, glassesHeight);

    fill('black');
    rect(315, 285, 108, glassesHeight);

    fill('black');
    rect(415, 210, glassesWidth, 75);

    fill('black');
    rect(415, 247, 28, glassesHeight);
}

function mousePressed() {
    faceWidth = random(300, 400);
    faceHeight = random(250, 350);
    glassesWidth = random(5, 15);
    glassesHeight = random(5, 15);
    eyeSize = random(40, 60);
    irisSize = random(25, 35);
    pupilSize = random(10, 20);
    glimmerSize = random(7, 10);
    var red = random(50, 250);
    var green = random(100, 250);
    var blue = random(20, 250);
    backgroundColor = color(red, green, blue);
}

I found this project to be very interesting in that for me it started out with me knowing exactly what I wanted to do, but having no idea how to do it. Through trial-and-error I found out how to change dimensions and colors randomly by using variables to make an interactive project. This project has taught me how to use variables effectively to make my projects more fun and interesting.