selinal-Project-02

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project 02

var nosesi = 75 //size of nose
var noseco = 40 //R value for nose
var noseco2 = 120 //G value for nose
var glintx = 210 //x-location for glint
var glinty = 190 //y for glint

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

}

function draw() {
    //create facial surface
    stroke(0);
    strokeWeight(3);
    fill(230, 80, 160);
    ellipse(320, 240, 440, 330);

    //creating parameters for the smile
    var lipx = constrain(mouseX, 130, 220); //defining the interactive limits of the mouse location
    var lipy = constrain(mouseY, 250, 320); 

    //creating the mouth
    noFill();
    stroke(0);
    strokeWeight(1);
    beginShape();
    curveVertex(lipx, lipy);
    curveVertex(lipx, lipy);
    curveVertex(width/2 - lipx/2, lipy + 50);
    curveVertex(width/2 + lipx/2, lipy + 50);
    curveVertex(width - lipx, lipy);
    curveVertex(width - lipx, lipy);
    endShape();

    //creating the nose
    fill(noseco, noseco2, 130);
    stroke(0);
    strokeWeight(1);
    ellipse(320 , 240, nosesi, nosesi/2);

    //defining eyebrow raise and parameters
    var eyebroy = constrain(mouseY, 120, 170);

    stroke(150, 100, 100);
    strokeWeight(10);
    line(160, 180, 250, eyebroy); //left brow
    line(480, 180, 390, eyebroy); //right brow

    //creating blinking eyes
    var pupil = random(20, 35); 

    stroke(0);
    fill(0);
    ellipse(200, 190, pupil, pupil); //left eye
    ellipse(440, 190, pupil, pupil); //right eye

    strokeWeight(0);
    fill(255);
    ellipse(glintx, glinty, 10, 10); //left eyeglint
    fill(255);
    ellipse(width - glintx, glinty, 10, 10); //right eyeglint
    

}
    


function mousePressed() {
    nosesi = random (20, 130); //nose width
    noseco = random (0, 250); //value of R for nose
    noseco2 = random (110, 130); //value of G for nose
    glintx = random (180, 220); //random placement of white eyeglint ellipeses on x-axis
    glinty = random (180, 200); //random placement of eyeglint on y-axis
}

Jihee_Project2(Face Variables)

jiheek1_project2(faceVariables)

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project2 face variables
//section D

var pupilRed = 226;
var pupilGreen = 172;
var pupilBlue = 75;

var ribbonRed = 255;
var ribbonGreen = 160;
var ribbonBlue = 228;

var lashHeight = 320;
var mouthWidth = 41;
var mouthHeight = 28;
var earLoc = 360;

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

function draw() {
    background(242, 187, 205);

//these variables will allow the mouse to control the pupils within the eyeball (white area)
var x = constrain(mouseX, 203.5, 216.5);
var y = constrain(mouseY, 263.5, 276.5);


    //ears
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2-80, earLoc, 20, 20);
    ellipse(width/2+80, earLoc, 20, 20);

    //face
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2, height/2+40, 160, 160);

    //legs
    fill(239, 220, 228);
    rect(width/2-15, height/2+200, 8, 8); //left leg
    rect(width/2+8, height/2+200, 8, 8); //right leg

    //eyes shape (white area)
    fill(255);
    noStroke();
    ellipse(210, 350, 35, 35); //left eye
    ellipse(270, 350, 35, 35); //right eye

    //pupils shape
    fill(pupilRed, pupilGreen, pupilBlue);
    noStroke();
    ellipse(x, 354, 22, 22); //left eye
    ellipse(y, 354, 22, 22); //right eye

    //mouth
    fill(0);
    noStroke();
    ellipse(240, 396, mouthWidth, mouthHeight);

    //clothes
    fill(255);
    quad(width/2-50, height/2+200, width/2-15, height/2+120, width/2+15, height/2+120, width/2+50, height/2+200); //under dress
    fill(ribbonRed, ribbonGreen, ribbonBlue);
    quad(width/2-15, height/2+120, width/2-50, height/2+200, width/2+15, height/2+120, width/2+50, height/2+200); //cape
    ellipse(width/2-22.5, height/2-40, 45, 45); //ribbon_left
    ellipse(width/2+22.5, height/2-40, 45, 45); //ribbon_right
    ellipse(width/2-11, height/2+208, 8, 8); //left shoe
    ellipse(width/2+12, height/2+208, 8, 8); //right shoe

    //lashes
    fill(0);
    stroke(0);
    strokeWeight(1);
    line(204, 332, 200, lashHeight+5); //left_first
    line(210, 332, 210, lashHeight); //left_second
    line(216, 332, 220, lashHeight+5); //left_third
    line(264, 332, 260, lashHeight+5); //right_first
    line(270, 332, 270, lashHeight); //right_second
    line(276, 332, 280, lashHeight+5); //right_third
}

