Category: Project-02-Variable-Face

Alessandra Fleck – Project-02-Variable Face

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-02

//Start values for face

//eyes
var eyeSize = 50;
var pupilSize = 20;
var pupilHeight = 20;

//face
var faceWidth = 200;
var faceHeight = 200;
var faceColor = 200;

//nose
var noseSize = 10;

//shirt
var shirtColor = 350;

//body
var bodyW = 300;
var bodyH = 350;

//mouth
var mouthSize_1 = 30;
var mouthSize_2 = 10;

//eyebrows
var eyebrowS = 60;

//hair
var hairColor = 100;

//left ear
var earWLeft = 65;
var earHLeft = 65;
//right ear
var earWRight = 65;
var earHRight = 65;

//left arm
var armWLeft = 50;
var armHLeft = 80;
var armWRight = 50;
var armHRight = 80;


 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(232,195,230);
    //set basic face parameters

    //clouds
    fill (189,223,185);
    stroke('white');
    ellipse();

    fill(241,227,faceColor);
    stroke(65,66,64);
    strokeWeight(4);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //change shirt color + make body
    fill (204,191,shirtColor);
    stroke(65,66,64);
    strokeWeight(3);
    ellipse (width / 2, height / 2 + faceHeight * 0.5 + bodyH * 0.5, bodyW, bodyH);

    //body spot
    fill (204,191,162);
    stroke('white');
    strokeWeight(3);
    ellipse (width / 2, height / 2 + faceHeight * 0.5 + bodyH  * 0.5, bodyW / 2, bodyH / 2 + 80);

    

    //mouth shade
    fill(204,191,162);
    stroke(214,199,181);
    ellipse (width /2, 280, 100,100);

    //set left + right eye values
    fill ('white');
    stroke('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //eye pupil values
    fill ('black');
    noStroke();
    var eyeLP = width / 2 - faceWidth * 0.25;
    var eyeRP = width / 2 + faceWidth * 0.25;
    ellipse(eyeLP, height / 2, pupilSize, pupilHeight);
    ellipse(eyeRP, height / 2, pupilSize, pupilHeight);

    //eyebrows
    noFill();
    stroke('brown');
    strokeWeight(5);
    // arc(x, y, w, h, start, stop, [model])
    arc(eyeLX, height / 2, eyebrowS, eyebrowS, PI + QUARTER_PI, TWO_PI - QUARTER_PI);
    arc(eyeRX, height / 2, eyebrowS, eyebrowS, PI + QUARTER_PI, TWO_PI - QUARTER_PI);

    //mouth
    fill ('red');
    stroke(228,140,226);
    ellipse(width / 2, 280, mouthSize_1, mouthSize_2);

    //nose
    fill ('brown');
    noStroke();
    ellipse(width / 2, height / 2 + 20, 20,10);

    //ears
    //left ear
    fill (143,123,77);
    stroke('white');
    ellipse(width / 2 + faceWidth * 0.20 + earWLeft, height / 2 -80, earWLeft, earHLeft);

    //right ear
    fill (143,123,77);
    stroke('white');
    ellipse(width / 2 - faceWidth * 0.20 - earWRight, height / 2 -80, earWRight, earHRight);


    //left paw
    fill (143,123,77);
    stroke('black');
    ellipse(width / 2 - bodyW * 0.20 - armWRight -10, height / 2 + 230, armWRight+50, armHRight);

    //right paw
    fill (143,123,77);
    stroke('black');
    ellipse(width / 2 - bodyW * 0.20 + armWRight + 120, height / 2 + 230, armWRight+50, armHRight);
    

}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(200, 300);
    faceHeight = random(200, 400);
    eyeSize = random(10, 50);
    pupilSize = random(5, 15);
    pupilHeight = random(1,20);
    bodyW = random(100,300);
    shirtColor = random(100,500);
    faceColor = random(150,250);
    mouthSize_1 = random(30, 50);
    mouthSize_2 = random(10,30);
    eyebrowS = random(20,80);

    //variable ear sizes
    

}

For this project I just wanted to rely on simple shapes that move together. Since one rudimentary shape is a circle, I ended up making a bear. Next time when I approach a project such as this, I will want to make sure that all components stay flush with one another, despite the random variable change of their sizes.

Project-02-Variable-Face-Veronica

sketch


/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var ColorR = 255;
var ColorG = 255;
var ColorB = 255;
var smileY = 200;
var gray = 50;

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

}

