Month: September 2018

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 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.

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.

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.