function mousePressed() {
    pupilRed = random(200, 250);
    pupilGreen = random(160, 230);
    pupilBlue = random(60, 180);
    lashHeight = random(295, 320);
    ribbonRed = random (100, 255);
    ribbonGreen = random (0, 180);
    ribbonBlue = random (150, 240);
    mouthWidth = random (0, 41);
    mouthHeight = random (0, 41);
    earLoc = random (360, 370);
    }

sketch
initial stages on illustrator just for dimensions

To begin with, I sketched a faces that I wanted to code just to visualize some possible variations and used Adobe Illustrator to get the approximate dimensions. In this project, I varied the sizes and colors of facial elements and apparels. I also incorporated constrains to make the pupils more interactive.

rgroves – project02 – Variable Face

sketch

//Rebecca Groves
//Section B
//rgroves@andrew.cmu.edu
//Week 02 Variable Face

//color of fur
var reds = [60, 110, 184, 220]; 
var r = 60;
var b = 60;
var g = 60;
//color of chin
var chinvariables = [1, 2, 3, 4, 5];
var v = 1;
//color of eyes
var eyereds = [210, 194, 253, 147, 152];
var eyer = 210;
var eyeb = 203;
var eyeg = 91;
//size of eyes
var eyeseperation = 230;
var eyewidth = 60;
var eyeheight = 45;
var pupilwidth = 10;
var eyecurve = 30
//size of nose
var nosemultiplier = 1;
var jowelwidth = 90;
var jowelheight = 75;
//right mustache
var rtop = 365;
var rbottom = 400;
var rlength = 70;
//left mustache
var ltop = 340;
var lbottom = 370;
var llength = 50;


function setup() {
    createCanvas(600, 600);
    background(222,226,222);
}

