Category: Project-02-Variable-Face

alchan-Project 02-variable face

alchan project 02

//face shape
var faceShade = 100;
var faceWidth = 150;
var faceHeight = 200;
var faceAngle1 = 10;
var faceAngle2 = 10;
var faceAngle3 = 10;
var faceAngle4 = 10;

//eyes
var eyeSize = 50;
var eyeStroke = 4;
var eyeNumber = 2;
var eyeX = 320;
var eyeY = 210;
var eyeDistance = 30;

//antlers
var antlerX = 50;
var antlerY = 120;
var antlerLeft1 = 80;
var antlerLeft2 = 180;
var antlerLeftSize = 100;
var antlerRight1 = 0;
var antlerRight2 = 100;
var antlerRightSize = 100;
var antlerStroke = 8;

//determine whether to show/hide
var crestType = 1;
var showEars = 0;

//ears
var earX = 320;
var earY = 100;
var earWeight = 50;

//spike
var spikeX = 320;
var spikeY = 240;
var spikeWidth = 20;
var spikeHeight = 100;

//specimen label
var n1 = 0;
var n2 = 0;
var n3 = 0;

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
    angleMode(DEGREES);
    smooth();
}

function draw() {
    background(237, 234, 218);

    //antlers
    noFill();
    stroke(0);
    strokeWeight(antlerStroke);
    arc(320 - faceWidth/2, antlerY, antlerLeftSize, antlerLeftSize, antlerLeft1, antlerLeft2, OPEN);
    arc(320 + faceWidth/2, antlerY, antlerRightSize, antlerRightSize, antlerRight1, antlerRight2, OPEN);

    //determine additional crest type: antlers, ears, spike
    if(crestType === 1) {
      strokeWeight(antlerStroke - 2);
      arc(320 - faceWidth/2, antlerY - 20, antlerLeftSize - 50, antlerLeftSize - 50, antlerLeft1, antlerLeft2, OPEN);
      arc(320 + faceWidth/2, antlerY - 20, antlerRightSize - 50, antlerRightSize - 50, antlerRight1, antlerRight2, OPEN);
    } else if (crestType === 2) {
      noStroke();
      fill(50);
      triangle(spikeX - spikeWidth/2, 245 - faceHeight/2, spikeX + spikeWidth/2,
        245 - faceHeight/2, spikeX, spikeHeight);
    }

    //determine whether or not to draw ears
    if(showEars >= 0.5) {
      stroke(faceShade);
      strokeWeight(earWeight);
      line(earX - faceWidth/2, antlerY + earY, earX + faceWidth/2, antlerY + earY);
    }

    //face
    noStroke();
    fill(faceShade);
    rect(320, 240, faceWidth, faceHeight,
      faceAngle1, faceAngle2, faceAngle3, faceAngle4);

    //eyes: determine how many, then draw
    stroke(256);
    strokeWeight(eyeStroke);
    fill(0);
    if(eyeNumber === 1) {
      ellipse(eyeX, eyeY, eyeSize, eyeSize);
    } else if(eyeNumber === 2) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
    } else if (eyeNumber === 3) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX, eyeY - eyeDistance, eyeSize, eyeSize);
    }

    //caption: specimen number
    noStroke();
    textFont('Georgia');
    textSize(16);
    textAlign(CENTER);
    textStyle(ITALIC);
    text('specimen no. ' + n1 + n2 + n3, 320, 440);
}

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(180, 250);
    faceHeight = random(200, 250);
    faceAngle1 = random(10, 60);
    faceAngle2 = random(10, 60);
    faceAngle3 = random(10, 60);
    faceAngle4 = random(10, 60);
    faceShade = random(80, 150);

    eyeSize = random(30, 70);
    eyeStroke = random(3, 10);
    eyeNumber = Math.floor((random() * 3) + 1); //need a whole number
    eyeX = random(290, 350);
    eyeY = random(180, 240);
    eyeDistance = eyeSize/2 + random(5,30);

    antlerX = random(90, 125);
    antlerY = random(100, 180);
    antlerLeft1 = random(70, 90);
    antlerLeft2 = random(170, 200);
    antlerLeftSize = random(80, 120);
    antlerRight1 = random(-20, 10);
    antlerRight2 = random(90, 110);
    antlerRightSize = random(80, 120);
    antlerStroke = random(4, 15);

    crestType = Math.floor((random() * 2) + 1); //need a whole number
    showEars = random();

    earY = random(80, 120);
    earWeight = random(40, 80);

    spikeX = random(260, 380);
    spikeY = random(50, 100);
    spikeWidth = random(10, 40);
    spikeHeight = random(25, 80);

    n1 = Math.floor((random() * 9) + 1); //need a whole number
    n2 = Math.floor((random() * 9) + 1);
    n3 = Math.floor((random() * 9) + 1);
}