function draw() {
    background(255, 179, 48);

    //face
    noStroke();
    fill(120, 80, ColorB);
    ellipse(width / 2 - faceWidth / 2 + 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.5,  faceWidth * 0.5);
    ellipse(width / 2 + faceWidth / 2 - 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.5,  faceWidth * 0.5);
    fill('white');
    ellipse(width / 2 - faceWidth / 2 + 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.3,  faceWidth * 0.3);
    ellipse(width / 2 + faceWidth / 2 - 25, height / 2 - faceHeight / 2 + 25, faceWidth * 0.3,  faceWidth * 0.3);
    fill(120, 80, ColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //body
    fill(120, 80, ColorB);
    ellipse(width / 2, height - 90, faceWidth * 2, height - faceHeight);
    fill('white');
    ellipse(width / 2, height - 90, faceWidth * 1.5, height - faceHeight * 2);

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

    //nose
    fill('black');
    ellipse(width / 2, height / 2 + 10, faceWidth / 5,  faceHeight / 8);

    //mouth
    var dist = height / 2 + smileY;
    noFill();
    stroke(255, 205, 0);
    strokeWeight(5);
    curve(eyeLX, height/2, eyeLX + 20, dist, eyeRX - 20, dist, eyeRX, height/2);
    
}

function mousePressed() {
    faceWidth = random(120, 180);
    faceHeight = random(120, 180);
    eyeSize = random(10, 20);
    ColorR = random(150, 220);
    ColorG = random(150, 220);
    ColorB = random(0, 100);
    smileY = random(faceHeight / 5, faceHeight / 3);
    gray = random(100, 255);
}

Initially I wanted to recreate Miyazaki’s Totoro, but it just started to look more and more like a bear so…it’s a bear now. I enjoyed working on this project and especially trying to figure out which/how geometries should be related. Some of the variables include body color/size, eye color/size, head size, ear size, etc.

Sophia Kim Project-02 Variable Face Sec C

sketch

//Sophia S Kim 
//Section C 1:30 
//sophiaki@andrew.cmu.edu
//Project-02-Face Variable

var eyeSize1 = 50; 
var eyeSize2 = 30; 
var faceWidth = 250;
var faceHeight = 275; 
var eyebrow1 = 238; 
var eyebrow2 = 372;
var mouthWidth = 135; 
var mouthHeight = 15; 
var earWidth = 25;
var earHeight = 55;
var faceColor = 46;
var earColor = 73;
var eyeColor = 47;
var eyebrowColorLX = 95;
var eyebrowColorRX = 94; 
var mouthColor = 213; 


function setup() {
	createCanvas(640, 480); /// width,height
}

function draw() {
	noStroke(); 
	background(142, 223, 88); ///background reference to RGB (R,G,B)

	var earLocation = (height/2)-20; // varible - ear location 

    fill(37, earColor, 255); 
    rect((width/2)-(faceWidth*0.57), earLocation, earWidth, earHeight); //left ear 

    fill(37, earColor, 255); 
    rect((width/2)+(faceWidth*0.47), earLocation, earWidth, earHeight); //right ear 

	fill(255, 253, faceColor); //skin color
	ellipse(width/2, height/2, faceWidth, faceHeight); //head shape

	var eyeLX = (width/2) - (faceWidth*0.27); // varible - left eye location 
    var eyeRX = (width/2) + (faceWidth*0.27); // variable - right eye location 

    fill(255, 164, eyeColor); 
    ellipse(eyeLX, (height/2), eyeSize1, eyeSize1); //left eye 

    fill(255, 164, eyeColor);
    ellipse(eyeRX, (height/2), eyeSize2, eyeSize2); //right eye

    fill(89, eyebrowColorLX, 233);
    triangle(eyebrow1, (height/2)-30, eyebrow1+15, (height/2)-45, eyebrow1+30, 
    	(height/2)-30); 
    	//left eyebrow

    fill(194, eyebrowColorRX, 215);
    triangle(eyebrow2, (height/2)-30, eyebrow2+15, (height/2)-70, eyebrow2+30, 
    	(height/2)-30); 
    	//right eyebrow

    var mouthLocation = (height/2)+45 // variable for mouth location

    fill(255, 124, mouthColor);
    rect(eyeLX, mouthLocation, mouthWidth, mouthHeight); //mouth 
 }

function mousePressed() {
	// when the mouse is clicked on, random values within specified ranged are rearranged. 
	eyeSize1 = random(25, 60);
	eyeSize2 = random(10,50);
	faceWidth = random(200, 300);
	faceHeight = random(250,300);
	eyebrow1 = random(225, 260);
	eyebrow2 = random(360, 385);
	mouthWidth = random(130, 140);
	mouthHeight = random(13, 17); 
	earWidth = random(22, 28);
	earHeight = random(53, 57);
	faceColor = random(0, 300);
	earColor = random(45, 200);
	eyeColor = random(25, 150);
	eyebrowColorLX = random(15, 200);
	eyebrowColorRX = random(25, 150); 
	mouthColor = random(140, 330);
}

At first, I struggled with how I would replace common factors with variables. After I started to fill in the numbers, I got the hang of how to use variables. I made these faces based on simple shapes. Maybe next time I could do more detailed features to make it look realistic.

Mimi Jiao _ Face Variable Project – Section E

I wanted to play around with very primitive shapes and unrealistic colors to create a robot-like face celebrating its birthday.
sketch

/* 
Mimi Jiao
Section E
wjiao@andrew.cmu.edu
Project-02
Variable Face
*/

//background color
var BGcolor = 200;
var faceWidth = 100;
var faceHeight = 150;
//x-coordinate position of face
var faceX = 100;
//y-coordinate position of face
var faceY = 100;
var faceColor = 200;
//corner roundness for face
var faceTopLeftCorner = 15;
var faceTopRightCorner = 10;
var faceBottomRightCorner = 14;
var faceBottomLeftCorner = 25;
var eyeColor = 140;
var leftEyeLocationX = .20;
var leftEyeLocationY = .3;
var rightEyeLocationX = .61;
var rightEyeLocationY = .50;
var noseColor = 21;
var nosePosition = 20;
var noseHeight = 15;
var noseWidth = 8;
var hatColor = 200;
var hatHeight = 80;
var hatTip = 20;
var mouthColor = 23;
var mouthShape = 15;
var mouthX = 4;
var mouthY = 1.35;
var mouthHeight = 10;
var mouthWidth = 20;
var faceLength = 70;


function setup() {
    createCanvas(480, 640);
    background(255,255,0);
}
 
function draw() {
    background(255,150,BGcolor);

    //face 
    fill(faceColor,180,255);
    noStroke();
    rect(faceX, faceY, faceWidth, faceHeight,
        faceTopLeftCorner,faceTopRightCorner,
        faceBottomRightCorner,faceBottomLeftCorner);

    //eyes
    fill(eyeColor,255,eyeColor);
    ellipse(faceX + faceWidth*leftEyeLocationX, 
        faceY + faceHeight*leftEyeLocationY,
        20, 20);
    ellipse(faceX + faceWidth*rightEyeLocationX,
        faceY + faceWidth*rightEyeLocationY,
        20,20);

    //nose
    fill(255,noseColor,0);
    rect(faceX + faceWidth*leftEyeLocationX + 5,
        faceY + faceHeight*leftEyeLocationY + nosePosition,
        noseWidth,noseHeight, 5, 5, 5, 5);

    //hat
    fill(hatColor,230,hatColor);
    triangle(faceX+faceWidth/2,faceY,faceX+faceWidth,
        faceY+faceHeight/4,
        faceX+ faceWidth, faceY - hatHeight);
    ellipse(faceX + faceWidth, faceY - hatHeight, hatTip,hatTip);

    //mouth
    fill(255,mouthColor,mouthColor);
    rect(faceX + faceWidth/mouthX,
        faceY + faceHeight/mouthY, mouthWidth, mouthHeight,
        mouthShape,mouthShape,mouthShape,mouthShape);

    //body
    fill(hatColor,230,hatColor);
    rect(faceX + faceWidth/2, faceY + faceHeight, 
        faceWidth*1.5,faceHeight*1.75, 20, 20, 20, 20);

    //arms
    fill(hatColor,230,hatColor);
    rect(faceX - faceWidth/3, 
        faceY + faceHeight/.8, 
        faceLength, 30,10,10,10,10);
    rect(faceX + faceWidth/.75, faceY/.8,
     30, faceLength,10,10,10,10);

    //legs
    fill(hatColor,230,hatColor);
    rect(faceX + faceWidth/1.5, 1.7*(faceY + faceHeight),
        30, faceLength*1.3, 10,10,10,10);
    rect(faceX + faceWidth/.8, 1.7*(faceY + faceHeight),
        30, faceLength*1.3, 10,10,10,10);

}
 
function mousePressed() {
    BGcolor = random(0,90);
    faceWidth = random(73,109);
    faceHeight = random(90,132);
    faceX = random(70,150);
    faceY = random(160,200);
    faceColor = random(0,150);
    faceTopLeftCorner = random(5,25);
    faceTopRightCorner = random(10,40);
    faceBottomRightCorner = random(14,30);
    faceBottomLeftCorner = random(25,50);
    eyeColor = random(0,120);
    leftEyeLocationX = random(.22,.35);
    leftEyeLocationY = random(.29,.39);
    rightEyeLocationX = random(.61,.69);
    rightEyeLocationY = random(.40,.50);
    noseColor = random(21,201);
    nosePosition = random(10,30);
    noseHeight = random(5,10);
    noseWidth = random(4,14);
    hatColor = random(0,255);
    hatHeight = random(60,130);
    hatTip = random(10,50);
    mouthColor = random(0,255);
    mouthShape = random(0,15);
    mouthX = random(3.4,6);
    mouthY = random(1.2,1.4);
    mouthHeight = random(5,10);
    mouthWidth = random(5,20);
    faceLength = random(50,90);
}

Rachel Lee-Project-02-Variable-Face- Section E

Rachel Lee Variable Face

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project-02 (Variable Faces) */


var skinColor = 193; // skin color
var eyelidH = 133;
var eyeballSize = 126; //eye
var reflectionX = 302;
var hornsX1 = 228; //horns
var hornsY1 = 143;
var hornsX2 = 220;
var hornsY2 = 78;
var hornsX3 = 265;
var hornsY3 =114;
var faceSize = 300; //face
var eyelidX = 126; //eyelid
var eyelidY = 130;
var cornerLX = 250; //lip
var cornerY = 275;
var cornerRX = 370;

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

function draw() {
	background(100, 120, 170);
	noStroke();

    // horns
    fill(230, 215, 150);
    triangle(hornsX1, hornsY1, hornsX2, hornsY2, hornsX3, hornsY3);
    triangle(hornsX1 + (width * 0.5 - hornsX1) * 2, hornsY1, hornsX2 + (width * 0.5 - hornsX2) * 2, hornsY2, hornsX3 + (width * 0.5 - hornsX3) * 2, hornsY3);
	
	//face
	fill(163, skinColor, 58);
	ellipse(width * 0.5, height * 0.5, faceSize, faceSize); 

	//eyelid
	fill(70, 115, 50);
	ellipse(width * 0.5, 200, eyelidX, eyelidY); 
	
	//eye
	fill(255);
	ellipse(width * 0.5, 243 - faceSize * 0.1, eyeballSize, eyeballSize); 
	fill(60, 185, 165);
	ellipse(width * 0.5, 243 - faceSize * 0.1, eyeballSize * 0.5, eyeballSize * 0.5); 
	fill(0);
	ellipse(width * 0.5, 243 - faceSize * 0.1, eyeballSize * 0.3, eyeballSize * 0.3); 
	fill(255);
	ellipse(reflectionX, 243 - faceSize * 0.1, eyeballSize * 0.1, eyeballSize * 0.1);

	//mouth
	stroke(70, 115, 50);
	strokeWeight(2);
	noFill();
	curve(cornerLX, cornerY, cornerLX + 15, cornerY + 45, cornerRX + 15, cornerY + 35, cornerRX, cornerY);

}


function mousePressed() {
	faceSize = random (275, 325);
	eyeballSize = random (120, 145);
	// reflectionX = random (302, 320); 
	skinColor = random (160, 230);
	cornerY = random (280, 305);

}

For this project, I decided to try to recreate Mike Wazowski from my favourite Pixar movie, Monster’s Inc. While it took me a while to figure out some aspects of this composition, I really looked forward to seeing what kind of features would be randomly generated– it was rather exciting to play with.

Romi Jin – Project-02-Variable-Face-Section B

sketch

/*Romi Jin
Section B
rsjin@andrew.cmu.edu
Assignment-02-A
*/

var earWidth = 50
var earLength = 150
var earX = 150
var earY = 200

var faceWidth = 225
var faceX = 225
var faceY = 340

var eyeWidth = 35
var eyeX = 180
var eyeY = 350
var eyeColorR = 0
var eyeColorG = 0
var eyeColorB = 0

var noseWidth = 30
var noseLength = 15
var noseX = 225
var noseY = 385

var word = 0
var wordNumber = 0


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

function draw() {
    background(245,215,215);

    //left ear
    noStroke();
    fill(255);
    ellipse(earX,earY,earWidth,earLength);

    noStroke();
    fill(253, 229, 255);
    ellipse(earX,earY+25,earWidth/2,earLength/2);

    //right ear
    noStroke();
    fill(255);
    ellipse(2*earX,earY,earWidth,earLength);

    noStroke();
    fill(253, 229, 255);
    ellipse(2*earX,earY+25,earWidth/2,earLength/2);

    //face
    noStroke();
    fill(255);
    ellipse(faceX,faceY,faceWidth,faceWidth);

    //left eye
    noStroke();
    fill(eyeColorR,eyeColorG,eyeColorB);
    ellipse(eyeX,eyeY,eyeWidth,eyeWidth);

    //right eye
    noStroke();
    fill(eyeColorR,eyeColorG,eyeColorB);
    ellipse(eyeX+85,eyeY,eyeWidth,eyeWidth);

    //nose
    noStroke();
    fill(0);
    ellipse(noseX,noseY,noseWidth,noseLength);

    //text
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(20);
        fill(0);
        text("bunny", 205, 500);


    } else if (word == 2){
        noStroke();
        textSize(20);
        fill(0);
        text("rabbit", 205, 500);

    } else if (word == 3){
        noStroke();
        textSize(20);
        fill(0);
        text("bun", 215, 500);

    } else {
        noStroke();
        textSize(20);
        fill(0);
        text(":)", 225, 500);
    }
}



