Category: Project-02-Variable-Face

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 2-Variable Face
*/

//Basics
var bodyG = 219;
var bodyB = 96;
var headW = 178;
var headH = 79;
var eyeW = 120;
var eyeH = 100;
var eyeR = 30;
var mX = 320;
var mY = 350;
var mW = 30;
var mH = 20;
var speedX = 1;
var startX = 0;
var speedY = 1;
var startY = 0;
var bananaX = 0;
var bananaY = 51;


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

function draw() {
	background(233, 229, 228);

	//hair variables
	hairLx = width / 2 - headW / 2;
	hairRx = width / 2 + headW / 2;
	hairY = headH + 20;

	//eye variables
	ballLx = 315 - eyeW / 2;
	ballRx = 325 + eyeW / 2;
	ballY = 213;

	//body shape
	stroke(0);
	strokeWeight(.5);
	fill(251, bodyG, bodyB);
	beginShape();
	curveVertex(146, 480);
	curveVertex(171, 349);
	curveVertex(174, 200);
	curveVertex(hairLx, hairY);
	curveVertex(width / 2, headH);
	curveVertex(hairRx, hairY);
	curveVertex(466, 200);
	curveVertex(469, 349);
	curveVertex(494, 480);
	curveVertex(494, 480);
	endShape(CLOSE);

	//cloth
	stroke(8, 30, 56);
	strokeWeight(1);
	fill(94, 126, 163);
	beginShape();
	curveVertex(211, 480);
	curveVertex(212, 448);
	curveVertex(186, 423);
	curveVertex(160, 385);
	curveVertex(167, 358);
	curveVertex(188, 394);
	curveVertex(221, 418);
	curveVertex(320, 429); //cloth mid point
	curveVertex(419, 418);
	curveVertex(452, 394);
	curveVertex(473, 358);
	curveVertex(480, 383);
	curveVertex(454, 423);
	curveVertex(441, 448);
	curveVertex(443, 480);
	curveVertex(443, 480);
	endShape(CLOSE);

	//pocket
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	beginShape();
	curveVertex(277, 480);
	curveVertex(276, 460);
	curveVertex(320, 468);
	curveVertex(364, 460);
	curveVertex(363, 480);
	curveVertex(363, 480);
	endShape(CLOSE);

	//button
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	circle(219, 435, 20);
	circle(219, 435, 10);
	circle(430, 435, 20);
	circle(430, 435, 10);

	//Left hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairLx, hairY);
	line(width / 2, headH, hairLx - 30, hairY + 20);
	line(width / 2, headH, hairLx + 50, hairY - 20);

	//Right Hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairRx, hairY);
	line(width / 2, headH, hairRx + 30, hairY + 20);
	line(width / 2, headH, hairRx - 50, hairY - 20);

	//Eye
	stroke(0);
	strokeWeight(.5);
	fill(225);
	ellipse(315 - eyeW / 2, 233, eyeW, eyeH);
	ellipse(325 + eyeW / 2, 233, eyeW, eyeH);

	//Eyeball
	ballLx = mouseX;
	ballLx = constrain(ballLx, 315 - eyeW + eyeR, 315 - eyeR);
	ballRx = mouseX;
	ballRx = constrain(ballRx, 325 + eyeR, 325 + eyeW - eyeR);
	ballY = mouseY;
	ballY = constrain(ballY, 233 - eyeH / 2 + eyeR, 233 + eyeH / 2 - eyeR);
	//dark
	noStroke();
	fill(80, 67, 60);
	circle(ballLx, ballY, eyeR);
	circle(ballRx, ballY, eyeR);
	//light
	noStroke();
	fill(53, 40, 33);
	circle(ballLx, ballY, eyeR / 2);
	circle(ballRx, ballY, eyeR / 2);

	//glass
	stroke(148, 148, 148);
	strokeWeight(20);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass shadow
	stroke(175, 174, 175);
	strokeWeight(10);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass belt
	stroke(96, 75, 58);
	strokeWeight(2);
	fill(62, 58, 54);
	rect(165, 230, 23, 27);
	rect(456, 230, 20, 27);

	//Mouse
	stroke(0);
	strokeWeight(.5);
	fill(225);
	triangle(mX, mY, mX - mW / 2, mY - mH, mX + mW / 2, mY - mH);

	//BANANA TEXT
	stroke(198, 143, 79);
	strokeWeight(3);
	fill(225, 181, 143);
	if (keyIsPressed) {
		if ((key == 'a') || (key == 'A')) {
			speedX = -1;
		}
		if ((key == 's') || (key == 'S')) {
			speedX = 1;
		}
		if ((key == 'w') || (key == 'W')) {
			speedY = -1;
		}
		if ((key == 'z') || (key == 'Z')) {
			speedY = 1;
		}
	} 

	textSize(100);
	text('BANANA', startX, startY);
	startX += speedX;
	startY += speedY;
	startX = constrain(startX, 0, width - 450);
	startY = constrain(startY, 80, height - 10);


	//Banana fruit
	bananaX = mouseX;
	bananaX = constrain(bananaX, 0, width - 107);
	bananaY = mouseY;
	bananaY = constrain(bananaY, 52, height - 27);
	stroke(206,154,8);
	strokeWeight(1);
	fill(255, 226, 0);
	beginShape();
	curveVertex(bananaX, bananaY);
	curveVertex(bananaX + 54, bananaY - 3);
	curveVertex(bananaX + 78, bananaY - 16);
	curveVertex(bananaX + 90, bananaY - 31);
	curveVertex(bananaX + 90, bananaY - 48);
	curveVertex(bananaX + 98, bananaY - 50);
	curveVertex(bananaX + 97, bananaY - 33);
	curveVertex(bananaX + 103, bananaY - 31);
	curveVertex(bananaX + 107, bananaY - 22);
	curveVertex(bananaX + 90, bananaY + 11);
	curveVertex(bananaX + 62, bananaY + 24);
	curveVertex(bananaX + 47, bananaY + 27);
	curveVertex(bananaX + 25, bananaY + 23);
	curveVertex(bananaX + 13, bananaY + 20);
	curveVertex(bananaX + 3, bananaY + 8);
	endShape(CLOSE);

}

