sketch

var facePink = 20;
var eyeW = 50;
var eyeH = 7;
var eyebrowH1 = 270;
var eyebrowH2 = 270;
var mouthH = 355;

function setup() {
    createCanvas(640, 480);
    background(255, 196, 238);
    strokeWeight(3);
}

function draw() {
    //hat
    fill(196, 42, 42);
    stroke(196, 42, 42);
    ellipse(300, 260, 205, 195);

    //quilt
    ellipse(300, 570, 320, 500);
    stroke(232, 139, 139);
    push();
    strokeWeight(40);
    beginShape();
    curveVertex(240, 350);
    curveVertex(240, 290);
    curveVertex(230, 370);
    curveVertex(350, 440);
    curveVertex(360, 470);
    curveVertex(350, 500);
    curveVertex(330, 600);
    curveVertex(330, 700);
    endShape();
    pop();

    //face
    fill(250, 240, 200);
    stroke(250, 240, 200);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 240);
    curveVertex(230, 350);
    curveVertex(300, 400);
    curveVertex(370, 350);
    curveVertex(380, 240);
    curveVertex(380, 100);
    endShape();
    push();
    fill(232, 169, 132);
    stroke(232, 169, 132);
    ellipse(250, 360, facePink, facePink);
    ellipse(350, 360, facePink, facePink);
    pop();

    //eyebrow
    stroke(0);
    push();
    strokeWeight(5)
    line(230, eyebrowH1, 270, eyebrowH2);
    line(370, eyebrowH1, 330, eyebrowH2);
    pop();

    //eye
    line(220, 320, 270, 330);
    push();
    translate(350, 325);
    fill(255);
    strokeWeight(2);
    rotate(radians(-7));
    ellipse(0, 0, eyeW, eyeH);
    strokeWeight(3);
    ellipse(-2, 0, 5, 5);
    pop();

    //mouth
    fill(250, 70, 70);
    stroke(250, 70, 70);
    triangle(300, mouthH, 293, 375, 307, 375);
    fill(255);

    //hair
    fill(0);
    stroke(0);
    quad(220, 241, 170, 330, 230, 370, 230, 350);
    quad(380, 241, 370, 241, 370, 370, 450, 330);

    //hat part 2
    fill(207, 71, 71);
    stroke(207, 71, 71);
    ellipse(300, 247, 175, 45);
}

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.
    facePink = random(15, 30);
    eyeW = random(45, 52);
    eyeH = random(7, 40);
    eyebrowH1 = random(250, 270);
    eyebrowH2 = random(265, 285);
    mouthH = random(350, 370);
}

It’s fun to add dynamic effect to an image with randomness. And I find the mousePressed() function very useful to interact with audiences.

Project02

var eyeSize = 30;
var faceWidth = 120;
var faceHeight = 230;
var noseHeight = 40;
var eyeHL = 4;
var eyeHR = 3;

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

function draw() {
    /*creating face structure*/
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    /*creating variables for eye location*/
    var eyeLX = width / 2 - faceWidth / 4
    var eyeLY = height / 2 + faceHeight / eyeHL
    var eyeRX = width / 2 + faceWidth / 4
    var eyeRY = height / 2 + faceHeight / eyeHR
    /*creating eyes*/
    ellipse(eyeLX, eyeLY, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRY, eyeSize, eyeSize);
    /*creating nose*/
    triangle(width / 2 - noseHeight / 2, height /2, width /2 + noseHeight / 2, width / 2, height / 2 + noseHeight);
}
    
function mousePressed(){
    var eyeSize = random(20, 50);
    var faceWidth = random(100, 300);
    var faceHeight = random(200, 400);
    var noseHeight = random(30, 60);
    var eyeHL = random(3, 5);
    var eyeHR = random(3, 5);
}

This is a late turn in, but I had fun with this so I’m putting this up for others to see.

The variable creation was both harder and easier than I had originally thought (not the reason this is late). I wanted to create a mouth as well, but found that too difficult to create variables for. However, the nose felt like it turned out well.

sketch