I first figured out which elements of my face I wanted to be randomized. I then decided which elements would be constant (antlers, eyes) and which would only be drawn for some faces (2nd set of antlers, ears, horn, number of eyes). From there it was just working out dimensions, coordinates, and ranges for the randomly generated variables.

jiaxinw-Project02-Variable Faces

sketch

//body
var bodyWidth = 350;
var bodyHieght = 400;
var bodyColor = 170;

//face
var faceWidth = 250;
var faceHeight = 300;

//ear
var eyeSize = 30;
var earWidth = 50;
var earHeight = 70;

//the two middle points of eyebrows
var eyebrowPoint1 = 180;
var eyebrowPoint2 = 180;

//mouth left side
var mouthCornerL = 300;

//mouth right side
var mouthCornerR= 340;

var mouthHeight = 350;

//skin color
var skinR = 250;
var skinG = 230;
var skinB = 220;

//background begin color
var BackLR = 255;
var BackLG = 249;
var BackLB = 223;

//background end color 
var BackRR = 211;
var BackRG = 248;
var BackRB = 238;


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

}

function draw() {
	//background colors
	noStroke();
    from = color(BackLR, BackLG, BackLB);
    to = color (BackRR, BackRG, BackRB);
    colorMode(RGB);
    interA = lerpColor(from, to, .25);
	interB = lerpColor(from, to, .65);
	fill(from);
	rect(0, 0, 160, 480);
	fill(interA);
	rect(160, 0, 160, 480);
	fill(interB);
	rect(320, 0, 160, 480);
	fill(to);
	rect(480, 0, 160, 480);

    //body
    fill(bodyColor);
    rect(width/2 - bodyWidth/2, height/2 + bodyHieght*0.25 , bodyWidth, bodyHieght, 100);

	//face
	fill(skinR, skinG, skinB);
	ellipse(width/2, height/2, faceWidth, faceHeight);

    //ears
    fill(skinR, skinG, skinB);
    ellipse(width/2 - faceWidth/2, height/2, earWidth, earHeight);
    ellipse(width/2 + faceWidth/2, height/2, earWidth, earHeight)

	//eyes
	fill(31, 28, 27);
	var eyeLX = width/2 - faceWidth*0.25;
	var eyeRX = width/2 + faceWidth*0.25;
	var eyeHeight = height/2
	ellipse(eyeLX, eyeHeight, eyeSize, eyeSize);
	ellipse(eyeRX, eyeHeight, eyeSize, eyeSize);

    //left eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.3, eyebrowPoint1);
    curveVertex(width/2 - faceWidth*0.2, eyebrowPoint2);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //right eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.3,  eyebrowPoint1);
    curveVertex(width/2 + faceWidth*0.2,  eyebrowPoint2);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //mouth   
    fill(236, 39, 70);
    noStroke();
    beginShape();
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(width/2 - 10, mouthHeight);
    curveVertex(width/2 + 10, mouthHeight);
    curveVertex(mouthCornerR, height/2 +70);
    curveVertex(mouthCornerR, height/2 +70);
    endShape();
    

}

    //when the user clicks, variables are assigned to random values within specifid ranges
function mousePressed(){

    //face size change
    faceWidth = random(150, 300);
    faceHeight = random(200, 350);
    
    //eye size change
    eyeSize = random (10, 50);
    
    //ear size change
    earHeight = random(60, 80);
    earWidth = random(40, 60);
    
    //eyebrow change
    eyebrowPoint1 = random(200, 220);
    eyebrowPoint2 = random(180, 220);

    //mouth change
    mouthCornerL = random(280, 300);
    mouthCornerR = random(340, 360);
    mouthHeight = random(300, 350);

    //skin color change
    skinR = random(240, 260);
    skinG = random(220, 240);
    skinB = random(210, 230);

    //background color change
    BackLR = random(220, 256);
    BackLG = random(180, 280);
    backLB = random(200, 250);
    BackRR = random(210, 256);
    BackRG = random(170, 248);
    BackRB = random(50, 238);

    //body change
    bodyWidth = random(350, 400);
    bodyHieght = random(400, 450);
    bodyColor = random(70, 170)
}