function mousePressed() {

    earWidth = random(40, 75);
    earLength = random(140,200);

   	eyeColorR = random(0,255);
   	eyeColorG = random(0,255);
   	eyeColor = random(0,255);

   	noseWidth = random(25,40);
   	noseLength = random(10,20);

   	word = random(0,4);
   	wordNumber = random(0,4);

 }

This was a very fun project and a great introduction to variables! Since we had already coded a human face for the previous project, I wanted to do something different this time and created a simple drawing of an animal. (a bunny – my favorite!) It took a lot less time than expected!

Shirley Chen-Project-02-Variable-Face

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-02

var headWidth = 230;
var headHeight = 230;
var eyeSize = 50;
var diff = 1;
var refSize = 0.2;
var angle = 0;
var blushWidth = 40;
var blushHeight = 20;
var color = 139;
var color2 = 98;

function setup() {
    createCanvas(640, 480);
    angleMode = "degree"
}


function draw() {
	background(239, 163, 163);
	fill(255);
	noStroke();
//head
	ellipse(300, 280, headWidth, headHeight);

//ear1
	stroke(183, 105, 105);
	translate(40, 5);
	rotate(angle);
	beginShape();
	curveVertex(220, 200);
	curveVertex(220, 200);
	curveVertex(170, 100);
	curveVertex(200, 100);
	curveVertex(250, 200);
	curveVertex(250, 200);
	endShape();

// //ear2
	beginShape();
	curveVertex(300, 200);
	curveVertex(300, 200);
	curveVertex(340, 100);
	curveVertex(370, 100);
	curveVertex(340, 200);
	curveVertex(340, 200);
	endShape();
	noStroke();
	fill(244, 212, 212);
	beginShape();
	curveVertex(310, 200);
	curveVertex(310, 200);
	curveVertex(330, 150);
	curveVertex(340, 150);
	curveVertex(330, 200);
	curveVertex(330, 200);
	endShape();
	beginShape();
	curveVertex(230, 200);
	curveVertex(230, 200);
	curveVertex(215, 170);
	curveVertex(225, 170);
	curveVertex(240, 200);
	curveVertex(240, 200);
	endShape();

//bowknot
	fill(247, 211, color);
	beginShape();
	curveVertex(240, 210);
	curveVertex(240, 210);
	curveVertex(260, 150);
	curveVertex(280, 150);
	curveVertex(300, 200);
	curveVertex(300, 200);
	endShape();
	beginShape();
	curveVertex(170, 240);
	curveVertex(170, 240);
	curveVertex(170, 180);
	curveVertex(190, 180);
	curveVertex(240, 210);
	curveVertex(240, 210);
	endShape();
	fill(244, 160, 98);
	ellipse(235, 205, 20, 20);

//eyes
	fill(0);
	ellipse(250, 280, eyeSize * diff, eyeSize * diff);
	ellipse(350, 280, eyeSize * diff, eyeSize * diff);
	fill(255);
	ellipse(250 + diff, 280, eyeSize * refSize, eyeSize * refSize);
	ellipse(350 + diff, 280, eyeSize * refSize, eyeSize * refSize);
	ellipse(260 + diff, 280, eyeSize * refSize, eyeSize * refSize + 5);
	ellipse(360 + diff, 280, eyeSize * refSize, eyeSize * refSize + 5);

//nose
	fill(225, 105, 105);
	triangle(290, 300, 310, 300, 300, 310);

//mouth
	fill(242, 85, 85);
	ellipse(300, 330, 30, 30);
	stroke(196, 138, 138);
	strokeWeight(4);
	fill(255);
	beginShape();
	curveVertex(260, 320);
	curveVertex(260, 320);
	curveVertex(270, 330);
	curveVertex(290, 330);
	curveVertex(300, 310);
	curveVertex(300, 310);
	endShape()
	beginShape();
	curveVertex(300, 310);
	curveVertex(300, 310);
	curveVertex(310, 330);
	curveVertex(330, 330);
	curveVertex(340, 320);
	curveVertex(340, 320);
	endShape()

//blush
	fill(244, 212, 212);
	noStroke();
	ellipse(230, 330, blushWidth, blushHeight);
	ellipse(370, 330, blushWidth, blushHeight);
}