function draw() {
	//headshape
	noStroke();
	fill(r, b, g);
	if (r == 60){
		b = 60;	
		g = 60;
	} else // blue grey
	if (r == 110){
		b = 124;
		g = 138;
	} else // orange
	if (r == 184){
		b = 115;
		g = 55;
	} else 
	if (r == 220){
		b = 220;
		g = 220;
	}
	beginShape();
	vertex(150, 600);
	vertex(150, 90);
	vertex(220, 180);
	vertex(600 - 220, 180);
	vertex(600 - 150, 90);
	vertex(600 - 150, 600);
	endShape();

	//eyes
	ellipseMode(CENTER);
	fill(eyer, eyeb, eyeg);
	if (eyer == 210){ // yellow green
		eyeb = 203;	
		eyeg = 91;
	} else // turquoise
	if (eyer == 194){ 
		eyeb = 248;
		eyeg = 182;
	} else // yellow
	if (eyer == 253){ 
		eyeb = 212;
		eyeg = 37;
	} else // brown
	if (eyer == 147){
		eyeb = 66;
		eyeg = 38;
	} else // blue
	if (eyer == 152){
		eyeb = 186;
		eyeg = 205;
	}
	rectMode(CENTER);
	rect(eyeseperation, 290, eyewidth, eyeheight, 0, eyecurve, 0, eyecurve);
	rect(600- eyeseperation, 290, eyewidth, eyeheight, eyecurve, 0, eyecurve, 0);
	//pupils
	fill(60);
	ellipse(eyeseperation, 290, pupilwidth, eyeheight);
	ellipse(600 - eyeseperation, 290, pupilwidth, eyeheight);
	//eye highlight
	fill(220);
	ellipse(eyeseperation + 10, 290 - (eyeheight * .15), 20, 15);
	ellipse(600 - eyeseperation + 10, 290 - (eyeheight * .15), 20, 15)

    //ears
    noStroke();
    fill(r - 50, b - 70, g - 50);
    triangle(150, 90 + 20, 220 - 20, 180, 150, 180);
    triangle(600 - 150, 90 + 20, 600 - (220 - 20), 180, 600 - 150, 180);

    //chin
    if (v == 4) { //make chin occasionally white
    	fill(230);
    	ellipse(300, 370 + (jowelheight * .4), 55, 55); 
    } else {
    	fill(r - 50, b - 70, g - 50);
    	ellipse(300, 370 + (jowelheight * .4), 55, 55);
    }
    

    //jowels
    if (v == 4) { //make jowels occasionally solid
    	fill(r, b, g);
    	ellipse(300 - 35, 370, jowelwidth, jowelheight);
    	ellipse(300 + 35, 370, jowelwidth, jowelheight);
    } else {
    	fill(230);
    	ellipse(300 - 35, 370, jowelwidth, jowelheight);
    	ellipse(300 + 35, 370, jowelwidth, jowelheight);
    }
    //left mustache
	noStroke();
	fill(r, b, g);
	ellipseMode(CORNERS);
	ellipse(300, ltop, 300 - llength, lbottom);
	//right mustache
	ellipse(300, rtop, 300 + rlength, rbottom);

    //nose
	fill(211, 177, 160);
	rect(300, 325, 50 * nosemultiplier, 15 * nosemultiplier, 5);
	triangle(300 - (20 * nosemultiplier), 320, 300 + (20 * nosemultiplier), 320, 300, 300 + (50 * nosemultiplier));
	strokeWeight(3);
	stroke(156, 102, 81);
	line(300, 300 + (50 * nosemultiplier), 300, 335)
}

function mousePressed(){
	reds = [60, 110, 184, 220];
	r = random(reds);
    eyereds = [210, 194, 253, 147, 152];
    eyer = random(eyereds);
    chinvariables = [1, 2, 3, 4, 5];
    v = random(chinvariables);
    eyeseperation = random(210, 260);
    eyewidth = random(45, 70);
    eyeheight = random(20, 50);
    pupilwidth = random(5, 20);
    eyecurve = random(20, 50);
    nosemultiplier = random(.75, 1.25);
    jowelwidth = random(70, 140);
    jowelheight = random(65, 110);
    rtop = random(370, 370 - (jowelheight * .5));
    ltop = random(370, 370 - (jowelheight * .5));
    rbottom = rtop + random(20, 70);
    while (rbottom > (370 + (jowelheight * .5))){
    	rbottom = rtop + random(20, 70);
    }
    lbottom = ltop + random(20, 70);
    while (lbottom > (370 + (jowelheight * .5))){
    	lbottom = ltop + random(20, 70);
    }
    rlength = (30, jowelwidth - 40);
    llength = (30, jowelwidth - 40);
}

For this project I was inspired by my childhood cats. They were both tuxedo cats, and most people could only tell them apart by the markings around their mouths – one had a little black mustache and one had a white chin. Here are pictures of them:

1/5 of the time it generates a cat with a solid color face and a white chin and 4/5 of the time it generates a cat with a uniquely shaped mustache. The fur color, eye color and shape, and nose size also change.

ssharada-project-02-variable-face-section-a

project-02-1.js

//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Project-02-Variable Face

var x = 0
var y = 0
var eyeWidth = 12.5
var eyeHeight = 17.5
var earWidth = 50
var earHeight = 100
var bodyWidth = 350
var bodyHeight = 750
var armPlacementX = 100
var armPlacementY = 675
var noseWidth = 20
var noseHeight = 30
var eyeColour = (119,79,56)
var noseColour = (119,79,56)
var bodyColour = (255, 254, 240)

