pigface

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 300;
var faceColorR = 241;
var faceColorG = 146;
var faceColorB = 188;
var eyeColorR = 126;
var eyeColorG = 242;
var eyeColorB = 230;
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
var mouthHeight = 480 / 2 + 40
var noseHeight = 25

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(226, 179, 239);

    // face color
    stroke(0);
    strokeWeight(2);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye variables
    var eyeLX = 640 / 2 - faceWidth * 0.25;
    var eyeRX = 640 / 2 + faceWidth * 0.25;

    // eyeball shapes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize * 3/4);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize * 3/4);

    // irises shape
    strokeWeight(.75);
    // the iris color will change but the variables are rearranged so that 
    // they are not the same color as the face
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
    ellipse(eyeRX, height / 2, eyeSize * 2/3, eyeSize * 2/3);

    // Pupil
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
    ellipse(eyeRX, height / 2, eyeSize * 1/3, eyeSize * 1/3);


    //eyebrow variables
    var eyebrowLX = eyeLX - 30;
    var eyebrowRX = eyeRX - 30;

    // left eyebrow shape
    noStroke();
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX + 30, height / 2 - 40);
    curveVertex(eyebrowLX + 50, height / 2 - 35);
    curveVertex(eyebrowLX + 50, height / 2 - 30);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    endShape();

    // right eyebrow shape
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 30, height / 2 - 40);
    curveVertex(eyebrowRX + 10, height / 2 - 35);
    curveVertex(eyebrowRX + 10, height / 2 - 30);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    endShape();

    // mouth shape
    fill(0);
    stroke(235, 65, 97);
    strokeWeight(4);
    arc(width / 2, faceHeight, 80, 80, 0, PI, CHORD);

    // restraining mouth height to stay below 2/3 of the way down 
    // the page as to not overlap with the eyes as they move
    if (faceHeight <= height * 2/3) {
        faceHeight = mouthHeight;
    }

    // Pig nose
    stroke(0);
    fill(227, 138, 190);
    ellipse(width / 2, faceHeight - noseHeight, 70, 60);

    // nostrils
    fill(0);
    ellipse(width / 2 - 10, faceHeight - noseHeight, 8, 15);
    ellipse(width / 2 + 10, faceHeight - noseHeight, 8, 15);

    // ears
    strokeWeight(3);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(eyeLX, faceHeight * 1/3, 90, 85);
    ellipse(eyeRX, faceHeight * 1/3, 90, 85);

    // cheaks
    // use eyeRX as x value so that the cheeks move with the eyes
    arc(eyeRX + 35, faceHeight + 10, 80, 80, PI, PI + HALF_PI, OPEN);
    arc(eyeLX - 35, faceHeight + 10, 80, 80, PI + HALF_PI, TWO_PI, OPEN);


}
 

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(150, 500);
    faceHeight = random(100, 400);
    eyeSize = random(30, 85);
    faceColorR = random(235, 244);
    faceColorG = random(54, 194);
    faceColorB = random(161, 224);
    eyebrowLX = random(eyeLX - 50, eyeLX - 10);
    eyebrowRX = random(eyeRX - 50, eyeLX - 10);
    mouthHeight = random(270, 330);
    noseHeight = random(40, 15);
    eyeColorR = random(126, 242);
    eyeColorG = random(126, 242);
    eyecolorB= random(126, 242);
}

It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.

Face

//John Legelis
//Section D 3:00-4:30
//jlegelis@andrew.cmu.edu
//Project-02 Variable Faces; Face Variables

function setup() {
    createCanvas(480, 640);
    background(0);
  
}
var centerX
centerX = 480/2

var centerY
centerY = 640/2


function mousePressed() {
    loop();
    noLoop();
}

