Brandon Darreff – Project-02-Variable-Face

bdarreff_project02

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-02-Variable-Face



//left figure hair color
var r1 = 199;
var g1 = 161;
var b1 = 87;

//right figure hair color
var r2 = 152;
var g2 = 136;
var b2 = 215;

//left eye size
var eyeWidth1 = 12;
var eyeHeight1 = 10;

//right eye size
var eyeWidth2 = 10;
var eyeHeight2 = 12;

//left mouth size
var mouthWidth1 = 20;
var mouthHeight1 = 10;

//right mouth size
var mouthWidth2 = 15
var mouthHeight2 = 8

//setup canvas size
function setup() {
    createCanvas(640, 480);
}

//fill background with color and design
function draw () { 
	background (112, 169, 169);
	stroke(200);
	strokeWeight(2);
	noFill();
	ellipse(200, 250, 300, 300);
	ellipse(350, 175, 200, 200);
	ellipse(550, 350, 100, 100);
	noStroke();


	//head & neck left
	fill(231, 200, 163);
	beginShape();
	vertex(125, 350);
	curveVertex(115, 400);
	curveVertex(135, 310);
	curveVertex(135, 290);
	curveVertex(120, 260);
	curveVertex(115, 230);
	curveVertex(125, 200);
	curveVertex(160, 170);
	curveVertex(190, 170);
	curveVertex(230, 190);
	curveVertex(238, 210);
	curveVertex(230, 230);
	vertex(240, 270);
	vertex(230, 280);
	curveVertex(230, 310);
	curveVertex(200, 310);
	curveVertex(190, 330);
	curveVertex(180, 400);
	vertex(125, 350);
	endShape();

	//head & neck right
	beginShape();
	vertex(530, 350);
	curveVertex(540, 400);
	curveVertex(520, 310);
	curveVertex(520, 290);
	curveVertex(535, 260);
	curveVertex(540, 230);
	curveVertex(530, 200);
	curveVertex(495, 170);
	curveVertex(465, 170);
	curveVertex(425, 190);
	curveVertex(417, 210);
	curveVertex(425, 230);
	vertex(415, 270);
	vertex(425, 280);
	curveVertex(425, 310);
	curveVertex(455, 310);
	curveVertex(465, 330);
	curveVertex(475, 400);
	vertex(530, 350);
	endShape();
	
// shirt left
	fill(255);
	beginShape();
	vertex(80, 480);
	curveVertex(80, 480);
	curveVertex(78, 420)
	curveVertex(100, 360);
	curveVertex(120, 350);
	curveVertex(150, 360);
	curveVertex(190, 350);
	curveVertex(200, 370);
	curveVertex(220, 400);
	curveVertex(210, 480);
	vertex(220, 480);
	vertex(80, 480);
	endShape();

// shirt right
	fill(0);
	beginShape();
	vertex(560, 480);
	curveVertex(560, 480);
	curveVertex(562, 420)
	curveVertex(540, 360);
	curveVertex(520, 350);
	curveVertex(490, 360);
	curveVertex(450, 350);
	curveVertex(440, 370);
	curveVertex(420, 400);
	curveVertex(430, 480);
	vertex(420, 480);
	vertex(560, 480);
	endShape();

	//hair left 
	fill(r1, g1, b1);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(115, 260);
	curveVertex(115, 260);
	curveVertex(110, 220);
	curveVertex(115, 170);
	curveVertex(130, 160);
	curveVertex(125, 150);
	curveVertex(160, 140);
	curveVertex(220, 155);
	curveVertex(270, 150);
	curveVertex(230, 180);
	curveVertex(265, 175);
	curveVertex(220, 200);
	curveVertex(160, 180);
	curveVertex(165, 220);
	curveVertex(150, 260);
	curveVertex(115, 260);
	vertex(115, 260);
	endShape();

	//hair right
	fill(r2, g2, b2);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(540, 260);
	curveVertex(540, 260);
	curveVertex(555, 220);
	curveVertex(550, 170);
	curveVertex(540, 160);
	curveVertex(505, 150);
	curveVertex(460, 150);
	curveVertex(415, 180);
	curveVertex(445, 200);
	curveVertex(485, 210);
	curveVertex(500, 220);
	curveVertex(485, 260);
	curveVertex(540, 260);
	vertex(540, 260);
	endShape();

	//left eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(220, 235, eyeWidth1, eyeHeight1);
	//pupil
	noStroke();
	fill(0);
	ellipse(224, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(226, 235, 2, 2);

	//right eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(433, 235, eyeWidth2, eyeHeight2);
	//pupil
	noStroke();
	fill(0);
	ellipse(431, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(429, 235, 2, 2);

	//left mouth
	fill(172, 97, 130);
	ellipse(218, 285, mouthWidth1, mouthHeight1);

	//right mouth
	fill(211, 129, 137);
	ellipse(435, 290, mouthWidth2, mouthHeight2);


	// left sleeve
	stroke(230);
	strokeWeight(1);
	fill(248);
    ellipse(150, 480, 80, 200);

    //right sleeve
    stroke(50);
    fill(25);
    ellipse(500, 480, 80, 200);
    

}
function mousePressed() {

	//left figure hair color change
	r1 = random(75, 200);
	g1 = random(75, 200);
	b1 = random(75, 200);

	//right figure hair color change
	r2 = random(130, 250);
	g2 = random(130, 250);
	b2 = random(130, 250);

	//left eye size
	eyeWidth1 = random(10, 18);
	eyeHeight1 = random(4, 14);

	//right eye size
	eyeWidth2 = random(8, 18);
	eyeHeight2 = random(4, 14);

	//left mouth size
	mouthWidth1 = random(10, 20);
	mouthHeight1 = random(0, 15);

	//right mouth size
	mouthWidth2 = random(8, 20);
	mouthHeight2 = random(0, 10);

}

With the face variable assignment, I utilized two portraits and adjusted facial features of each figure individually to make it appear they are having a conversation.