function setup() {
	createCanvas(500, 800);
	background(218,239,239);	
}

function draw() {	
	if (random(1) > 0.5) {
		stroke(114, 169, 182);
		strokeWeight(.5);
    	line(x, y, x-40, y-40);
 	} 
 	else {
 		stroke(114, 169, 182);
 		strokeWeight(.5);
    	line(x, y-40, x-40, y);
	}

	x += 60;
	if (x > width) {
		x = 0;
		y += 10;
	}

	if (y > height) {
		background(218,239,random(220,260));
		x = 0;
		y = 0;
	}
//ears
	push();
	rotate(PI*3.8);
	translate(-475,150);
	fill(bodyColour);
	stroke(241,212,175);
	strokeWeight(2);
	ellipse(width/1.6, height/1.9, earWidth, earHeight);
	ellipse(width/3.2, height/1.8, earWidth, earHeight);
	pop();

//body, arm, ears
	push();
	rotate(PI*3.8);
	translate(-475,150);
	fill(bodyColour);
	stroke(241,212,175);
	strokeWeight(2);
	ellipse(width/2, height/1.06, bodyWidth, bodyHeight);
	ellipse(armPlacementX, armPlacementY, width/4, height/2);
	pop();

//paw fingers
	stroke(119, 79, 56);
	strokeWeight(1.5);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);

	push();
	translate(-11, 4);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);
	pop();

	push();
	translate(-18, 14);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);
	pop();

//eyes
	fill(eyeColour);
	noStroke();;
	ellipse(width/3, height/1.17, eyeWidth, eyeHeight);
	ellipse(width/2.3, height/1.25, eyeWidth, eyeHeight);

//nose
	push();
	rotate(PI*0.175);
	translate(340,-160);
	fill(noseColour);
	ellipse(width/2.3, height/1.25, noseWidth, noseHeight);
	pop();

//mouth
	push();
	noFill();
	stroke(eyeColour);
	arc(250, 700, 75, 120, PI*0.17, PI/1.73);
	pop();
}

function mouseClicked(){
	background(218,239,random(220,260));
	y=0
	x=0
	earWidth = random(25, 75);
	earHeight = random(75, 125);
	eyeWidth = random(5, 25);
	eyeHeight = random(10, 30);
	armPlacementX = random(75, 125);
	armPlacementY = random(650, 700);
	eyeColour = (random(99,139),random(59,99),random(56,166));
	noseColour =(random(99,139),random(59,99),random(56,166));
	noseWidth = random (noseWidth-7.5, noseWidth+7.5);
	noseHeight = random (noseHeight-7.5, noseHeight+7.5);
}


































 

This is a polar bear that is waving at you with a little precipitation around him. The eyes, arm movement, background, nose, and ears have been made variable through colour and/or positioning.

Project-02-Variable-Face-sjahania

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 175;
var faceHeight = 150;
var noseWidth = 50;
var noseHeight = 30;
var pupilX = 0;
var pupilY = 0;
var faceRedness = 190;
var noseRedness = 220;
var earSize = 50;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(255);

    //ears
    fill(noseRedness, 180, 184);
    ellipse(width / 2 - faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)
    ellipse(width / 2 + faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)

    //face
    fill(faceRedness, 113, 166);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eyes
    fill(255);
    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);

    //pupils
    fill(0);
    ellipse(eyeLX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);
    ellipse(eyeRX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);

    //nose
    fill(noseRedness, 180, 184);
    ellipse(width / 2, height / 2 + faceHeight / 4, noseWidth,noseHeight);


    //nostrils
    fill(0);
    var Lnostril = width / 2 - noseWidth / 4
    var Rnostril = width / 2 + noseWidth / 4
    ellipse(Lnostril, height / 2 + faceHeight / 4, 10, 10);
    ellipse(Rnostril, height / 2 + faceHeight / 4, 10, 10);

    //speech bubble
    fill(255);
    noStroke();
    rect(450, 75, 150, 125, 25);
    triangle(425, 250, 460, 195, 480, 195);

    //hamburger
    fill(255,201,77);
    arc(525, 125, 80, 60, PI, TWO_PI);
    fill(224,37,33);
    rect(485, 125, 80, 10, 15);
    fill(255,201,77);
    rect(485, 135, 80, 6, 15);
    fill(74,207,0);
    rect(485, 141, 80, 6, 15);
    fill(68,37,33);
    rect(485, 147, 80, 15, 15);
    fill(255,201,77);
    rect(485, 162, 80, 15, 0, 0, 15, 15);




}
 
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, 250);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseHeight = random(20,40);
    noseWidth = random(30,70);
    pupilX = random(-2,2);
    pupilY = random(-2,2);
    faceRedness = random(179,255);
    noseRedness = random(216,255);
    earSize = random(40,60);





}