function draw() {
    
    var BcolorR
    BcolorR = random(126,240)
    var BcolorG
    BcolorG = random(126,240)
    var BcolorB
    BcolorB = random(126,240)

    background(BcolorR,BcolorG,BcolorB);
    
    
    // randomize face dimensions
    var faceW;
    faceW = random(0+100,480-100);

    var faceH;
    faceH = random(0+50,640-50);

    var max_nose_gap
    max_nose_gap = faceW/7
    var max_eye_size
    max_eye_size = faceW/2 - (max_nose_gap)

    ellipseMode(CENTER);
    var FcolorR
    FcolorR = random(126,240)
    var FcolorG
    FcolorG = random(126,240)
    var FcolorB
    FcolorB = random(126,240)
    fill(FcolorR,FcolorG,FcolorB);
   
    //Draw Face
    ellipse(centerX, centerY, faceW, faceH);


    // randomize eye width in relation to face dimensions and not larger than largest possible
    var eyeW;
    eyeW = min((random(faceW / 6, faceW/2)),(max_eye_size));

    // randomize eye height in relation to face dimensions
    var eyeH;
    eyeH = random(faceH/5, faceH/9);

    // randomize eye placement within left side of place and not overlapping eye width with nose or edge of face
    var pY;
    pY = centerY;
    
    //calculate leftmost left pupil X value   
    var lpXmin
    lpXmin = centerX - faceW/2 + eyeW/2

    //calulate rightmost left pupil X value
    var lpXmax
    lpXmax = centerX - eyeW/2 - (max_nose_gap/2)

    var lpX;
    lpX = random(lpXmin, lpXmax)

    // draw left eye
    fill(255)
    ellipse(lpX, pY, eyeW, eyeH)

    // draw left pupil
    ellipseMode(CENTER);
    fill(0);
    ellipse(lpX, pY, eyeW/3, eyeH);

    //figure out coordinate of right pupil
    
    var centerX_to_lpX
    centerX_to_lpX = centerX - lpX

    var rpX
    rpX = centerX + centerX_to_lpX

    //draw right eye
    fill(255)
    ellipse(rpX, pY, eyeW, eyeH)

    //draw right pupil
    fill(0)
    ellipse(rpX, pY, eyeW/3, eyeH)





    //NOSE----------------------------------------------------------------------

    //nose bridge -----------

    // nose bridge top y
    var nbtY
    nbtY = centerY

    // random nose bottom y
    var nbY
    nbY = random(centerY+faceH/6, centerY+faceH/3)

    //random nose bridge width 
    var nbW
    nbW = min(max_nose_gap, faceW/10)
    print("noseWidth =" + nbW)

    //nose bridge left x
    var nblX
    nblX = centerX - nbW/2

    //nose bridge right x
    var nbrX
    nbrX = nblX + nbW

    //draw nose bridge rectangle
    fill(FcolorR,FcolorG,FcolorB)
    rectMode(CORNERS)
    rect(nblX,nbtY, nbrX,nbY)

    //nose bulb------------
    var bulbW
    bulbW = random(faceW/6,faceW/8)

    var bulbH
    bulbH = random(faceH/10, faceH/15)

    var bulbtX
    bulbtX = centerX - bulbW/2

    var bulbtY
    bulbtY = nbY - bulbH

    var bulbbX
    bulbbX = centerX + bulbW/2

    var bulbbY
    bulbbY = nbY

    rect(bulbtX, bulbtY, bulbbX, bulbbY)



//MOUTH------------------------------------------------------------------
    var mW
    mW = random(faceW/3, faceW/4)

    var mH
    mH = random(faceH/7, faceH/10)

    var mcX
    mcX = centerX

    var mcY
    mcY = ((nbY+ (centerY+faceH/2))/2)

    rectMode(CENTER)
    fill(FcolorR+40, FcolorG+40, FcolorB+40)
    rect(mcX, mcY, mW, mH)

    line(mcX-mW/2, mcY, mcX+mW/2, mcY)


    noLoop();

}

This project demanded the use of variables because all of the facial variants were based on ratios involving the facial dimensions. These dimensions change with every click so the values for many dimensions of the face are derived from there.

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-02

var facew = 200
var faceh = 200
var color1 = 219 
var color2 = 255
var color3 = 238
var eyesize = 5
var pupildiff = 40
var mouthopen = 10

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

function draw() {
	background(219,255,238);
	//bubbles
	noFill();
	ellipse(500,80,180,120);
	ellipse(480,180,50,35);
	//word
    textSize(35);
    strokeWeight(4);
	text("wut?",470,100);
	//face
	fill(219,255,238);
	stroke(249,192,180);
	strokeWeight(6);
	rect(width*0.2,height*0.15,facew,faceh,10);
	//body
	rect(width*0.4,height*0.15+faceh,facew*0.7,300,10);
	//book
	fill(color1,color2,color3);
	rect(width*0.4*0.8,(height*0.15+faceh)*1.3,facew*0.7*0.8,200,10);
	//eye
	fill(249,192,180);
	stroke(249,192,180);
	strokeWeight(6);
	ellipse(width*0.2+facew/5,height*0.15+faceh/4,eyesize,eyesize);
    ellipse(width*0.2+facew/5+pupildiff,height*0.15+faceh/4,eyesize,eyesize);
	//mouth
	fill(254,225,124);
	rect(width*0.2+facew/4,height*0.15+faceh/3,facew/2,faceh/2+mouthopen,10);
	//teeth
	fill(255);
	rect(width*0.2+facew/3.5,height*0.15+faceh/3,facew/8,faceh/10,10);
	rect(width*0.2+facew/3.5+(facew/2)*0.6,height*0.15+faceh/3,facew/8,faceh/10,10);
}


function mousePressed() {
    facew = random(150,300);
    faceh = random(150,280);
    color1 = random(165,255);
    color2 = random(165,255);
    color3 = random(195,255);
    eyesize = random(5,22);
    pupildiff = random(40,100);
    mouthopen = random(-50,20);
}

I was inspired by Domo the brown monster when I first started my project. But later I decided to make a meme-like character with a melodramatic expression while doing something. Overall, I feel like this project is challenging but enjoyable.