function mousePressed(){
	bodyG = random(220, 95);
	bodyB = random(95, 220);
	headW = random(150, 200);
	headH = random(75, 100);
	eyeW = random(100, 130);
	eyeH = random(100, 110);
	eyeR = random(20, 40);
	mX = random(315, 325);
	mY = random(340, 380);
	mW = random(25, 50);
	mH = random(15, 45);
}

I had fun making minions. I sketched out the basic shapes based on a picture. The idea is to let his eye balls follow the banana, and make his face features and body color change with mouse click. The text “BANANA” move when pressing “w,” “a,” “z,” and “s,” capitalized or not.

sketch

I had fun sketching this Ghibli character called Kaonashi or “no face”. It was a good exercise for me to learn how mouthPressed function and random() work by changing the size and color using different variables. 

Reference photos:

 

 

/*
SooA Kim
Section D
sookim@andrew.cmu.edu
Project-02-Variable-Face
*/

var eye = 40;
var eyeH = 300;
var faceW = 240;
var mouthH = 10;
var color1 = 255;
var tri1 = 150;
var tri2 = 148;
var tri3 = 184;
var mouthOpen = 1;


function setup() {
    createCanvas(480, 640);
    background (25, 170, 180);
}

function draw() {
    //blackcoat
    strokeWeight(3); 
    fill("black");
    beginShape();
    curveVertex(25, 640);
    curveVertex(25, 640);
    curveVertex(30, 500);
    curveVertex(100, 220);
    curveVertex(240, 120);
    curveVertex(380, 220);
    curveVertex(450, 500);
    curveVertex(455, 640);
    curveVertex(455, 640);
    endShape();

    //face 
    noStroke();
    fill(color1);
    ellipse(240, 330, faceW, 340); 
  
    //eyes
    fill(0);
    ellipse (180, eyeH, eye, eye/2);
    ellipse (300, eyeH, eye, eye/2);
    //shadow?
    ellipse (180, 330, 35, 8);
    ellipse (300, 330, 35, 8);

     //mouth
     ellipse (240, 450, mouthH * 5, mouthH);
  
    //top triangles
    fill(tri1, tri2, tri3);
    triangle (160, 270, 175, 230, 190, 270);
    triangle (290, 270, 300, 230, 320, 270);
    //bottom triangles
    triangle(160, 350, 175, 420, 190, 350);
    triangle(290, 350, 300, 420, 320, 350);  
    ellipse(240, 475, 30, 10);
  
    //mouth2 open
    if (mouthOpen >= 1) {
        fill(0); //black
    }
    else {
        fill(255);   
        ellipse(240, 560, 250, 100);
        fill("red");
        ellipse(240, 560, 250, 55);
        stroke(1);
        line(130, 510, 130, 547);
        line(150, 510, 150, 540);
        line(180, 510, 180, 537); 
        line(210, 510, 210, 533);
        line(240, 510, 240, 533);
        line(270, 510, 270, 533);
        line(300, 510, 300, 535);
        line(330, 525, 330, 540);
        line(350, 525, 350, 547);
        line(130, 573, 130, 620);
        line(150, 580, 150, 620);
        line(180, 585, 180, 620);
        line(210, 587, 210, 620);
        line(240, 587, 240, 620);
        line(270, 586, 270, 620);
        line(300, 585, 300, 620);
        line(330, 580, 330, 620);
        line(350, 573, 350, 620);
    }
}
  