//mouse pressed
function mousePressed() {
    headWidth = random(220, 250);
    headHeight = random(220, 250);
    eyeSize = random(35, 40);
    diff = random(1, 2);
    refSize = random(0.2, 0.4);
    angle = random(0, 0.2);
    blushWidth = random(30, 40);
    blushHeight = random(20, 40);
    color = random(139, 255);
}

For this project, I drew a rabbit face with variation of ears, eyes, blush, and the bow knot. For the ears, I rotate them at various angles, and I also keep the eyes and bow knot moving with the ears so the proportion looks correct. The eye size changes randomly with the reflection in the eyes. The bow knot’s color also change randomly. The blush size also changes, too. I enjoyed this project, it was fun! 🙂

Christine Chen-Project-02-Variable-Face

Christine Chen-Project-02-Variable-Face

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-02-Variable-Face
*/


var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var noseWidth = 20;
var noseHeight = 40;
var noseColorR = 94;
var noseColorG = 135;
var noseColorB = 191;
var mouthSize = 20;

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

function draw() {
    background(142, 232, 255);
    noStroke();

    //hair
    fill(34, 34, 34);
    ellipse(width/2, height/2 - 70, 300, 150);

    //face
    fill(255, 183, 202);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //brows
    fill(90, 67, 49);
    var browLX = width/2 - faceWidth * 0.25; 
    var browRX = width/2 + faceWidth * 0.25;
    ellipse(browLX, height/2 - faceWidth * 0.2, 40, 10); //left brow
    ellipse(browRX, height/2 - faceWidth * 0.2, 40, 10); //right brow

    //eye
    fill(45, 44, 44)
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    ellipse(eyeLX, height/2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height/2, eyeSize, eyeSize); //right eye

    //nose
    fill(noseColorR, noseColorG, noseColorB);
    ellipse(width/2, height/2 + faceHeight * 0.1, noseWidth, noseHeight);

    //mouth
    fill(189, 27, 27);
    var mouthY = height/2 + faceHeight * 0.35;
    ellipse(width/2, mouthY, mouthSize, mouthSize);
}

