Category: Project-02-Variable-Face

Carley Johnson Project 02 Section E

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Assignment 02A
*/

var skinColor = 250
var headH = 175
var headW = 150
var eyeColor = 226
var lipColor = 145
var lipCorner = 200
var hairLength = 220
var eyebrowH1 = 160
var eyebrowH2 = 155

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

function draw() {
    background(182, 212, 115);

    fill(112, 62, 40)
    stroke(112, 62, 40)
    rect(200, 90, 220, hairLength, 100, 100, 0, 0 ) //back hair

   fill(255, skinColor, 180)
   stroke(skinColor) 
   ellipse(300, 200 , headW, headH) //Head

   fill(128, eyeColor, 252)
   stroke(70)
   ellipse (275, 175, 10, 10) //Left Eye

   fill(128, eyeColor, 252)
   stroke(70)
   ellipse (300, 175, 10, 10) //Right Eye

   fill(255, 124, lipColor)
   stroke(255, 124, 145)
   bezier(275, lipCorner, 280, 210, 285, 210, 300, lipCorner) //mouth

   fill(215, 106, 58)
   stroke(215, 106, 58)
   rect (270, 90, 125, 75, 0, 50, 0, 50) //bangs

   fill(112, 62, 40)
   stroke(112, 62, 40)
   bezier(255, eyebrowH1, 270, eyebrowH2, 280, eyebrowH2, 280, eyebrowH1) //Left eyebrow

   fill(112, 62, 40)
   stroke(112, 62, 40)
   bezier(290, eyebrowH1, 290, eyebrowH2, 300, eyebrowH2, 320, eyebrowH1) //right eyebrow

}

function mousePressed() {
     skinColor = random(190, 250)
     headW = random(150, 200)
     headH = random(150, 200)
     eyeColor = random(190, 270)
     lipColor = random(60, 160)
     lipCorner = random(220, 185)
     hairLength = random(200, 300)
     eyebrowH1= random(170, 160)
     eyebrowH2 = random(160, 145)
     
}

This was tough, a real learn-by-doing experience. Now I feel like I really understand variables and how to control them (like learning to add parameters to the ‘randomness’ under the mousePressed function) and am proud of this. It may not be the most complex face, but it definitely changes and the way the expression changes (done by changing the height of the corners of the mouth and eyebrows) which I really like.

Min Jun Kim – Project 2 Variable Face

sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 2
*/



var reee = 150
var faceDiff = 0.8
var faceCol = 250
var eyeSize = 30
var eyeDiff = 0.8
var pupilCol = 1
var browSlant= 10
var mouthFill = 100
var mouthSize = 30
var noseWidth = 10
var noseHeight = 25
var backColor = 100
var browS = 2
var hatHeight=100



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

function draw() {
	'background design'
	noStroke();
	'green background'
	background(107,209,150);
	'aqua background'
	fill(110,206,251);
	rect(0,0,width*3/4,height);
	'dark blue background'
	fill(97,128,234);
	rect(0,0,width/2,height);
	'regular blue background'
	fill(80,146,247);
	rect(0,0,width/4,height);
	'stripe'
	fill(255,235,250);
	quad(0,230,0,170,170,0,230,0);
	'face color'
	fill(255, faceCol,180);
	'face'
	ellipse(width/2, height/2, reee*faceDiff,reee);
	'eye fill'
	fill(250,250,250);
	'eyes left'
	ellipse(width/2-reee*faceDiff*0.25,height/2, eyeSize, eyeSize*eyeDiff);
	'eyes right'
	ellipse(width/2+reee*faceDiff*0.25, height/2, eyeSize,eyeSize*eyeDiff);
	'eye fill'
	fill(100, 100, pupilCol);
	'pupil left'
	ellipse(width/2-reee*faceDiff*0.25,height/2, 10, 10);
	'pupil right'
	ellipse(width/2+reee*faceDiff*0.25, height/2, 10,10);
	'brow power'
	stroke(1);
	strokeWeight(browS);
	'eyebrow left'
	line(width/2-reee*faceDiff*0.35 ,height/2-reee*faceDiff*0.2+browSlant, width/2-reee*0.1, height/2-reee*0.1);
	'eyebrow right'
	line(width/2+reee*faceDiff*0.35 ,height/2-reee*faceDiff*0.2+browSlant, width/2+reee*0.1, height/2-reee*0.1);
	noStroke();
	'mouth fill'
	fill(255,100,mouthFill);
	'mouth'
	ellipse(width/2,height/2+reee*0.28,10+mouthSize,10);
	'nose fill'
	fill(255,175,123);
	'nose'
	triangle(width/2-noseWidth,height/2+reee*0.15, width/2+noseWidth, height/2+reee*0.15, width/2, height/2+reee*0.15-noseHeight);
	'hat'
	stroke(1);
	strokeWeight(3);
	line(width/2-110,height/2-reee*0.2,width/2+110,height/2-reee*0.2);
	fill(1)
	rect(width/2-reee*faceDiff*0.45,hatHeight,reee*faceDiff*0.9,height/2-reee*0.2-hatHeight);

}