This was hard because I don’t know how to draw faces. I ended up using simple circles to draw pigs, and made the eyes, nose, face color, and face size/shape change. I added a hamburger for fun.

ssontag – Project 02 – Variable Faces

sketch

//box1 Variables
var box1W = 120;
var box1H = 170;
var box1X = 160;
var box1Y = 200;

//box2 Variables
var box2W = 60;
var box2H = 300;
var box2X = 110;
var box2Y = 35;

//box3 Variables
var box3W = 250;
var box3H = 90;
var box3X = 50;
var box3Y = 50;

//box4 Variables
var box4W = 200;
var box4H = 200;

//box5 Variables
var box5W = 40;
var box5H = 90;
var box5X = 200;
var box5Y = 60;

//box6 Variables

var box6W = 100;
var box6H = 10;
var box6X = 160;
var box6Y = 200;

//box7 Variables
var box7W = 30;
var box7H = 60;
var box7X = 57;
var box7Y = 150;

//box8 Variables
var box8W = 30;
var box8H = 60;
var box8X = 290;
var box8Y = 57;


//box9 Variables
var box9W = 60;
var box9H = 10;
var box9X = 40;
var box9Y = 100;


//box10 Variables
var box10W = 15;
var box10H = 15;
var box10X = 130;
var box10Y = 190;


//eye1 Variables
var eye1W = 50;
var eye1H = 80;

//eye2 Variables
var eye2W = 30;
var eye2H = 24;



function setup() {
    createCanvas(400, 400);
    
}

function draw() {
    background(210);

//box1
    strokeWeight(0);
    fill(213, 180, 118);
    rect(box1X, box1Y, box1W, box1H);

//box2
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box2X, box2Y, box2W, box2H);

//box3
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box3X, box3Y, box3W, box3H);
    
//box4 
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, box4W, box4H);

//box5
    strokeWeight(0);
    fill(205, 133, 63);
    rect(box5X, box5Y, box5W, box5H);

//box6
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box6X, box6Y, box6W, box6H);

//box7
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box7X, box7Y, box7W, box7H);

//box8
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box8X, box8Y, box8W, box8H);

//eye1
    strokeWeight(0);
    fill(0);
    ellipse(160, 55, eye1W, eye1H);

//eye2
    strokeWeight(0);
    fill(0);
    ellipse(260, 90, eye2W, eye2H);

//box9
    strokeWeight(0);
    fill(218, 165, 32);
    rect(box9X, box9Y, box9W, box9H);

//box10
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box10X, box10Y, box10W, box10H);

}