To start this project, I thought about what parts of a face can affect the appearance of it obviously. I came up with the size of the face, size of eyes, shapes of eyebrows and the shape of the mouth. Therefore, I set up different variables for these different part to be changed. Later, I realized the color of skin is also a good point, and I also made it changeable. For the background, I wanted to do something different, I wanted to make it changeable too. I found the function of lerpcolor() in reference, and I thought it would be a fun to make a background that generates gradual colors randomly.

yushano-project-02-Variable-Face

yushano-project02

var noseSize = 20;
var noseWidth = 150;
var noseHeight = 100;
var faceWidth = 250;
var faceHeight = 250;
var earX = 80;
var earY = 66;
var eyeWidth = 25;
var eyeHeight = 40;
var eyeX = 150;
var eyeY = 160;
var eyeSize = 8;
var earnoseColor = 221;

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

function draw() {
    background(180,180,180);
    //draw the ears
    stroke(225,110,110);
    strokeWeight(3);
    fill(246,earnoseColor,earnoseColor);
    triangle(width/4, height/3, width/8*3, height/9*2, earX, earY);
    triangle(width/4*3, height/3, width/8*5, height/9*2, width-earX, earY);
    //draw the face
    fill(246,221,221);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    //draw the eyes
    noStroke();
    fill(128,128,128);
    ellipse(width/8*3, height/5*2, eyeWidth, eyeHeight);
    ellipse(width/8*5, height/5*2, eyeWidth, eyeHeight);
    fill(250);
    ellipse(eyeX, eyeY, eyeSize, eyeSize);
    ellipse(width-eyeX, eyeY, eyeSize, eyeSize);
    //draw the nose outline
    fill(235,184,184);
    ellipse(width/2, height/5*3, noseWidth,  noseHeight);
    //draw the nose inside
    var noseLX = width/2 - noseWidth*0.25;
    var noseRX = width/2 + noseWidth*0.25;
    fill(246,earnoseColor,earnoseColor);
    ellipse(noseLX, height/5*3, noseSize, noseSize);
    ellipse(noseRX, height/5*3, noseSize, noseSize);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    noseWidth = random(100, 200);
    noseHeight = random(80, 150);
    noseSize = random(10, 40);
    faceHeight = random(200, 300);
    faceWidth = random(250, 350);
    earX = random(50, 90);
    earY = random(55, 75);
    eyeWidth = random(30,45);
    eyeHeight = random(30,60);
    eyeX = random(140,160);
    eyeY = random(150,170);
    earnoseColor = random(110,221);
}

When I designed this variable face, I want it to be a cartoon and cute face. That’s why I chose to do pig.

afukuda_Project02_VariableFaces_SectionC

afukuda_project02_javaScript

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 02-VariableFaces
 */ 

var r01, g01, b01;      // vase color 

var eyeSize = 20;       // variables related to eyes 
var coordEyeX = 400;
var coordEyeY = 250;

var cheekSize = 20;     // variables related to cheeks 
var coordCheekX = 420;
var coordCheekY = 300;

var widthMouth = 20;    // variables related to mouth 
var heightMouth = 20; 
 
// coordinates for bezier curve 
var coordX1 = 490;      // x-coordinate of vertex 
var coordY1 = 100;      // y-coordinate of vertex 
var coordX2 = 500;      // x-coordinate of first control point of bezier curve 
var coordY2 = 240;      // y-coordinate of first control point of bezier curve 
var coordX3 = 450;      // x-coordinate of second control point of bezier curve 
var coordY3 = 300;      // y-coordinate of second control point 
var coordX4 = 400;      // x-coordinate of second anchor point 
var coordY4 = 380;      // y-coordinate of second anchor point 

function setup() {
    createCanvas(640, 480); // set canvas size 
    r01 = random(255);
    g01 = random(255);
    b01 = random(255);
} 