/*
Audrey Zheng
Section A
audreyz@andrew.cmu.edu
Assignment-01
*/


var hair_length = 240;
var face_length = 193;
var hair_color = 72;
var eye_pupil = 18;
var cheek = 17;

function setup() {
    createCanvas(468, 584);
}

function draw() {





	background(220);

	//hair
	noStroke();
	fill(hair_color,15,15);
	rect(121,108,215,hair_length,100,100,20,20);


	//body
	noStroke();
	fill(200);
	rect(128,340,206,161, 50);

	//neck
	fill(221,169,112);
	rect(206,305,50,69,20);
	fill(250,194,133);
	rect(218,325,38,49,20);

	//ear
	fill(250,194,133);
	ellipseMode(CORNER);
	ellipse(130,220,38,47);
	ellipse(292,220,38,47);


	//earshadows
	fill(231,165,93);
	ellipse(138,228,27,33);
	ellipse(295,227,27,33);


	//face
	fill(250,194,133);
	rect(149,132,162,face_length,100);

	//bangs
	fill(hair_color,15,15);
	//arc(x, y, w, h, start, stop, [mode])
	arc(185, 120, 150, 80, 0, PI + QUARTER_PI + QUARTER_PI, OPEN);
	arc(98, 55, 100, 150, 0, HALF_PI + QUARTER_PI - 0.5,OPEN); //it goes counter clock-wise

	//eyes
	fill(255);
	rect(172,229,31,23,12);
	rect(254,229,31,23,12);
	fill(0);
	ellipse(179,229,18,eye_pupil);
	ellipse(260,229,18,eye_pupil);

	//nose
	fill(231,165,93);
	triangle(230, 251, 224, 270, 236, 270);

	//eyeliner
	noFill();
	stroke(90, 60, 50);
	strokeWeight(6);
	arc(170, 230, 40, 10, 3.24, 6, OPEN);
	arc(250, 230, 40, 10, 3.33, 6.1, OPEN);

	//cheeks
	noStroke();
	fill(255,172,172);
	rect(160,270,25,cheek,8);
	rect(277,270,25,cheek,8);

	//eyebrows
	stroke(hair_color,15,15);

	strokeWeight(12.0);
	strokeCap(ROUND);
	line(171, 206, 201, 201);
	line(260.5,202.5,291.45,207.81);

	//mouth

	 p2 = { x: 253, y: 254 };
	var p3 = { x: 253, y: 291 },
	 p4 = { x: 215, y: 295 };
	noFill();

	stroke(117,94,94);
	strokeWeight(4.0);
	curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.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.
    hair_length = random(200, 300);
    face_length = random(190, 210);
    hair_color = random(40,120);
    eye_pupil = random(17,22);
    cheek = random(15,17);

    //eyeSize = random(10, 30);
}

//{ } are braces
// [] are brackets.

/* lol you can do this for comment too */

sketch

var eyeSize = 45;
var pupilSize = 15;
var faceWidth = 150;
var faceHeight = 150;
var mouthWidth = 10;
var mouthHeight = 10;
var skinColor = 250;
var hairColor = 142;
var hairHeight = 50;
var hairWidth = 50;
var bodyColor = 100;
var bodyAdjustor = 2.5
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(220,220,240);
    strokeWeight(0);
    //body
    var bodyPosition = width / 2 + bodyAdjustor
    fill(bodyColor, 150, 100);
    ellipse(bodyPosition, (height / 2) * 1.75, 200, 200);
    //Hair
    fill(hairColor, 150, 200);
    ellipse(width / 2, height / 3, faceWidth + 48, faceHeight + 22)
    //Face
    fill(skinColor, 220, 182);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //Eyes
    fill(255);
    var eyeLX = (width / 2) * 1.09 - faceWidth * 0.25;
    var eyeRX = (width / 2) * .91 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //Pupils
    fill(0);
    var PupilLX = (width / 2) * 1.09 - faceWidth * 0.25;
    var PupilRX = (width / 2) * .91 + faceWidth * 0.25;
    ellipse(PupilRX, height / 2, pupilSize, pupilSize);
    ellipse(PupilLX, height / 2, pupilSize, pupilSize);
    //Mouth
    fill(0);
    arc(width / 2, height / 1.5, mouthWidth, mouthHeight, TWO_PI, 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.
    eyeSize = random(35, 45);
    pupilSize = random(5, 15);
    mouthWidth = faceWidth / random(3, 10);
    mouthHeight = faceHeight / random(3, 10);
    skinColor = random(225, 255);
    hairColor = random(50, 220)
    bodyColor = random (0, 255)
    bodyAdjustor = random(-30, 30)
}