function mousePressed(){
    faceWidth = random(100, 250);
    faceHeight = random(110, 210);
    eyeSize = random(5, 25);
    noseWidth = random(10, 35);
    noseHeight = random(10, 40);
    noseColorR = random(0, 255);
    noseColorG = random(0, 255);
    noseColorB = random(0, 255);
    mouthSize = random(5, 20);
}

I enjoyed this project a lot as I did not expect a lot of the faces that the codes generated. Each of the generative face is hilarious to look at. I also really appreciate how variables make the process of writing the codes so much more convenient as I just have to change one specific part to apply changes to multiple parts whenever I change my mind on something.

Kevin Riordan Project-02-Variable-Face-Section C

sketch

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_02*/
//variables for background color, random stuff
var backColorR = 0;
var backColorG = 0;
var backColorB = 0;
var strokeR = 0;
//variable for eyes (position, color, and size)
var eyeWidth = 0;
var eyeHeight = 0;
var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;
var eyePosX = 0;
var eyePosY = 0;
var eyeballWidth = 0;
var eyeballHeight = 0;
//variable for eyebrows
var browColor = 0;
var browL = 0;
var browR = 0;
//variable for face size
var faceWidth = 0;
var faceHeight = 0;
//variable for neck size
var neckW = 0;
//variable for hat color and coordinates
var hatColorR = 0;
var hatColorB = 0;
var hatColorG = 0;
var hat1 = 0;
var hat2 = 0;
var hat3 = 0;
var hat4 = 0;
var hat5 = 0;
var hat6 = 0;
//variable for nose width and height
var noseW = 0;
var noseH = 0;
//variable for mouth color and curve
var mouthR = 0;
var mouthB = 0;
var mouthG = 0;
var mouthCurveI = 0;
var mouthCurveF = 0;
var mouthStart = 0;
var mouthWeight = 0;
var mouthInside1 = 0;
var mouthInside2 = 0;
var mouthInside3 = 0;
function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(backColorR,backColorG,backColorB);
    //neck
    stroke(0);
    strokeWeight(2);
    fill(250,220,200);
    rect(240-(neckW/2),320,neckW,320);
    //face
    ellipse(240,320,faceWidth,faceHeight);
    //eyes
    strokeWeight(strokeR);
    fill(255);
    ellipse(eyePosX, eyePosY, eyeWidth, eyeHeight);
    ellipse(480-eyePosX, eyePosY, eyeWidth, eyeHeight);
    strokeWeight(strokeR+2);
    fill(eyeColorR,eyeColorB,eyeColorG);
    ellipse(eyePosX, eyePosY, eyeballWidth, eyeballHeight);
    ellipse(480-eyePosX, eyePosY, eyeballWidth, eyeballHeight);
    //eyebrows
    strokeWeight(strokeR+3);
    stroke(strokeR);
    noFill();
    beginShape();
    curveVertex(eyePosX-(eyeWidth/2)-(browL*2),eyePosY-(eyeHeight/2)+browL);
    curveVertex(eyePosX-(eyeWidth/2)-(browL*2),eyePosY-(eyeHeight/2)+browL);
    curveVertex(eyePosX, eyePosY-(eyeHeight/2)-(browL*2));
    curveVertex(eyePosX+(eyeWidth/2)+(browL*2),eyePosY-(eyeHeight/2)+(browL));
    curveVertex(eyePosX+(eyeWidth/2)+(browL*2),eyePosY-(eyeHeight/2)+(browL));
    endShape();
    beginShape();
    curveVertex(480-eyePosX-(eyeWidth/2)-(browR*2),eyePosY-(eyeHeight/2)+browR);
    curveVertex(480-eyePosX-(eyeWidth/2)-(browR*2),eyePosY-(eyeHeight/2)+browR);
    curveVertex(480-eyePosX, eyePosY-(eyeHeight/2)-(browR*2));
    curveVertex(480-eyePosX+(eyeWidth/2)+(browR*2), eyePosY-(eyeHeight/2)+browR);
    curveVertex(480-eyePosX+(eyeWidth/2)+(browR*2), eyePosY-(eyeHeight/2)+browR);
    endShape();
    //mouth
    stroke(mouthR,mouthB,mouthG);
    strokeWeight(mouthWeight);
    fill(mouthInside1,mouthInside2,mouthInside3);
    beginShape();
    curveVertex(eyePosX,eyePosY+mouthStart);
    curveVertex(eyePosX,eyePosY+mouthStart);
    curveVertex(240,eyePosY+mouthStart+mouthCurveF);
    curveVertex(480-eyePosX,eyePosY+mouthStart);
    curveVertex(480-eyePosX,eyePosY+mouthStart);
    endShape();
    fill(250,220,200);
    beginShape();
    curveVertex(eyePosX,eyePosY+mouthStart);
    curveVertex(eyePosX,eyePosY+mouthStart);
    curveVertex(240,eyePosY+mouthStart+mouthCurveI);
    curveVertex(480-eyePosX,eyePosY+mouthStart);
    curveVertex(480-eyePosX,eyePosY+mouthStart);
    endShape();
    //nose
    stroke(0);
    strokeWeight(2);
    fill(250,220,200);
    beginShape();
    curveVertex(240-(noseW/2),320+(faceHeight/8));
    curveVertex(240-(noseW/2),320+(faceHeight/8));
    curveVertex(240,320-noseH);
    curveVertex(240+(noseW/2),320+(faceHeight/8));
    curveVertex(240+(noseW/2),320+(faceHeight/8));
    endShape();
    strokeWeight(strokeR-1);
    line(240-(noseW/2),320+(faceHeight/8),240+(noseW/2),320+(faceHeight/8));
    //hat
    strokeWeight(4);
    fill(hatColorR,hatColorB,hatColorG);
    triangle(hat1,hat2,hat3,hat4,hat5,hat6);
}