function mousePressed() {
	reee = random(130,230);
	faceDiff= random(0.7,1);
	faceCol = random(190,220);
	eyeSize = random(20,35);
	eyeDiff= random(0.6,1);
	pupilCol = random(1,250);
	browSlant = random(1,12);
	mouthFill = random(1,255);
	mouthSize = random(1,30);
	noseWidth = random(8,15);
	noseHeight = random(20,30);
	browS = random(1,3);
	hatHeight = random(0,100);


}

This is my project 2 variable face. It was actually quite fun to do because I got to see a large number of faces. I wanted to do a British soldier inspired piece. It took a bit longer than I wanted though haha.

Judy Li-Project-02-Variable-Face

judyli:Face Project 02

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-02
*/

var eyeSize = 30;
var ballSize = 8;
var ellfaceWidth = 100;
var ellfaceHeight = 150;
var recfaceWidth = 100;
var recfaceHeight = 150;
var noseSize = 5;
var mouthWidth = 10;
var mouthHeight = 5;
var hatWidth = 200;
var hatHeight = 15;
 
function setup() {
    createCanvas(640, 480);
    stroke(0);
    strokeWeight(1.5);
    r = random(255);
    g = random(255);
    b = random(255);
}

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.
    ellfaceWidth = random(125, 250);
    ellfaceHeight = random(125, 250);
    eyeSize = random(10, 30);
    recfaceWidth = random(125, 250);
    recfaceHeight = random(125, 250);
    noseSize = random(1, 5);
    mouthWidth = random(10, 50);
    mouthHeight = random(1, 10);
    recnoseWidth = random(10, 50);
    recnoseHeight = random(10, 50);
    hatWidth = random(250,300);
    hatHeight = random(5,25);
    fill(r,g,b,);
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    scale(7/8);
    background(218,175,32);
    if (mouseX < (width / 2)) {
        //Round Head
        ellipse(width / 4, height / 2, ellfaceWidth,  ellfaceHeight);
        var eyeLX = width / 4 - ellfaceWidth * 0.25;
        var eyeRX = width / 4 + ellfaceWidth * 0.25;
        var ballLX = width/4 - ellfaceWidth * 0.25;
        var ballRX = width/4 + ellfaceWidth * 0.25;
        //Glasses
        push();
        strokeWeight(5);
        stroke(255);
        ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
        ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
        pop();
        //Eyes
        strokeWeight(5);
        ellipse(ballLX, height / 2, ballSize/4, ballSize/4);
        ellipse(ballRX, height / 2, ballSize/4, ballSize/4);
        //Nose
        push();
        stroke(0);
        strokeWeight(5);
        ellipse(width / 4, (height / 2)+20, noseSize, noseSize);
        //Mouth
        strokeWeight(10);
        ellipse(width / 4, (height / 2)+50, mouthWidth, mouthHeight);
        pop();
    }

    if (mouseX >(width / 2)) {
        //Rectangular Head
        rect(3*(width / 5), (height / 3), recfaceWidth,  recfaceHeight);
        var eyeLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
        var eyeRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
        var ballLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
        var ballRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
        //Glasses
        push();
        strokeWeight(5);
        stroke(255);
        ellipse(eyeLX, (height / 3)+50, eyeSize, eyeSize);
        ellipse(eyeRX, (height / 3)+50, eyeSize, eyeSize);
        pop();
        //Eyes
        strokeWeight(5);
        ellipse(ballLX, (height / 3)+50, ballSize/2, ballSize/2);
        ellipse(ballRX, (height / 3)+50, ballSize/2, ballSize/2);
        //Nose
        push();
        stroke(255);
        strokeWeight(5);
        ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2), noseSize, noseSize);
        //Mouth
        strokeWeight(10);
        ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2)+30, mouthWidth, mouthHeight);
        pop();
    }
}

This project was a challenging one at first. I think I had some trouble with some overlaps in terms of what was supposed to show up first, second, and etc. But, I enjoyed writing up the codes for this project because it was fun and I was satisfied with my end results.