function mousePressed() {
//when mouse is 
//box1 Variables
    box1W = random(110, 130);
    box1H = random(160, 180);
    box1X = random(155, 165);
    box1Y = random(195, 205);

//box2 Variables
    box2W = random(50, 70);
    box2H = random(290, 310);
    box2X = random(105, 115);
    box2Y = random(30, 40);

//box3 Variables
    box3W = random(240, 260);
    box3H = random(80, 100);
    box3X = random(45, 55);
    box3Y = random(45, 55);

//box4 Variables
    box4W = random(190, 210);
    box4H = random(190, 210);

//box5 Variables
    box5W = random(30, 50);
    box5H = random(80, 100);
    box5X = random(195, 205);
    box5Y = random(55, 65);


//box6 Variables
    box6W = random(90, 110);
    box6H = random(1, 20);
    box6X = random(155, 165);
    box6Y = random(195, 205);

//box7 Variables
    box7W = random(20, 40);
    box7H = random(50, 70);
    box7X = random(52, 63);
    box7Y = random(145, 155);

//box8 Variables
    box8W = random(20, 40);
    box8H = random(50, 70);
    box8X = random(285, 295);
    box8Y = random(52, 63);


//box9 Variables
    box9W = random(50, 70);
    box9H = random(1, 20);
    box9X = random(35, 45);
    box9Y = random(95, 105);

//box10 Variables
    box10W = random(5, 25);
    box10H = random(5, 25);
    box10X = random(125, 135);
    box10Y = random(185, 195);

//eye1 Variables
    eye1W = random(45, 55);
    eye1H = random(75, 85);

//eye2 Variables
    eye2W = random(25, 35);
    eye2H = random(19, 29);
}

When we were assigned with the task to make our faces from last week variable I continued with the theme of the cubist style. Cubism typically abstracts motion into simple geometric shapes. By the click of the mouse the face comes alive and the geometries jitter within their respective areas. My goal was to make the viewer uncomfortable while clicking the screen.

dayoungc-Project-02-Variable-Face

sketch

//Dayoung Chung
//Section E
//dayoungc@andrew.cmu.edu
//Project-02

var eyeSize = 30; 
var faceWidth = 200; 
var faceHeight = 180; 
var noseSize = 15; 
var mouthSize = 30; 
var background1 = (194); 
var background2 = (94);
var background3 = (150); 
var nose= 200
var earSize= 200

function setup() {
    createCanvas(500, 620);
}

function draw() {
    background(background1, background2, background3);
    background(mouseX,mouseX,mouseY,mouseY)
    ellipse(mouseX, mouseY,0,0); 

    //face
    noStroke(0); 
    fill(107,104,100); 
    ellipse(width /2 , height /2 +30, faceWidth*1.2, faceHeight*1.1);
    var eyeLX = width / 2 - faceWidth * 0.3; 
    var eyeRX = width / 2 + faceWidth * 0.3; 

    //eyes
    fill(238,232,219); 
    ellipse(eyeLX, height / 2, eyeSize, eyeSize+10);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize+10);

    //pupil 
    fill(64, 60, 58); 
    ellipse(eyeLX, height/2-5.5, eyeSize-3 , eyeSize-2);
    ellipse(eyeRX, height/2-5.5, eyeSize-3, eyeSize-2);

    //mouth 
    stroke(0);
    strokeWeight(3);
    noFill();
    arc(width/2 ,height/2+80 ,mouthSize+10,mouthSize-10,0,PI);
    

    //nose
    noStroke(0);
    fill(0);
    ellipse(width/2,height/2+10,nose/7,nose/3);

    //nostrills
    noStroke(0);
    fill(255);
    ellipse(width/2-6,height/2+35,noseSize-10,4)
    ellipse(width/2+6,height/2+35,noseSize-10,4)

    //body 
    noStroke(0);
    fill(107,104,100);
    ellipse(width/2, height*3/4+100,180,300);
    fill(238,232,219);
    ellipse(width/2, height*3/4+150,100,300)

    //ear 

    beginShape();
    fill(107,104,100)
    curveVertex(180, 290);
    curveVertex(180,290);
    curveVertex(150, 160);
    curveVertex(125,  140);
    curveVertex(100,  240);
    curveVertex(140,  280);
    curveVertex(160,290);
    curveVertex(160,290);
    endShape();

   //ear2
    beginShape();
    fill(107,104,100)
    curveVertex(310, 290);
    curveVertex(310, 290);
    curveVertex(340, 160);
    curveVertex(365, 140);
    curveVertex(390,  240);
    curveVertex(360,  280);
    curveVertex(340,290);
    curveVertex(340,290);
    endShape();
}

    function mousePressed() {
    // when the user clicks, these variables are reassigned
    faceWidth = random(140, 200);
    faceHeight = random(180, 150);
    eyeSize = random(14, 40);
    nose = random(120,300);
    mouthSize = random(10,30); 
    background1 = random(0, 255); 
    background2 = random(0, 255); 
    background3 = random(0, 255); 

}