function mousePressed() {
    backColorR = random(0,255);
    backColorG = random(0,255);
    backColorB = random(0,255);
    hatColorR = random(0,255);
    hatColorB = random(0,255);
    hatColorG = random(0,255);
    mouthR = random(0,255);
    mouthB = random(0,255);
    mouthG = random(0,255);
    mouthCurveI = random(0,25);
    mouthCurveF = random(eyeWidth,eyeWidth*1.3);
    mouthStart = random(60,90);
    mouthWeight = random(2,5);
    mouthInside1 = random(100,200);
    mouthInside2 = random(100,200);
    mouthInside3 = random(100,200);
    strokeR = random(1,5);
    eyeWidth = random(30,80);
    eyeHeight = random(30,80);
    eyeballWidth = random(10,80);
    eyeballHeight = random(10,80);
    eyeballHeight = constrain(eyeballHeight,10,eyeHeight-10);
    eyeballWidth = constrain(eyeballWidth,10,eyeWidth-10);
    faceWidth = random(350,450);
    faceHeight = random(400,550);
    noseW = random(40,140);
    noseH = random(40,60);
    neckW = random(160,450);
    neckW = constrain(neckW,160,faceWidth-180);
    eyeColorR = random(100,200);
    eyeColorB = random(50,150);
    eyeColorG = random(75,175);
    eyePosX = random(130,150);
    eyePosY = random(280,350);
    browColor = random(0,255);
    browL = random(5,15);
    browR = random(5,15);
    hat1= 240-(faceWidth/1.5);
    hat1= constrain(hat1,0,480);
    hat2= 320-(faceHeight/1.8)+150;
    hat2= constrain(hat2,0,640);
    hat3= 240;
    hat4= 320-(faceHeight/2)-80;
    hat4= constrain(hat4,0,640);
    hat5= 240+(faceWidth/1.5);
    hat5= constrain(hat5,0,480);
    hat6= 320-(faceHeight/1.8)+150;
    hat6= constrain(hat6,0,640);
}