function draw () {
    background (209, 226, 244);

    noStroke();
    fill(r01, g01, b01, 150);
    beginShape();                                                                                       // create vase geometry 
        vertex (coordX1, coordY1);                                                                      // starting vertex of right curve of vase
        bezierVertex (coordX2, coordY2, coordX3, coordY3, coordX4, coordY4);                            // right curve of vase         
        vertex ((640-(coordX4)), coordY4);                                                              // starting vertex of left curve of vase                                    
        bezierVertex ((640-(coordX3)), coordY3, (640-(coordX2)), coordY2, (640-(coordX1)), coordY1);    // left curve of vase
        vertex (coordX1, coordY1);                                                                      // finishing vertex of vase
    endShape();

    fill(100);
    ellipse (coordEyeX, coordEyeY, eyeSize, eyeSize);                                                   // right eye 
    ellipse ((640-coordEyeX), coordEyeY, eyeSize, eyeSize);                                             // left eye 

    fill(249, 200, 203);
    ellipse (coordCheekX, coordCheekY, cheekSize, cheekSize);                                           // right cheek 
    ellipse ((640-coordCheekX), coordCheekY, cheekSize, cheekSize);                                     // left cheek 

    stroke(100);
    noFill();
    arc (320, 320, widthMouth, heightMouth, 0, PI);                                                    // mouth

    stroke(135, 109, 82);                                                                              // plant branch 
    strokeWeight (4);
    arc (400, coordY1, 150, 150, PI, 0.2*HALF_PI);

    noStroke();                                                                                       // plant leaves
    fill(197, 217, 166);
    arc (500, coordY1, 30, 15, 0, PI); 
    arc (500, coordY1, 30, 15, PI, 0); 

    arc (440, (coordY1-20), 30, 15, 0, PI); 
    arc (440, (coordY1-20), 30, 15, PI, 0); 

    arc (485, (coordY1-45), 30, 15, 0, PI); 
    arc (485, (coordY1-45), 30, 15, PI, 0); 

}

function mousePressed() {
    // when the user clicks, these variables are reassigned random values

    coordX1 = random(400, 490);           // all: varies curvature of vase 
    coordY1 = random(110, 150);           // except for: varies height of vase 
    coordX2 = random(490, 540);
    coordY2 = random(100, 240);
    coordX3 = random(400, 540);
    coordY3 = random(200, 370);
    coordX4 = random(380, 420);   

    r01 = random(255);                    // selects random color for vase 
    g01 = random(255);
    b01 = random(255);

    eyeSize = random(10, 25);             // varies size of eyes 
    coordEyeX = random(350, 420);         // varies location of eyes (x-axis)
    coordEyeY = random(200, 260);         // varies location of eyes (y-axis)

    cheekSize = random(10, 20);           // varies size of cheeks
    coordCheekX = random(380, 420);       // varies location of cheeks (x-axis)
    coordCheekY = random(280, 300);       // varies location of cheeks (y-axis)
  
    widthMouth = random (10, 30);               // varies width of mouth 
    heightMouth = random (10, 30);              // varies height of mouth 

}

For this project I decided to base the variable faces on potted plants. There are several variables – the height of the vase, the curvature of the vase, the color of the vase, the size & distance of the eyes, the size & distance of the cheeks, and lastly the size of the mouth. The biggest thing I noticed while I was coding this graphic was that I could achieve the same visuals by using only half of the variables. Since the pot is symmetrical, I could simply use the negative x-coordinates of the right side of the pot for the left side of the vase, making my code much simpler and cleaner

 

karinac-Project-02-Variable-Face

project-02

//Karina Chiu
//karinac@andrew.cmu.edu
//Section C
//Project-02

var faceWidth = 360
var faceHeight = 320
var leftX = 200   //left-eye-pupil
var leftY = 290   //left-eye-pupil
var rightX = 300  //right-eye-pupil
var rightY = 290  //right-eye-pupil
var beakX = 220   //position of beak
var beakY = 360	  //position of beak
var comb = 110    //height of comb

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

function draw() {
	background(192,183,227);

	//head
	stroke(0);
	strokeWeight(5);
	fill(245,202,52);
	ellipse(250,300,faceWidth,faceHeight);

	//left-outer-eye
	strokeWeight(3);
	fill(250);
	ellipse(190,290,110,110);

	//right-outer-eye
	fill(250);
	ellipse(310,285,140,140);

	//left-pupil
	fill(0);
	ellipse(leftX,leftY,10,10);

	//right-pupil
	fill(0);
	ellipse(rightX,rightY,10,10);

	//beak
	fill(235,143,31);
	triangle(beakX,beakY,250,440,500-beakX,beakY);

	//chicken-comb
	fill(250,0,0);
	triangle(180,comb,240,220,300,comb);
}


function mousePressed() {
	
	//when mouse is clicked, random values are
	//assigned to the variables

	faceWidth = random(300,450);
	faceHeight = random(290,370);
	leftX = random(150,220);
	leftY = random(255,330);
	rightX = random(270,350);
	rightY = random(245,340);
	beakX = random(200,220);
	beakY = random(360,370);
	comb = random(80,110);

}

In my childhood, I loved drawing cartoon animals with exaggerated eyeballs, so I decided to try drawing them in this project. It took me a few times to write the ‘random’ code lines, but I eventually grasped the concept.

rkarp1 – Project-02 – Variable Face – Section A

Rachel Karp Variable Faces

//face
var faceColorR = (0);
var faceColorG = (200);
var faceColorB = (40);
var faceWidth = 200;
var faceLength = 300;
var faceOutline = (3);