function mousePressed(){
    eye = random(5, 40);
    faceW = random (180, 300);
    mouthH = random(5, 25);
    eyeH = random(305, 320);
    tri1 = random(150, 255);
    tri2 = random(0, 255);
    tri3 = random(0, 255);
    mouthOpen = random(0, 4);
    color1 = random(0, 255);
}

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project-02-variable-Face

var headW = 350;
var headH = 300;
var head_colorR = 250;
var head_colorG = 250;
var head_colorB = 150;
var eyesize = 100;
var pupilsize = 60;
var blushW = 60;
var blushH = 30;
var blush_colorR = 250;
var blush_colorG = 180;
var blush_colorB = 242;
var buttons = 50;
var buttons_colorR = 231;
var buttons_colorG = 129;
var buttons_colorB = 247;
var eyebrowLU = 30;
var eyebrowLD = 100;
var eyebrowRU = 450;
var eyebrowRD = 100;
var backgroundR = 242;
var backgroundG = 161;
var backgroundB = 90;


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

function draw() {
    background(backgroundR,backgroundG,backgroundB);
//body
    fill ('#74eda7');
    noStroke();
    triangle(width/2, height/4.5, 480,640,0,640);
// head
    fill (head_colorR, head_colorG, head_colorB);
    noStroke();
    rectMode(CENTER);
    rect(width/2, height/2.5, headW, headH);
    //rect(width/7.5, height/6, headW, headH);
//eyes    
    var eyeL = width/2 - headW*0.25;
    var eyeR = width/2 + headW*0.25;
    fill('white');
    stroke(255, 204, 0);
    strokeWeight(6);
    ellipse(eyeL,height/2.75, eyesize, eyesize);
    ellipse(eyeR,height/2.75, eyesize, eyesize);
// pupil
    var pupilL = width/2 - headW*0.25;
    var pupilR = width/2 + headW*0.25;
    fill ('#3d4540');
    noStroke();
    ellipse(pupilL, height/2.75,pupilsize, pupilsize);
    ellipse(pupilR, height/2.75,pupilsize, pupilsize);
// left eyebrow 
    stroke('black');
    strokeWeight('20');
    noSmooth();
    line(eyebrowLU,70,190,160);
    line(190,160,30,eyebrowLD);
// right eyebrows
    line(300, 160, 450,eyebrowRD);
    line(eyebrowRU,70,300,160);
//mouth
    fill('#eb876c');
    noStroke();
    quad (width/2-50, height/2, width/2+50,height/2, width/2 +100, height/2+ 100, width/2 -100, height/2+100);
//teeth
    fill('white');
    stroke('#dbdbdb');
    strokeWeight('5');
    rect(width/2-25,height/1.85,50,50);
    rect(width/2+25,height/1.85,50,50);
//blush
    var blushLeft = width/2.25- headW*0.25;
    var blushRight = width/1.8 + headW*0.25;
    stroke('#f25a5a');
    strokeWeight('5');
    fill(blush_colorR,blush_colorG,blush_colorB);
    ellipse(blushLeft, height/2, blushW, blushH);
    ellipse(blushRight, height/2, blushW, blushH);
//buttons
    stroke('#d1d1d1');
    strokeWeight('3');
    fill(buttons_colorR, buttons_colorG,buttons_colorB);
    ellipse (width/2, height/1.4, buttons, buttons);
    ellipse (width/2, height/1.2, buttons, buttons);
    ellipse (width/2, height/1.05, buttons, buttons);

}
//mousepressed
function mousePressed(){
    headW = random(275,430);
    headH = random(250,350);
    head_colorR = random(0,400);
    head_colorG = random(0,300);
    head_colorB = random(0,400);
    blush_colorR = random(0,400);
    blush_colorG = random(0,500);
    blush_colorB = random(0,400);
    eyesize = random(85,230);
    pupilsize = random(20,85);
    blushH = random(30,70);
    blushW = random(60,100);
    buttons_colorR = random(0,300);
    buttons_colorG = random(0,400);
    buttons_colorB = random(0,200);
    buttons = random(40,70);
    backgroundR = random(0,200);
    backgroundG= random(0,200);
    backgroundB = random(0,200);

   
}

 

 