I found this assignment to be tremendously insightful as well as informative. I learned a lot about various principles such as the usage of variables as well as the randomization factor. Overall, this was an enjoyable and good assignment.

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-02-Variable-Face
*/

var eyePupil = 25;
var faceWidth = 200;
var faceHeight = 200;
var eyeX = 5
var eyeY = 5
var bodyColor = 80;
var mouthHeight = 10;
 
function setup() {
    createCanvas(300, 300);

}

function draw() {
    background(156, 190, 215);
    //hair
    fill(bodyColor, 150, 231)
    rect(width/3, height/3 + 100, 100, 100);
    //head
    strokeWeight(5);
    fill(252,221,201);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eyes
    strokeWeight(1.5);
    fill(255);
    ellipse(eyeLX, height / 2, faceWidth/2,faceWidth/2);
    ellipse(eyeRX, height / 2, faceWidth/2,faceWidth/2);
    //eyeIris
    strokeWeight(0);
    fill(223,108,107);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    //eyePupil
    fill(0);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    //eyeReflection
    fill(255);
    ellipse(eyeLX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    ellipse(eyeRX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    //mouth
    strokeWeight(1.5);
    fill(255)
    ellipse(width/2+faceWidth/4 - 20, height/2+faceHeight/4 + 5, 30, mouthHeight);

}
 
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 110.
    faceWidth = random(75, 110);
    faceHeight = random(100, 200);
    eyeX = random(-9,9);
    eyeY = random(-9,9);
    bodyColor = random(150, 250);
    mouthHeight = random(10,30)




}

It was fun to make animated faces. I found it to be a lighthearted exercise that helped in practicing coding using variables.

Project-02

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-02-Variable-Face

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;
var pupilLeftX = 150;
var pupilLeftY = 154;
var pupilRightX = 220;
var pupilRightY = 154;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 12;
var pupilLeftX2 = 130;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceWidth = 270;
var faceHeight = 200;
var mouthStart = 30;
var mouthStop = 122;

var backgroundR = 3;
var backgroundG = 117;
var backgroundB = 0;

var faceR = 244;
var faceG = 240;
var faceB = 132;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face
    fill(faceR, faceG, faceB);
    ellipse(180, 180, faceWidth, faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupils
    fill(255);
    ellipse(pupilLeftX, pupilLeftY, pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eyes
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupils
    fill(255);
    ellipse(pupilRightX, pupilRightY, pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, mouthStart, mouthStop);
}
 
function mousePressed() {
    eyeSize = random(37, 55);
    pupilSizeL = random(3, 9);
    pupilSizeR = random(3, 9);
    pupilSize2L = random(7, 12);
    pupilSize2R = random(7,12);

    pupilLeftX = random(142, 153);
    pupilLeftY = random(150, 155);
    pupilLeftX2 = random(142, 153);
    pupilLeftY2 = random(162, 169);

    pupilRightX = random(207, 218);
    pupilRightY = random(150, 155);
    pupilRightX2 = random(207, 218);
    pupilRightY2 = random(162, 169);

    faceWidth = random(150, 300);
    faceHeight = random(150, 300);

    faceR = random(0, 255);
    faceG = random(0, 255);
    faceB = random(0, 255);

    mouthStart = random(1, 360);
    mouthStop = random(1, 360);

    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);
}

I tried creating a googly-eye-effect using the different variables by focusing the mouse-click changes mainly on the eyes.

This sketch was made by adapting the template. The rectangular face and many other elements are centered on the canvas by frequent use of the canvas dimensions (stored as variables) divided by half, in the shape parameters.

sketch

var noseheight = 150
var nosewidth = 50;

var facewidth = 200;
var faceheight = 150;

var eyesize = 20;
var eyedistance = 100;

var eyecolor = 0;

var canvasheight = 640;
var canvaswidth = 480;

function setup() {
    createCanvas(canvaswidth, canvasheight );
}

function draw() {
    background(180);

    fill(100);
    //draw the face;
    rect((canvaswidth-facewidth)/2, (canvasheight-faceheight)/2, facewidth, faceheight);
    //draw the eyes
    fill(eyecolor);
    ellipse((canvaswidth - eyedistance)/2, 300, eyesize, eyesize);
    ellipse((canvaswidth + eyedistance)/2, 300, eyesize, eyesize);
 	//draw the nose
 	fill(100);
 	triangle((canvaswidth - nosewidth)/2, canvasheight/2, (canvaswidth + nosewidth)/2, canvasheight/2, canvaswidth/2, noseheight);
 	//draw the mouth

 	line(canvaswidth/2-50, (canvasheight+faceheight)/2 - 50, canvaswidth/2+50, (canvasheight+faceheight)/2 - 50);
}	

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.
    eyecolor = random(0, 255);

    eyesize = random(10, 30);
    eyedistance = random(75, 125);

    nosewidth = random(30, 70);
    noseheight = random(canvasheight/2 - 20, canvasheight/2 + 20);
}