//mouth
var mouthColorR = (0);
var mouthColorG = (0);
var mouthColorB = (0);
var mouthSize = 100;
var mouthOutline = (2);

//eyes
var eyeColor = (0);
var eyeStroke = (255);
var eyeSclera = (6); // strokeWeight for the eye

//canvas
var canvasColorR = (0);
var canvasColorG = (0);
var canvasColorB = (0);

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES); // Change the mode to DEGREES
}

function draw() {

    background(canvasColorR, canvasColorG, canvasColorB);

    //face
    stroke(255);
    strokeWeight(faceOutline);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2, faceWidth, faceLength);

    //mouth
    strokeWeight(mouthOutline);
    fill(mouthColorR, mouthColorG, mouthColorB);
    arc(width/2, height/2+faceLength/6, mouthSize, mouthSize, 0, 160, CHORD);

    //eyes color and outline
    stroke(eyeStroke);
    strokeWeight(eyeSclera);
    fill(eyeColor);
    
    //left eye
    ellipse(width/2 - faceWidth/4, height/2-faceLength/6, 20, 20);

    //right eye
    ellipse(width/2 + faceWidth/4, height/2-faceLength/6, 20, 20);

}

function mousePressed() {

    //face color
    //When clicked, face color changes randomly.
    faceColorR = random(0,255);
    faceColorG = random(0,255);
    faceColorB = random(0,255);

    //face size
    //When clicked, face width changes randomly, and face height changes in relation.
    faceWidth = random(100, 340);
    faceLength = random(faceWidth, faceWidth*3/2);

    //mouth color
    //When clicked, mouth color changes in relation to face color.
    mouthColorR = faceColorG;
    mouthColorG = faceColorB;
    mouthColorB = faceColorR;

    //mouth size
    //When clicked, mouth size changes in relation to face width.
    mouthSize = random(10, faceWidth/3);

    //eye
    //Stroke color remains constant.
    eyeStroke = (255);
    //When clicked, the size of the sclera (strokeWeight) changes.
    eyeSclera = random(1,18);

    //face outline
    //When clicked, face outline changes in relation to sclera size.
    faceOutline = eyeSclera/2

    //mouth outline
    //When clicked, mouth outline changes in relation to sclera size.
    mouthOutline = eyeSclera/3

    //canvas
    //When clicked, canvas color changes to match mouth color.
    canvasColorR = mouthColorR;
    canvasColorG = mouthColorG;
    canvasColorB = mouthColorB;

}

This project made me have to figure out a lot of things (some with the help of Maayan Albert during office hours) including how to make colors change and how to make sure different changing shapes (eyes, mouth) could stay inside a bigger changing shape (face). Once I figured out how to make colors change, I wanted to play with that a lot to play with how different colors can affect the viewer’s emotions. I also became interested in how outlines can change the emotional quality of an image. E.g., when the white around the eyes is really big, the figure seems afraid; when the white around the whole face is heavier, the figure seems more active and zany.

mjanco – Section B- Project 2

generativefaces

//Michelle Janco
//mjanco@andrew.cmu.edu
//15-104 Section B
//Project - 2

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 230;
var mouthWidth = 60;
var mouthHeight = 30;
var faceColor = 255;
var noseWidth = 50;
var noseHeight = 15;
var pupilSize = 15;

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

function draw() {
    background(250,253,169);
    noStroke();
    fill(faceColor);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eyes
    fill(160,175,179);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //pupils
    fill(0);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    //mouth
    fill(112,2,51);
    ellipse(width / 2, height / 1.55, mouthWidth, mouthHeight);
    //nose
    fill(0);
    rotate(PI/5.0);
    rect(width / 1.55, height / 20.75, noseWidth, noseHeight, 40);

  }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(75, 200);
    faceHeight = random(180, 230);
    eyeSize = random(20, 40);
    mouthWidth = random(15, 60);
    mouthHeight = random(5, 30);
    faceColor = random(100, 255);
    noseWidth = random(30, 50);
    noseHeight = random(5, 15);
    pupilSize = random(5, 15);
  
}

I was inspired by Edvard Munch’s The Scream, and decided to make a piece that generated different styles and stages of shock or surprise. I chose the off-putting color scheme to reflect the weird expressions. It was hard to figure out the change in color initially, but I figured it out quickly.

sntong-Project-02-Variable-Face

sketch
For this project, I wanted to create a “cheesy” looking slice of cheddar cheese. I was having fun and going along with the metaphor as I was coding for this assignment. As my second coding project I felt I had better understanding of the code basics and syntax and I hope I can move on to more complicated ideas and codes later on. 

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
//Project 02 - Variable Face