For this project, I made a character with my favorite animal, which is koala. I sketched first before starting with actual p5js. In the end, I decided to use “curveVertex” forming the ears, and arc for the lips. I had fun learning how to use variables and why they are used.

Enwandu-Project-02-Variable-Face

Variable Face

/*  Emmanuel Nwandu
    enwandu@andrew.cmu.edu
    Section D
    Project-02-Variable-Face
*/
var faceWidth = 420;
var faceHeight = 420;
var eyeSize = 82;
var eyePatchH = 176;
var eyePatchW = 111;
var mouthStroke = 7;
var earWidth = 173;
var earHeight = 195;
var blushWidth = 45;
var blushHeight = 27;
var blushRed = 253;
var blushGreen = 216;
var blushBlue = 201;

function setup() {
    createCanvas(480, 640);
    background(256);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
    background(256);

    //ears
    fill(0);
    ellipse(97, 170, earWidth, earHeight);
    ellipse(388, 170, earWidth, earHeight);

    //inner ears
    fill(blushRed, blushGreen, blushBlue);
    ellipse(97, 170, earWidth - 78, earHeight - 91);
    ellipse(388, 170, earWidth - 78, earHeight - 91);

    //head
    noStroke();
    fill(256);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyepatches
    noStroke();
    fill(0);
    ellipse(130, 337, eyePatchW, eyePatchH);
    ellipse(353, 337, eyePatchW, eyePatchH);


    //eyes including pupil and highlights
    noStroke();
    fill(256)
    ellipse(136, 355, eyePatchW - 29, eyePatchW - 29);
    ellipse(359, 355, eyePatchW - 29, eyePatchW - 29);
    fill(0);
    ellipse(136, 355, 62, 62);
    ellipse(359, 355, 62, 62)

    fill(256)
    //Defines edge conditions
    //Allows the highlights to follow the mouse within the boundary
    var leftEdgeR = 120;
    var rightEdgeR = 147;
    var leftEdgeL = 343;
    var rightEdgeL = 370;

    var xcR = constrain(mouseX, leftEdgeR, rightEdgeR);
    var xcL = constrain(mouseX, leftEdgeL, rightEdgeL);

    ellipse(xcR, 337, 33, 33);
    ellipse(130, 356, 12, 12);
    ellipse(xcL, 337, 33, 33);
    ellipse(353, 356, 12, 12);

    //nose
    fill(0);
    ellipse(243, 413, 50, 20);
    ellipse(243, 419, 27, 20);

    //blush
    fill(blushRed, blushGreen, blushGreen);
    ellipse(132, 452, blushWidth, blushHeight);
    ellipse(356, 452, blushWidth, blushHeight);

    //mouth
    noFill();
    stroke(0);
    strokeWeight(mouthStroke);
    arc(243, 425, 75, 60, HALF_PI, PI);

}
//When the mouse is pressed variables are randomized
function mousePressed() {
    mouthStroke = random(1, 10);
    faceWidth = random(360, 420);
    faceHeight = random(360, 420);
    earWidth = random(100, 180);
    earHeight = random(120, 200);
    eyePatchW = random(65, 150);
    eyePatchH = random(150, 200);
    blushWidth = random(40, 85);
    blushHeight = random(20, 35);
    blushRed = random(150, 260);
    blushGreen = random(200, 220);
    blushBlue = random(175, 210);

}

Inspired by my love of pandas, I coded the image with the intent of playing with figure ground relationships, negative and positive space, and how it can inform the clarity of the image.

I started by coding the base image that is seen first, and through trial and error began coding the randomized variations.

Project 2, odh

odh-variables

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 02
    
var headX = 200;
var headY = 300;
var earX = 60;
var earY = 100;
var eyeX = 50;
var eyeY = 50;
var eyeU = 25;
var eyeV = 25;
var musX = 100;
var musY = 80;

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