I started this project based on my self portrait and explored the command to change the size of the image both randomly and steadily.

sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Assignment1

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

var mouth1=30
var mouth2=5
var glassescolor=0
var BW1=50
var BW2=80
var BW3=10
var BW4=120
var earH=40
function draw() {
    fill(255, 255, 255)
    rect(0, 0, 300, 600)

    //ears
    fill(225, 197, 164)
    ellipse(380, 330, 20, earH)
    strokeWeight(0)
    ellipse(220, 330, 20, earH)
   
    //face
    strokeWeight(0)
    fill(236, 212, 190)
    rect(220, 250, 160, 100)
    triangle(220, 350, 300, 350, 300, 420)
    triangle(220, 350, 240, 390, 300, 420)
    quad(300, 420, 300, 350, 380, 350, 340, 400)

    //hair
    fill(0)
    triangle(205, 250, 290, 275, 405, 250)
    triangle(205, 250, 230, 220, 300, 220)
    triangle(230, 220, 265, 200, 300, 220)
    rect(265, 200, 60, 30)
    triangle(265, 200, 300, 195, 300, 220)
    triangle(205, 250, 300, 220, 300, 250)
    rect(370, 240, 10, 70)

    //glasses
    fill(glassescolor)
    ellipse(255, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(255, 315, 53, 53)
    fill(glassescolor)
    ellipse(335, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(335, 315, 53, 53)
    strokeWeight(1)
    fill(200)
    rect(283.5, 309, 22, 3)
    rect(219, 309, 7, 3)
    rect(364, 309, 16, 3)
    
    //nose
    strokeWeight(2)
    line(290, 315, 290, 350)
    line(290, 350, 300, 350)

    //mouth
    fill(220, 145, 140)
    rect(280, 380, mouth1, mouth2)

    //background buildings
    strokeWeight(0)
    fill(153, 138, 138)
    rect(370, 470, BW1, 160)
    rect(480, 500, BW2, 100)
    rect(395, 440, BW3, 40)
    fill(136, 115, 117)
    rect(400, 520, BW4, 80)

    //backgrounds 2

    strokeWeight(12)
    triangle(60, 170, 130, 170, 130, 50)
}    

function mousePressed(){
    //if you click the mouse, the glasses is going to change from black to white.
    //if you click the mouse, the mouth and the building in the background are going to be bigger.
    // 
    mouth1 = random(10, 60)
    mouth2 = random(1, 20)
    glassescolor+=20
    BW1+=3
    BW2+=3
    BW3+=3
    BW4+=3
    earH = random(20, 80)
}
	

/*Jennifer DeLuna
SectionB
jdeluna@andrew.cmu.edu
project-02*/

//defined variables
var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 270;

var skinC1 = 60;
var skinC2 = 200;
var skinC3 = 180;

var toothH=10
var toothW=10

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

function draw() {
    background (162, 232, 232);
    //face
    fill(skinC3, skinC2, skinC1)
    ellipse(width/2, height/2, faceWidth*1.3, faceHeight*1.3)
    fill(skinC2, skinC3, skinC1)
    ellipse(width/2, height/2, faceWidth*1.2, faceHeight*1.2)
    fill(skinC1, skinC3, skinC2)
    ellipse(width/2, height/2, faceWidth*1.1, faceHeight*1.1)
    fill(skinC1, skinC2, skinC3);
    noStroke();
    ellipse(width/2, height/2, faceWidth,  faceHeight);

    //mouth
    fill(0)
    rect(width/2-15, height/2 +30, 30,45,7)
    fill(255)
    rect(width/2,height/2 +30,toothW, toothH,2)
    fill(237, 116, 116)
    rect(width/2-15,height/2+ 65,30,10,5);




    //eyes
    var eyeL = width / 2 - faceWidth * 0.25;
    var eyeR = width / 2 + faceWidth * 0.25;
    fill(0)
    noStroke()
    ellipse(eyeL, height / 2, eyeSize, eyeSize);
    ellipse(eyeR, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    faceWidth = random(260, 350);
    faceHeight = random(230, 300);
    eyeSize = random(10, 30);
    skinC1 = random(0, 255);
    skinC2 = random(0, 255);
    skinC3 = random(0, 255);
    toothH=random(5,15);
    toothW=random(8,11)
}

pup face

/*
Katie Polhemus
Section A
kpolhemu@andrew.cmu.edu
project-02
*/

//pup face variables

	//background colors
var cR = 230;
var cG = 114;
var cB = 154;
	//ears
var earsSize = 150
	//head
var headWidth = 320;
var headHeight = 240;
	//eyes
var eyesSize = 30
	//snout
var snoutWidth = 350;
var snoutHeight = 180;
	//nose
var noseSize = 50
	//nose line
var noseLine = 10
	//mouth
var mouthSize = 50

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

function draw() {
	noStroke();
	background(cR, cG, cB);

	//left ear
	fill(145, 130, 99);
	ellipse(width/2 - noseSize * 2, height/2 + noseSize, earsSize, earsSize * 2);

	//right ear
	fill(145, 130, 99);
	ellipse(width/2 + noseSize * 2, height/2 + noseSize, earsSize, earsSize * 2);

	//head
	fill(154, 142, 109);
	ellipse(width/2, height/2, headWidth, headHeight);

	//eyes
	fill(0);
	var eyeLX = width / 2 - headWidth * 0.25
	var eyeRX = width / 2 + headWidth * 0.25
	ellipse(eyeLX, height/2 - eyesSize, eyesSize, eyesSize * 2);
	ellipse(eyeRX, height/2 - eyesSize, eyesSize, eyesSize * 2);

	//snout
	fill(74, 61, 35);
	ellipse(width/2, height/2 + noseSize, snoutWidth, snoutHeight);

	//nose
	fill(0);
	ellipse(width/2, height/2, noseSize, noseSize);

	//nose line
	stroke(0);
	strokeWeight(noseLine);
	line(headWidth, headHeight, headWidth, headHeight + eyesSize);

	//mouth
	fill(0);
	arc(width/2, height/2 + mouthSize, mouthSize, mouthSize * 2, 0, PI);	

}

function mousePressed() {
	cR = random(210, 250);
	cG = random(100, 130);
	cB = random(130, 170);
	mouthSize  = random(30, 70);
	earsSize = random(130, 170);
	eyesSize = random(25, 40);
}

Initially, my love for dogs motivated me to draw a dog’s face instead of a human’s, and ultimately, I found it much easier to draw a dog’s face than a human’s (based on project-01.) I think dogs can be very expressive, and I tried to convey that with movement of the eyes, ears, and mouth.