//Cheese Slice
var rectX = 320
var rectY = 240
var rectW = 180
var rectH = 130
var rectC = 10

//Eyes
var iStrokeWeight = 5
var eyeLX = 270
var eyeLY = 210

//Mouth
var mouthX = 280
var mouthW = 2

//Heart
var heartX = 224

//Colors
var black = 0
var faceG = 220
var faceB = 151
var heartC = 130
var backgR = 215
var backgG = 244

function setup() {
    createCanvas(640,480);
    background(215,backgG,255);

}

function draw() {
  background(backgR,backgG,255);

  //Cheese slice
  fill(255,faceG,faceB);
  noStroke();
  rectMode(CENTER);
  rect(rectX,rectY,rectW,rectH,rectC);
  //left eye
  stroke(black);
  strokeWeight(iStrokeWeight);
  strokeCap(SQUARE);
  line(eyeLX,eyeLY,eyeLX+25,eyeLY-10);
  //right eye
  line(eyeLX+50,eyeLY-5,eyeLX+75,eyeLY);
  //mouth
  ellipse(mouthX,mouthX-40,mouthW,mouthW*4);
  //heart
  fill(249,heartC,heartC);
  noStroke();
  ellipse(heartX,heartX-18,20,20);
  ellipse(heartX+15,heartX-24,20,20);
  triangle(heartX-4,heartX-9,heartX+25,heartX-28,heartX+26,heartX+1);

}

function mousePressed(){
  //Change in color for the background
  backgR = random(254,215);
  backgG = random(254,244);
  //Change in weight and height of the cheese slice
  rectX = random(300,340);
  rectY = random(220,160);
  rectW = random(120,200);
  rectH = random(120,170);
  rectC = random(0,25);

  // change in size od eyes
  iStrokeWeight = random(3,8);
  eyeLX = random(265,275);
  eyeLY = random(190,220);

  //Change in location of mouth
  mouthX = random(275,280);
  mouthW = random(1,4);

  //Change of location of heart on face
  heartX = random(210,230);

  //Different shades of color for the composition
  black = random(0,254);
  faceG = random(213,187);
  faceB = random(146,77);
  heartC = random(151,51);


}

Yoonseo1 – Variable Faces -Project 2

Face Dave