I changed a lot of variables for the face, so every time the mouse is clicked a lot of colors and shapes and positions change. Sometimes the face looks pretty weird, but I used constrain for a lot of the variables so the face should still look like a face no matter what. I also think I layered the mouth behind the nose well, so even when the mouth overlaps the nose, it just looks like the nose is hanging over the mouth.

Dani Delgado Variable Face

sketch

/*Dani Delgado
ddelgad1@andrew.cmu.edu
Section E
Project-02
*/

// eye variables
var eyeType = 1;
//face variables 
var faceWidth = 160;
var faceHeight = 220;
var faceColorR = 240;
var faceColorG = 230;
var faceColorB = 179;
//hair variables
var hairType = 1;
var hairColorR = 95;
var hairColorG = 23;
var hairColorB = 23;
//facial feature variables 
var noseN = 1;
var mouthNum = 1;
var detailNum = 1;


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

}

function draw() {
    background(202, 255, 221);

    	//draw the hair
	var hair = int(hairType);
	if (hair == 1){
		//long hair
		noStroke();
		fill(hairColorR, hairColorG, hairColorB);
		rect(width/2, height/2+25, 230, 350, 95, 95, 10, 10);

	} if (hair == 2){
		//medium hair
		noStroke();
		fill(hairColorR, hairColorG, hairColorB);
		rect(width/2, height/2-20, 225, 250, 95, 95, 10, 10);

	} if (hair == 3){
		//bun
		noStroke();
		fill(hairColorR, hairColorG, hairColorB);
		ellipse(width/2, height/2-40, 225, 230);
		ellipse(width/2, height/3-70, 100, 100);
	}

    //draw the general face
	noStroke();
	fill(faceColorR, 220, faceColorB);
	rectMode(CENTER);
	rect (width/2, height/2, faceWidth, faceHeight, 90);

	//draw the eyes
	var eye = int(eyeType);
	if (eye == 1){
		fill(70, 40, 38);
		ellipse(width/2+40, height/2-20, 29, 29);
		ellipse(width/2-40, height/2-20, 29, 29);
		//pupils
		noStroke();
		fill(250, 250, 250)
		ellipse(width/2+36, height/2-24, 10, 10);
		ellipse(width/2-44, height/2-24, 10, 10);

	} if (eye == 2){
		fill(70, 40, 38);
		arc(width/2+40, height/2-15, 40, 25, 3.14, 0, PI, OPEN);
		arc(width/2-40, height/2-15, 40, 25, 3.14, 0, PI, OPEN);
	}

	//draw the eyebrows
	noFill();
	stroke(90, 60, 50);
	strokeWeight(6);
	arc(width/2+40, height/2-50, 40, 12, 3.24, 6, PI, OPEN);
	arc(width/2-40, height/2-50, 40, 12, 3.24, 6, PI, OPEN);

	//draw the bangs
	noStroke();
	fill(hairColorR, hairColorG, hairColorB);
	rect(width/2+50, height/3-23, 50, 50, 10, 90, 0, 0);
	rect(width/2.2, height/3-23, 100, 50, 90, 10, 0, 0);

	//draw the nose
	var nose = int(noseN);
	if (nose == 1){
		noStroke();
		fill(255, 160, 140);
		rect(width/2, height/1.85, 15, 40, 90, 90, 5, 5);

	} else if (nose == 2){
		noStroke();
		fill(255, 160, 140);
		ellipse(width/2, height/1.75, 25, 15);

	} else if (nose == 3){
		noStroke();
		fill(255, 160, 140);
		triangle(width/2, height/2+20, width/2-15, height/2+35, width/2+15, height/2+35);
	}

	//draw the mouth
	var mouth = int(mouthNum);
	if (mouth == 1){
		noStroke();
		fill(70, 40, 38);
		arc(width/2, height/1.6, 55, 50, 6.28, 3.14, PI, OPEN);
		fill(249,249,249);
		rect(width/2, height/1.6, 55, 8, 0, 0, 35, 35);

	} else if (mouth == 2){
		noFill();
		strokeWeight(8);
		stroke(60, 30, 30);
		arc(width/2, height/1.6, 50, 40, 6.28, 3.14, PI, OPEN);
	}
	
	//draw the details
	var detail = int(detailNum);
	if (detail == 1){
		//freckles
		noStroke();
		fill(163, 112, 10);
		ellipse(width/2.2, height/1.8, 7, 7);
		ellipse(width/2.34, height/1.8, 7, 7);
		ellipse(width/2.48, height/1.8, 7, 7);
		ellipse(width/2.27, height/1.9, 7, 7);
		ellipse(width/2.41, height/1.9, 7, 7);

		ellipse(width/1.84, height/1.8, 7, 7);
		ellipse(width/1.76, height/1.8, 7, 7);
		ellipse(width/1.68, height/1.8, 7, 7);
		ellipse(width/1.80, height/1.9, 7, 7);
		ellipse(width/1.72, height/1.9, 7, 7);

	} if (detail == 2){
		//blush
		noStroke();
		fill(255, 153, 153);
		ellipse(width/2.5, height/2+10, 30, 15);
		ellipse(width/1.67, height/2+10, 30, 15);

	} if (detail == 3){
		//peircings 
		noStroke();
		fill(100,100,100);
		ellipse(width/2+50, height/2-47, 7, 7);
		ellipse(width/2+54, height/2-62, 7, 7);
	}
}

function mousePressed() {
    //hair randomizing
    hairType = random(1, 4);
    hair = random(1,3);
    hairColorR = random(245, 255);
    hairColorG = random(153, 221);
    hairColorB = random(151, 153);

    // face randomizing
    faceWidth = random(155, 200);
    faceHeight = random(220, 250);
    eyeSize = random(10, 30);

    //facecolor randomizing
    faceColorR = random(235, 255);
    faceColorG = random(190, 240);
    faceColorB = random(180, 210);

    //mouth randomizing
    mouthNum = random(1, 3);
    mouth = random(1, 2);

    //nose randomizing
    noseN = random(1, 4);
    nose = random(1, 3);

    //eye randoming
    eyeType = random(1,3);
    eye = random(1,2);

    //detail randoming
    detailNum = random(1,4);
    detail = random(1,3);

}

This project was a great learning experience for me; at the beginning I struggled to wrap my mind around how to apply variables and what to name them. But, as I continued to push through, I found the assignment to become more and more enjoyable as the concepts we learned solidified in my head.
In my drawings, I wanted to keep all of the features within a specific, warm-toned color palette so that the background had a nice contrast. I also wanted to make all of the changing facial features fairly distinct and fun to look at.