function draw() {

    background(64, 64, 154);
    noStroke(0);

//body
    fill(200, 0, 0)
    arc(320, 480, 150, 100, PI, PI);
    
//neck
    fill(247, 231, 197);
    rect(300 ,340 ,40 , 100);

//ears
    ellipse(200, 230, earX, earY);
    ellipse(440, 230, earX, earY);

//head
    ellipse(320, 260, headX, headY);

//eyes
    fill(255);
    ellipse(275, 220, eyeX, eyeX);
    ellipse(365, 220, eyeY, eyeY); 

//pupils
    fill(0, 0, 0);
    ellipse(275, 220, eyeU, eyeU);
    ellipse(365, 220, eyeV, eyeV);   

//mustache
    fill(120, 100, 60)
    arc(320, 310, musX, musY, PI, PI)

}

function mousePressed(){

    earX = random(50, 100);
    earY = random(80, 120);
    headX = random(200, 250);
    headY = random(300, 350);
    eyeX = random(40, 75);
    eyeY = random(40, 75);
    eyeU = random(6, 36);
    eyeV = random(6, 36);
    musX = random(80, 120);
    musY = random(75, 85);

}

I worked primarily with simpler geometries while experimenting with the variables. I played with using the same variables for both the “x” and “y” of certain shapes, like the eyes and pupils, allowing them to change independent of each other.

elizabew-Project-02-Variable-Face

sketch

// Elizabeth Wang
// elizabew@andrew.cmu.edu
// Project - 02: variable faces; face variables

var eyeSize = 40;
var whiteeyes = 55;
var faceWidth = 250;
var faceHeight = 250;
var cheeks = 50;
var x = 300;
var y = 300;
var mouth = 80;
var ears = .2;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(89,117,133);
    noStroke();

//hair
fill (0);
  rect(.5*x, .38*y, x, 1.5*y, 90);


//ears
fill (255,234,201);
  ellipse( .6*x, y, x*ears, x*ears);
  ellipse( 1.40*x, y, x*ears, x*ears);

//neck
fill (214,197,169);
  rect(.9*x, 1.2*y, .2*x, .5*y, 90);

//head
fill (255,234,201);
  ellipse( x, y, faceWidth,  faceHeight);


//body
fill (250);
  rect(.55*x, 1.5*y, .9*x, 2*y, 120);

//bangs
fill(0);
  rect(.6*x, .45*y, .65*x, .4*y, 30 ,30, 30, 30);

//mouth
fill (0);
  rect(.86*x, 1.17*y, mouth, .09*mouth);

//cheeks
fill (237,106,90);
noStroke();
  ellipse( .7*x, 1.15*y, cheeks, cheeks);
  ellipse( 1.3*x, 1.15*y, cheeks, cheeks);

//eyes
fill(250);
  ellipse( .81*x, y, whiteeyes, whiteeyes)
  ellipse( 1.2*x, y, whiteeyes, whiteeyes);
fill (0);
  ellipse( .81*x, y, eyeSize, eyeSize);
  ellipse( 1.2*x, y, eyeSize, eyeSize);

//nose
fill (255,123,83);
  triangle(x, y, 1.05*x, 1.1*y, .95*x, 1.1*y);


}

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, 250);
    faceHeight = random(200, 250);
    eyeSize = random(20, 40);
    whiteeyes = random (20, 60);
    x = random(250, 300);
    y = random(250, 350);
    cheeks = random(20, 60);
    mouth = random (40, 90);
}

Reflection

Initially, when I began this project, I did not exactly know where to start, so I decided to base the face off of my self portrait—with minor changes to the overall design.

(portrait from Project 01)

While I do enjoy the overall result of my program (the outputted faces look very funny and show a lot of personality despite a consistently flat mouth), I do wish I put in more time to make a simplified version of my program using functions, instead of ‘strange’ numbers that multiply with other ‘strange’ numbers. However I did learn a lot from this, and I can say that the next time a approach a program similar to this, I know what steps I need to take before jumping into writing the code instead of diving in headfirst.