//Yoonseo(Dave) Choi
//Section B 
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
    
    createCanvas(640,480);
    background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {

}
function mouseClicked() {
    colorV = random(100,230);// change of background color
    division = random(1,16);//change of dividing factor
    St = random(0,255);// change of stroke color 
    if (val <= 0){
        background(colorV/d,colorV/d,colorV/2*d)
        push(new Face1);
        val += 1;
    } else {
    if (val == 1) {
        background(colorV/3*d,colorV/d,colorV);
        push(new Face2);
       val += 1;
    } else
    if (val == 2){
        background(colorV,colorV/d,colorV/d*4);
        push(new Face3);
       val += 1;;
    }else {
        if (val == 3){
        background(colorV/d,colorV,colorV/d*2);
        push(new Face4);
       val =0;
        }
        
    }
    }
 
  
 
}
//Face 1 
function Face1() {

    //left Face 
    //facial shape
    stroke(St/d*2,St,St/d*9) //stroke color for the faces

    strokeWeight(1);
    noFill();
    beginShape();
    vertex(177.91,184.25);
    quadraticVertex(155.28,181.5,139.25,182.41);
    quadraticVertex(129.75,184.5,121.5,186.58);
    endShape();
    line(121.5,186.58,107.08,201.16);
    line(107.08,201.16,100.91,220.91);
    line(100.91,220.91,102.58,225.91);
    line(102.58,225.91,90.58,241.41);
    //tip of nose
    beginShape();
    vertex(89.75,243.08);
    quadraticVertex(93.41,247.25,92,246);
    endShape();
    beginShape();
    vertex(93.41,243.08,);
    quadraticVertex(96.75,243,99.58,243.08);
    vertex(99.58,243.08);
    endShape();
    //starting lip and chin
    line(97.75,248.91,95.58,253.08);
    //lips
    beginShape();
    vertex(96.5,257.41);
    quadraticVertex(103.08,254.91,105.5,255.25);
    vertex(108.41,255.91);
    endShape();
    //chin
    beginShape();
    vertex(96.5,260.08);
    quadraticVertex(99.58,266.91,100.58,266.91);
    quadraticVertex(98.06,271.75,97.75,272.5);
    vertex(101.25,278.08);
    endShape();
    //neckand chin
    beginShape();
    vertex(120.08,284.08);
    quadraticVertex(103.66,279.33,103.66,279.33);
    quadraticVertex(126.25,259,135.25,255.76);
    vertex(148.58,252.08);
    endShape();
    line(126.75,284.08,143.91,295.75);
    //back of head and ears
    line(180.25,184.91,197.58,208.41);
    beginShape();
    vertex(196.75,223.91);
    quadraticVertex(189.25,234.25,184.75,248.5);
    vertex(192.41,261.58);
    endShape();
    //ears
    beginShape();
    vertex(167.91,208.41);
    quadraticVertex(174.25,213.75,171.25,223.25);
    quadraticVertex(167,234.5,158.91,230.41);
    vertex(160.75,221.5);
    endShape();
    //eyes
    beginShape();
    vertex(106.08,222.91);
    quadraticVertex(109.5,223.5,114.25,223.08);
    quadraticVertex(114.25,223.08,117.5,221);
    vertex(120.41,218.75);
    endShape();
}
function Face2(){
   strokeWeight(1);
    noFill();
    //head shape
    beginShape();
    vertex(296.25,253.08)
    quadraticVertex(296.25,237.25,300,220.25);
    quadraticVertex(300,220.25,289.25,192.25);
    quadraticVertex(289.25,192.25,258,184.91);
    quadraticVertex(237,190.25,212,204.25);
    quadraticVertex(204.25,216,199.5,234.49);
    quadraticVertex(199.5,234.49,199.25,243.25);
    vertex(202.25,251);
    endShape();
    //nose and eyes
    beginShape();
    vertex(201.75,253.25);
    quadraticVertex(202.75,252.25,209,262.75);
    quadraticVertex(209,262.75,211,266);
    endShape();
    //eyes
    beginShape();
    vertex(209.41,257.41);
    quadraticVertex(209.41,257.41,212.75,257.41);
    endShape();
    beginShape();
    vertex(226.41,261.58);
    quadraticVertex(226.41,261.58,230.25,262.5);
    vertex(238.91,259.08);
    endShape();
    //top of nose
    beginShape();
    vertex(218.5,246);
    quadraticVertex(218.5,246,214,271);
    quadraticVertex(214,271,198.5,294.5)
    endShape();
    beginShape();
    vertex(202,295.5);
    quadraticVertex(202,295.75,214.5,288);
    quadraticVertex(214.5,286,220.5,280);
    vertex(224.75,275.13);
    endShape();
    //lips
    beginShape();
    vertex(218.58,281.75); 
    quadraticVertex(218.58,281.75,221.58,285.91);
    quadraticVertex(221.58,285.91,231.5,281.5);
    vertex(241.08,284.33);
    endShape();
    beginShape();
    vertex(226.41,289.08);
    quadraticVertex(229,288.75,233.58,286.75);
    endShape();
    beginShape();
    vertex(224.75,289.91);
    quadraticVertex(226.75,293.5,228.5,297);
    quadraticVertex(228.5,297,237.75,298.25);
    quadraticVertex(237.75,298.25,247,296);
    vertex(278.41,274.08);
    endShape();
    //neck
    line(233.58,298.78,238,308);
    beginShape();
    vertex(296.25,241.41);
    quadraticVertex(302,253.5,313.25,263.5);
    endShape();
    //ears
    beginShape();
    vertex(272.75,252.25);
    quadraticVertex(276.5,263,282,263.5);
    quadraticVertex(282,263.5,287.5,242.25);
    quadraticVertex(287,235.5,280.75,234.25);
    vertex(271.5,238.5);
    endShape();

}
function Face3() {
    noFill();
    //hair
    beginShape();
    vertex(336,262);
    quadraticVertex(336,262,326.25,252.08);
    quadraticVertex(325.273,218,336.25,205.58);
    quadraticVertex(335.258,204.027,338.25,200.58);
    quadraticVertex(338.25,200.58,356,187.5);
    quadraticVertex(356,187.5,386.5,184);
    quadraticVertex(386.5,184,401.41,193.08);
    quadraticVertex(401.41,193.08,412.58,209.75);
    quadraticVertex(412.58,209.75,421.91,225.41);
    quadraticVertex(421.91,225.41,420.75,244);
    vertex(409.33,260.33);
    endShape();
    beginShape();
    vertex(335,221);
    quadraticVertex(343,204.667,354.667,202);
    quadraticVertex(362.667,202.333,376.91,200.5);
    quadraticVertex(380.667,200.667,403.5,208.41);
    quadraticVertex(407,212.667,413.44,223.91);
    quadraticVertex(413.667,241.667,409.667,254);
    quadraticVertex(408,262,400.91,277.91);
    quadraticVertex(389.3,275.66,375.3,271.3);
    quadraticVertex(368,271.33,344.41,277.91);
    quadraticVertex(340,269,332,251);
    quadraticVertex(331,244.33,333.41,226.75);
    endShape();
    //neck
    beginShape();
    vertex(346.75,278.08);
    quadraticVertex(348.667,279,349.833,279.75);
    vertex(353.55,292.08);
    endShape();
    beginShape();
    vertex(396.667,278);
    quadraticVertex(395.33,282.5,394.08,295.58);
    endShape();
    //eyes
    beginShape();
    vertex(344.87,213);
    quadraticVertex(353.24,213.25,366.25,210.25);
    endShape();
    beginShape();
    vertex(381,209.75);
    quadraticVertex(387.5,212.5,400.9,213.96);
    endShape();
    //nose
    line(371.25,206.91,371.25,226.75);

    beginShape(); 
    vertex(375.08,210.4);
    quadraticVertex(375.5,218.167,377,226.5);
    vertex(378.75,230.75);
    endShape();
    beginShape();
    vertex(363.75,233.58);
    quadraticVertex(369,230.58,375.667,230.667);
    vertex(378.75,233.667);
    endShape();
    //mouth
    beginShape();
    vertex(368.833,245.167);
    quadraticVertex(380.667,243.833,390.97,242.41);
    quadraticVertex(387.33,246.5,382.08,250.75);
    quadraticVertex(363.667,250,354.66,245.32);
    quadraticVertex(353.667,243.167,361.33,244.667);
    vertex(370.25,245.25);
    endShape();
}
function Face4(){
    noFill();
    //head shape
    beginShape();
    vertex(426.91,239.2);
    quadraticVertex(434,208,445.91,191.58);
    endShape();
    beginShape();
    vertex(453.75,189.08);
    quadraticVertex(472.75,186.25,483.5,187.25);
    quadraticVertex(501.75,194,513.08,200.5);
    endShape();
    beginShape();
    vertex(513.08,202.41);
    quadraticVertex(515,211,520,215);
    vertex(525.75,218);
    endShape();
    beginShape();
    vertex(523.91,220.57);
    quadraticVertex(523.5,222.5,522.75,224.91);
    endShape();
    beginShape();
    vertex(518.41,224.91);
    quadraticVertex(521.25,227.5,524.01,230.02);
    endShape();
    //chin
    beginShape();
    vertex(526.25,239.2);
    quadraticVertex(527.25,244.5,528.41,248.75);
    quadraticVertex(530.41,251.75,530.41,259.08);
    quadraticVertex(515.75,258.25,493.25,259.75);
    vertex(475.08,263.5);
    endShape();
    beginShape();
    vertex(468.58,258.08);
    quadraticVertex(459.75,254,453.75,246.65);
    endShape();
    //neck
    beginShape()
    vertex(529.08,261.41);
    quadraticVertex(513,267.5,502.78,273.08);
    quadraticVertex(502.25,275,500.41,289.75);
    endShape();
    //eyes
    beginShape();
    vertex(477.37,208.37);
    quadraticVertex(485,208,489.5,209.75);
    quadraticVertex(491.25,209.25,493.5,208.47);
    endShape();
    beginShape();
    vertex(511.41,209.13);
    vertex(514.54,209.13);
    endShape();
    //nose
    beginShape();
    vertex(504.87,208.2);
    quadraticVertex(519.35,218.84,516.75,219.25);
    quadraticVertex(514.75,220.5,511.08,222.17);
    endShape();
    //mouth
    beginShape();
    vertex(504.87,233.81);
    quadraticVertex(509.25,236.5,518.25,237);
    vertex(525.62,235.41);
    endShape();

}

For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.

jennyzha – project 02 – variable faces

my-sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;

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

function draw() {
    background(180);
    fill(r, b, g);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width/2 - faceWidth*0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    fill(e1, e2, e3);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    var mouth = width/2 
    ellipse(mouth, height/2+30, mouthSizeW, mouthSizeH)
} 

function mousePressed() {
	faceWidth = random(75,150);
	faceHeight = random(100,200);
	eyeSize = random(10,30);
	r = random(0, 255);
	b = random(0, 255);
	g = random(0, 255);
	e1 = random(0, 255);
	e2 = random(0, 255);
	e3 = random(0, 255);
	mouthSizeW = random(5, 50);
	mouthSizeH = random(10, 55);
}

While making this project I decided to play with color so I assigned random variables for the eyes and mouth and the face.