I started this project first by sketching an imagery character. Last project, I used Adobe illustrator to help me point out coordinates but this time, I wanted to challenge myself but starting on a blank canvas. It was more challenging and time consuming than last time but definitely helped me understand the concept of coding and building my own code. 

sketch

var headHeight = 236;
var headWidth = 213;
var hairHeight = 236;
var hairWidth = 213;
var eyeHeight = 26.5;
var eyeWidth = 26.5;
var mouthHeight = 14.389;
var mouthWidth = 93.842;
var eyeY = 225;

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

function draw() {
	background('#9BE58C');
	// hair
	fill('#664E42');
	ellipse (320 + hairWidth/2, 240, 200, 200);
	ellipse (320 - hairWidth/2, 240, 200, 200);
	// hair
	fill('#664E42');
	ellipse (320, 240, hairWidth*1.5, hairHeight*1.5);
	 var eyeLX = width / 2 - headWidth * 0.25;
    var eyeRX = width / 2 + headWidth * 0.25;
	// head 
	fill ('#E1C1B5');
	ellipse (320, 240, headWidth, headHeight);
	// eyes 
	fill ('#77A7D9');
	ellipse (eyeLX, eyeY, eyeWidth, eyeHeight);
	ellipse (eyeRX, eyeY, eyeWidth, eyeHeight);
	// mouth 
	fill ('#D880AA');
	ellipse (320, 285, mouthWidth, mouthHeight);
}


function mousePressed() {
	headWidth = random (100, 300);
	headHeight = random (100, 300);
	eyeHeight = random (10, 50);
	eyeWidth = random (10, 40);
	mouthHeight = random (5, 50);
	mouthWidth = random (20, 70);
	eyeY = random (180, 250);
	hairHeight = random (100, 350);
	hairWidth = random (100, 350);
}

My inspiration started out as being inspired by my self portrait from last week. I wanted to make simple faces that when changed randomly would create fun combinations and expressions. I used Illustrator to sketch out examples of my ideas and used those sketches as my starting ellipses in my code. I thought adding some ellipses around the face could create some fun structures that looked like hair. After finishing my work, I realized it reminded a lot of Adventure Time when the humans wear their animal hats.