Category: Project-02-Variable-Face

cmhoward-project-02

cmhoward-p2

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 15;
var headphoneSize = 6;
var colorPicker = 1;
var faceColor = 2;
var mouthWidth = 3;
var mouthHeight = 4;
var eyebrowWidth = 5;
var eyebrowHeight = 6;

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

function draw() {
    //background
    switch(colorPicker) {
        case 1:
            background(252, 156, 231);
            break;
        case 2:
            background(230, 156, 252);
            break;
        case 3:
            background(156, 193, 252);
            break;
        case 4:
            background(252, 249, 156);
            break;
        default:
            background (161, 252, 156);
    }
    //headphones
    noFill();
    stroke('black');
    strokeWeight(4);
    curve(width / 2 - faceWidth * 1, height * 3.5, width / 2 - faceWidth / 1.75, height / 2, width / 2 + faceWidth / 1.75, height / 2, width / 2 + faceWidth * 1, height * 3.5);
    //ears
    fill('black');
    noStroke();
    ellipse(width / 2 - faceWidth / 2, height / 2, earSize, earSize*1.5);
    ellipse(width / 2 + faceWidth / 2, height / 2, earSize, earSize*1.5);
    //face
    switch(faceColor) {
        case 1:
            fill(252, 156, 176);
            break;
        case 2:
            fill(204, 139, 224);
            break;
        case 3:
            fill(139, 171, 224);
            break;
        case 4:
            fill(242, 239, 145);
            break;
        default:
            fill(143, 224, 139);
    }
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //hearteyes
    fill('pink');
    stroke('black');
    strokeWeight(1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //lefteye
    curve(width / 2 + width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    //righteye
    curve(width / 2 + width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    //nose
    noFill();
    curve(width / 2 + faceWidth / 2, height / 2 + faceHeight / 2, width / 2 - faceWidth / 16, height / 2 + faceHeight / 6, width / 2 + faceWidth / 16, height / 2 + faceHeight / 6, width / 2 - faceWidth / 2, height / 2 + faceHeight / 2);
    //mouth
    arc(width / 2, height / 1.6, mouthWidth, mouthHeight, TWO_PI, PI, OPEN);
    //eyebrows
    arc(width / 2 - faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
    arc(width / 2 + faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
}

function mousePressed() {
    faceWidth = random(80, 100);
    faceHeight = random(140, 165);
    eyeSize = random(10, 30);
    earSize = random(25, 40);
    headphoneSize = random(3, 8);
    colorPicker = int(random(1, 6));
    faceColor = int(random(1, 6));
    mouthWidth = faceWidth / random(2, 4);
    mouthHeight = faceHeight / random(2.5, 4.5);
    eyebrowWidth = faceWidth / random(3.5, 4);
    eyebrowHeight = faceHeight / random(8, 10);
}

i really enjoyed this project because i enjoyed designing throughout the code and trying new things as i went along instead of looking for one specific solution which i may have been trying too hard to do last week.

Alice Fang- Project 02 Variable Face

dancing bird 

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-02
*/

var R = 255; //RGB color
var G = 255;
var B = 255;

var HeadW = 300; //width of head
var HeadH = 200; //height of head
var HeadX = 320; //x position of head
var HeadY= 200; //y position of head

var beakA = 80; //length of beak

var t = "chirp";
var tX = 600; //text position
var tY = 440;
var ran = 300; //affecting variable

var kneeA = 300; //x position for knee
var kneeB = 390; //y position for knee

var wingW = 30; //wing width
var wingL = 120; //wing length
var degW = 260; //angle of wing

var featherA = 20; //width of first head feather
var featherB = 80; //height of first head feather
var featherC = 10; //width of second head feather
var featherD = 75; //height of second head feather
var deg = 50; //angle of head feather

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

function draw() {
	background(20, 30, 50);

	//bird legs
	stroke(117, 53, 18);
	strokeWeight(6);
	//left leg
	line(HeadX, HeadY, kneeA, kneeB);
	line(kneeA, kneeB, HeadX - 40, 480);
	//rightlig
	line(HeadX, HeadY, kneeA + 100, kneeB);
	line(kneeA + 100, kneeB, HeadX + 40, 480);

	//"chirp" text
	noStroke();
	textSize(20);
	textStyle(BOLD);
	fill(B - 120, G - 80, R - 100);
	text(t, tX, tY);
	fill(R - 20, B - 80, G - 120);
	text(t, mouseX, mouseY);
	fill(G - 100, B - 120, R - 10);
	text( t, tX + ran, tY + ran);

	//bird body
	noStroke();
	fill(R, G, B);
	ellipse(HeadX, HeadY, HeadW, HeadH);

	//left wing
	fill(R, G, B);
	push();
	translate(HeadX - HeadW/2, HeadY);
	rotate(180 + degW);
	ellipseMode(CORNER);
	ellipse(0, 0, wingW, wingL);
	pop();
	//right wing
	push();
	translate(HeadX + HeadW/2, HeadY);
	rotate(180 - degW);
	ellipseMode(CORNER);
	ellipse(-20, 0, wingW, wingL);
	pop();

	//head feathers
	fill(R, G, B);
	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180 + deg);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherA, 40);
	} else {
		ellipse(0, 0, featherA, featherB);
	}
	pop();

	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180+ deg + 40);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherC, 40);
	} else {
		ellipse(0, 0, featherC, featherD);
	}
	pop();

	//bird beak
	fill(193, 86, 27);
	triangle(HeadX, HeadY - 10, HeadX + beakA, 
		    HeadY, HeadX, HeadY + 5);

	//bird eyes
	fill(0);
	ellipse(HeadX - 32, HeadY - 15, 8, 8);
	ellipse(HeadX + 32, HeadY - 15, 8, 8);

}

function mousePressed() {
	R = random(180, 255);
	G = random(180, 255);
	B = random(180, 255);

	//head
	HeadW = random(120, 200);
	HeadH = random(150, 180);
	HeadX = random(300, 320);
	HeadY = random(150, 200);

	beakA = random(-70, 80);

	//knee joint
	kneeA = random(220, 300);
	kneeB = random(320, 370);

	//text position
	tX = random(110, 550);
	tY = random(20, 440);
	ran = random(-300, 300);

	//wing size and angle
	wingL = random(80, 120);
	wingW = random(10, 30);
	degW = random(200, 260);

	//head feather size and angle
	featherA = random(10, 20);
	featherB = random(50, 80);
	featherC = random(5, 10);
	featherD = random(20, 75);
	deg = random(-50, 50);


}

This dancing bird was inspired by a doodle that I tend to draw in my notes (and in my friends’ notes too…). Working with variables was a bit of a struggle for me, especially if something went wrong in the position or rotation, because then I had to figure out which variable the problem occurred with, as opposed to just toggling numbers, but this was a fun exercise to do!

birds of various sizes!

ardenw project 02 variable face

sketch.js

/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-02 
*/


var num= (1);

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

function draw() {
    if(num==1){
    //angry face
        background(66);
        fill (255,0,0);
        noStroke();
        ellipse(200, 200,300, 200);

        //eyes
        fill(255);
        stroke(152,8,8);
        strokeWeight(5);
        rect (100,200, 60,10);// left eye
        rect (240,200,60,10);//right eye

        //pupils
        fill(0);
        noStroke();
        rect (100,200, 10,10);
        rect (240,200,10,10);

        //hilight
        fill(255);
        noStroke();
        rect (100,200, 3,3);
        rect (240,200,3,3);


        //eyebrows
        fill(152,8,8);
        noStroke();
        rect (100,190, 60,10);
        rect (240,190,60,10);

        //mouth
        rect (170,250,60,10);
        fill(0);
        rect (180,251,40,6);

        //ears
        fill(152,8,8);
        noStroke();
        triangle(100,100,100,150,150,120);
        triangle(300,100,300,150,250,120);


    } else if (num==2){
    //sad face
        noStroke();
         background(84,108,254);
         fill (102,185,248);
         ellipse(200, 150,200, 180);

         //eyes
         fill(200);
         stroke (84,108,254);
         strokeWeight (4);
        ellipse (160,150, 40,20);// left eye
        ellipse (240,150,40,20);//right eye

        fill (0); //pupil
        ellipse (160,150, 20,20);
        ellipse (240,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(165,145, 10,5);
        ellipse (245,145,10,5);

        //mouth
        fill(84,108,254);
        ellipse(200, 200,50, 30);

        fill (102,185,248);
        ellipse(200, 210,50, 30);


    }else {
    //happy face
        background(255,138,23);
        fill (255,240,0); 
        ellipse(150, 150,200, 150);

          //eyes
         fill(255);
        ellipse (100,150, 40,20);// left eye
        ellipse (200,150,40,20);//right eye

        fill (0); //pupil
        ellipse (100,150, 20,20);
        ellipse (200,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(105,145, 10,5);
        ellipse (205,145,10,5);

        //mouth
        fill(255,138,23);
        ellipse(150, 190,50, 30);

        fill (255,240,0);
        ellipse(150, 180,50, 30);

    }

}

function mousePressed() {
   
num = num+1;
if (num==4)
{
    num=1;
}


}

For this assignment I decided to represent three emotions: Angry, Sad and Happy. I used if else statements and the variable num for function mouseIsPressed to change the faces and the background color to represent each emotion.

Sharon Yang Project 02 Variable Face

Project2_Variable_face

/*Sharon Yang
Section C
junginny
Project-02-B
*/

//variables for the cooridinates and the size of the facial features, 
//the face and the eyes; 
var eyeWidth = 68;
var eyeHeight = 52;
var faceWidth = 360;
var faceHeight = 320;
var faceX = 232
var faceY = 320

//variables for colors, for the hair and eyebrows 
var fillR = 50;
var fillG = 41;
var fillB = 46;
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(254,230,240);

    //hair behind the face, the color variables used for the hair color
    //to be randomized 
    fill(fillR,fillG,fillB);
    rect(50,254,360,354);

   //face
    noStroke();
    fill(253,227,204);
    ellipse(faceX, faceY, faceWidth, faceHeight);

    //eyes, setting variables for the X coordinates of the left and
    //the right eyes using the width of the canvas and the face for
    //the eye positions to suit the face shape as it changes
    var LeftEyeX = width*0.48-faceWidth*0.2;
    var RightEyeX = width*0.48+faceWidth*0.2;
    fill(0);
    ellipse(LeftEyeX, faceHeight, eyeWidth, eyeHeight);
    ellipse(RightEyeX, faceHeight, eyeWidth, eyeHeight);

    //pupils, setting variables for the X coordinates of the left and
    //the right pupils using the left and right X coordinate variables
    //to remain at an appropriate position within the eyes as the size
    //the size and the shape of the eyes change
    var LeftPupilX = LeftEyeX*1.14;
    var RightPupilX = RightEyeX*1.07;
    fill(255);
    ellipse(LeftPupilX, faceHeight, 12, 12);
    ellipse(RightPupilX, faceHeight, 12, 12);

    //hair and bangs, the Y coordinates have been determined by the
    //face height as it varies 
    noStroke();
    fill(fillR,fillG,fillB);
    arc(86,faceHeight*0.9,140,200,HALF_PI,PI+HALF_PI);
    arc(32,faceHeight*1.2,140,200,PI+HALF_PI,HALF_PI);
    arc(84,faceHeight*1.65,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*0.87,140,200,PI+HALF_PI,HALF_PI);
    arc(440,faceHeight*1.24,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*1.65,140,200,PI+HALF_PI,HALF_PI);
    arc(236,faceHeight*0.7,408,280,PI,PI+PI,OPEN);
    arc(40,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(90,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(130,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(170,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(220,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(280,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(320,faceHeight*0.59,190,200,0,QUARTER_PI);

    //nose, the X and Y coordinates as well as the size determined 
    //by the face size as it varies
    noStroke();
    stroke(223,197,168);
    strokeWeight(4);
    line(faceWidth*0.67,faceHeight*1.07,faceWidth*0.70,faceHeight*1.14);
    line(faceWidth*0.70,faceHeight*1.14,faceHeight*0.72,faceHeight*1.16);

    //brows, setting variables for the height of the brows - the distance
    //from the eyes
    var browHeight = 274

    noFill();
    //the color variables used to randomize the colors of the brows
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    //the position of the brows determined by the position and the size of the 
    //eyes
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-15, browHeight);
    curveVertex(LeftEyeX+15, browHeight);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    endShape();

    noFill();
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-15, browHeight);
    curveVertex(RightEyeX+15, browHeight);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    endShape();
    
    //mouth, setting variables for the berzier point function
    //determining the position of the mouth in relative to the face
    //size, the edges of the mouth are assigned values for it to
    //be randomized and change in their positions
    noFill();
    stroke(237,34,93);
    strokeWeight(7);
    var x1 = 170,
    x2 = faceWidth*0.6,
    x3 = faceWidth*0.7,
    x4 = 300;
    var y1 = 410,
    y2 = faceHeight*1.35,
    y3 = faceHeight*1.37,
    y4 = 410;
    bezier(x1, y1, x2, y2, x3, y3, x4, y4);

    //ears, setting variable for the Y coordinate of the ears for
    //for the position of the earrings, the position of the ears 
    //determined by the face size
    var earY = faceHeight+20
    fill(253,227,204);
    noStroke();
    arc(faceX - faceWidth/3,earY,100,100,HALF_PI,PI+HALF_PI);
    arc(faceX + faceWidth/3,earY,100,100,PI+HALF_PI,HALF_PI);

    //earrings, the position determined by the position of the ears
    //which varies as the face size changes 
    fill(255);
    ellipse(faceX - faceWidth/3-20,earY+30,14,14);
    ellipse(faceX + faceWidth/3+20,earY+30,14,14);

    //neck
    noStroke();
    fill(253,227,204);
    rect(176,460,120,100);
    fill(253,227,204);
    ellipse(295,591,127,100);

    //shoulders
    fill(5,57,111);
    rect(46,520,400,200,80);

    //v-neck on the shirt
    fill(253,227,204);
    noStroke();
    triangle(230,600,176,520,296,520);
    stroke(255);
    strokeWeight(13);
    line(176,520,230,600);
    line(230,600,296,520);
}

//when the user presses the mouse
//the values of the variables are randomized and reassigned
//varying the size of the face and the eyes, and the positions
//of the brows, and the colors of the hair and the brows
function mousePressed() {
    faceWidth = random(340, 380);
    faceHeight = random(300,340);
    eyeWidth = random(60,80);
    eyeHeight = random(24,66);
    browArc = random(5, 50);
    browHeight = random(246,340);
    browHeight = constrain(browHeight,faceHeight*0.9+20,faceHeight+eyeHeight/2+10);
    x1 = random(100,180);
    y1 = random(380,600);
    x4 = random(270,340);
    y4 = random(380,600);
    fillR = random(20,80);
    fillG = random(10,70);
    fillB = random(16,76);
}

Creating an animation was fun yet quite complex requiring to use many variables and equations instead of the usual coordinates. It really helped me understand setting the variables as well as the random functions. I also had to learn other functions including the curve vertex and the berzier point as using ellipses and arcs limited creating certain motions.

Lingfan Jiang – Project 02- Variable Face

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-02-Variable-Face


var eyeWidth = 50;
var eyeHeight = 80;
var angle = 0;
var eyeSize = 1
var eyeBall = 50;
var eyeBrow = 75;
var eyeBrow2 = 65;


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

}

function draw(){
    background(255);
    translate(width/2,height/3);

    stroke(0);
    strokeWeight(8);
    //eyebrow on the left
    beginShape();
    curveVertex(-100, -50);
    curveVertex(-75, -eyeBrow);
    curveVertex(-50, -eyeBrow);
    curveVertex(-25, -50);
    endShape();

    //eyebrow on the right
    beginShape();
    curveVertex(100, -50);
    curveVertex(75, -eyeBrow-20);
    curveVertex(50, -eyeBrow2-30);
    curveVertex(25, -50);
    endShape();

    strokeWeight(2);
    angleMode(DEGREES);
    ellipseMode(CENTER);

    //left eye
    push();
    rotate(angle);
    fill(255);
    ellipse(-50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(-eyeBall,0,7,10);
    pop();

    //right eye
    push();
    scale(eyeSize);
    fill(255);
    ellipse(50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(eyeBall,0,7,10);
    pop();

    // mouse (using eyebrow to draw the mouse)
    stroke(0);
    strokeWeight(3);
    scale(eyeSize);
    beginShape();
    curveVertex(-75, 1.5 * eyeBrow2);
    curveVertex(-25, 1.7 * eyeBrow);
    curveVertex(25, 1.7 * eyeBrow);
    curveVertex(75, 1.5 * eyeBrow2);
    endShape();

    //nose
    fill(0);
    ellipse (0,40,15,5);
    
}

function mousePressed(){
    eyeWidth = random(30,50);
    eyeHeight = random(50,80);
    angle = random(-45,0);
    eyeSize = random(0.5, 1.5);
    eyeBall = random(35,60)
    eyeBrow = random(25,85);
    eyeBrow2 = random(35,65);
}

In this project, I am inspired by those cartoon faces online. Therefore, I decided to go with this kind of style without the shape of face or color. One thing I found pretty interesting is that the random syntax in javascript is not completely random. Before starting this project, I assumed that I could use the same random variable to do different values on different objects. As it turns out, it is a bit different. In the end, I am satisfied with the final result, but it does have some problems when certain parts grow too big and intersect with other shapes.

 

reference: http://www.yim778.com/group/facial-expressions-pictures-cartoons/

John Legelis Project 02 Variable Face

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();

}

Drafting and Calculations in Sketchbook

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.

Kai Zhang-Project-02-Variable-Face

kaiz1_Project02

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-02

//eyes
var eyeLW = 40;
var eyeLH = 20;
var eyeRW = 40;
var eyeRH = 20;
var eyeR = 10; //eye rotation
var eyeX = -50;

//eye background
var eyeBW = 70;
var eyeBH = 60;

//face
var faceW = 240;
var faceH = 220;

//knife
var knifeX = 0;
var knifeY = 0;
var knifeR = 0;

//overall Rotation
var rotateA = 0;


function setup() {
    createCanvas(480, 640);
    background(80);
    angleMode(DEGREES);
}


function draw() {
	background(80);
	strokeWeight(5);
	fill(255, 0, 0);
	translate(240, 320);

	rotate(rotateA);

	//knife
	push();
		fill(255);
		translate(knifeX, knifeY);
		rotate(knifeR);
		//knife edge
		beginShape();
			vertex(0, 0);
			vertex(0, 45);
			vertex(12, 45);
			vertex(12, 13);
		endShape(CLOSE);
		//knife handle
		fill(0);
		beginShape();
			vertex(-5, 45);
			vertex(17,45);
			vertex(17, 47);
			vertex(11, 47);
			vertex(11, 65);
			vertex(1, 65);
			vertex(1, 47);
			vertex(-5, 47);
		endShape(CLOSE);

	pop();

	//face
	ellipse(0, 0, faceW, faceH);
	line(0, -faceH/2, 0, faceH/2);

	//eye background
	push();
		fill(0);
		ellipse(eyeX - 3, -20, eyeBW, eyeBH);
		ellipse(-eyeX + 3, -20, eyeBW, eyeBH);
	pop();

	//eyes
	push();
		fill(255);
		translate(eyeX, -20);
		rotate(eyeR);
		ellipse(0, 0, eyeLW, eyeLH);
	pop();
	push();
		fill(255)
		translate(-eyeX, -20);
		rotate(-eyeR);
		ellipse(0, 0, eyeRW, eyeRH);
	pop();
}



function mousePressed() {
	eyeX = (-faceW/5);
	eyeLW = random(37, 45);
	eyeLH = random(10, 40);
	eyeRW = random(37, 45);
	eyeRH = random(10, 40);
	eyeR = random(-13, 13);
	eyeBH = random(55, 80);
	eyeBW = random(65, 80);

	faceW = random(210, 280);
	faceH = random(150, 280);

	knifeX = random(-180, 180);
	knifeY = random(-280, 280);
	knifeR = random(-180, 180);

	rotateA = random(-30, 30);
}

Deadpool is one of my favorite Marvel characters. He made possible two amazing featured films and hundreds of comic stories. The reason I chose him as the protagonist of my project 2 is he makes perfect leap from and to 3D and 2D world. The kartoon version of him comes with countless different proportions of facial features and expressions (especially the eyes), easily fits into the gridlines of the project. In the code of this project, I’ve set up to 14 different variables, composing the different eye shapes, eye shade shapes, face shapes, orientations, etc. I’ve also added an “eastern egg”, a small knife that floats across the canvas that occasionally hits the little deadpool’s haed. Luckily, because of his super power, he would be easily recovered from that. 🙂

Catherine Coyle – Project 02 – Variable Faces

catherine faces

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 300;
var noseShape = 1;
var noseWidth = 50;
var noseHeight = 50;
var eyeSize = 50;
var eyeWidth = 100;
var eyeShape = 1;
// these are the coordinates of points on the mouth
var mouthY = 300;
var mouthMX = 320;
var mouthMY = 350;
var mouthLength=100
// skin color variables
var skinR = 250;
var skinG = 180;
var skinB = 140;
// pupils
var pupilSize = 30;
var pupilR = 0;
var pupilG = 0;
var pupilB = 0;
// other random features
var glasses = true;
var freckle = true;
var freckleX = 400;
var freckleY = 300;
var freckleSize = 5;
var blush = true;
var blushSize = 100;


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

function draw() {
	strokeWeight(0);
	background(239, 198, 198);
	// basic face
	fill(skinR,skinG,skinB);
	ellipse(width/2,height/2,faceWidth,faceHeight);
	// some random characteristics
	if (freckle == true) {
		fill(104, 54, 11);
		ellipse(freckleX, freckleY, freckleSize, freckleSize)
	}
	if (blush == true) {
		fill(skinR,skinG-50,skinB);
		ellipse((width/2)-(faceWidth/2)+blushSize/2,height/2,blushSize, blushSize);
		ellipse((width/2)+(faceWidth/2)-blushSize/2,height/2,blushSize, blushSize);
	}
	// eyes
	fill(255);
	if (eyeShape==1) {
		ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
		ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
	}
	else if (eyeShape==2) {
		rect((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
		rect((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
	}
	else if (eyeShape==3) {
		triangle((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
		triangle((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
	}
	// pupils
	fill(pupilR,pupilG,pupilB);
	ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
	ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
	// nose
	fill(skinR-50,skinG-20,skinB-20);
	if (noseShape == 1) {
		ellipse(width/2,height/2,noseWidth,noseHeight);
	}
	else if (noseShape == 2) {
		rect((width/2)-noseWidth/2,(height/2)-noseHeight/2,noseWidth,noseHeight);
	}
	else if (noseShape==3) {
		triangle((width/2)-noseWidth/2, (height/2)+(noseHeight/2),(width/2)+noseWidth/2, (height/2)+(noseHeight/2), width/2,(height/2)-(noseHeight/2));
	}
	// mouth
	strokeWeight(5);
	noFill();
	beginShape();
	curveVertex((width/2)-(mouthLength/2),mouthY);
	curveVertex((width/2)-(mouthLength/2),mouthY);
	curveVertex(mouthMX,mouthMY);
	curveVertex((width/2)+(mouthLength/2),mouthY);
	curveVertex((width/2)+(mouthLength/2),mouthY);
	endShape();
	// if they have glasses theyre added here
	if (glasses == true) {
		noFill();
		strokeWeight(5);
		stroke(0);
		ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
		ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
		line((width/2)-(eyeWidth/8),(height/2)-(faceHeight/4),(width/2)+(eyeWidth/8),(height/2)-(faceHeight/4))
	}
}

function mousePressed() {
	// randomizing all variables used for the face to make a new one!
	faceWidth=random(150,450);
	faceHeight=random(150,450);
	// randomizes the shape used for the nose
	// 1 means circle, 2 means rectangle, 3 means triangle
	noseShape = int(random(1,3.99));
	noseWidth = random(10,100);
	noseHeight = random(10,100);
	eyeWidth = random(20,faceWidth/2);
	eyeSize = random(20,eyeWidth/2);
	mouthLength = random(50,faceWidth*3/4);
	mouthY = (height/2)+faceHeight/4;
	mouthMY = random((height/2)+(noseHeight/2)+10, (height/2)+(faceHeight/2)-10);
	mouthMX = random((width/2)-(mouthLength/2)+10,(width/2)+(mouthLength/2)-10);
	skinR = random(183,255);
	skinG = random(120,skinR-60);
	skinB = skinG - random(30,60);
	pupilSize=random(5,eyeSize-10);
	pupilR = random(0,255);
	pupilG = random(0,255);
	pupilB = random(0,255);
	// eye shape works the same way as nose shape
	eyeShape = int(random(1,3.99));
	// randomizing extra features
	if (random(0,5) > 2) {
		glasses = false;
	}
	else {
		glasses = true;
	}
	if (random(0,10) > 6) {
		freckle = true;
		freckleX = (random(width/2, width/2 + faceWidth/2))*3/4;
		freckleY = (random(height/2, height/2 + faceHeight/2))*3/4;
		freckleSize = random(4,10);
	}
	else {
		freckle = false;
	}
	if (random(0,10) > 5) {
		blush = true;
		blushSize = random(50,faceWidth/2);
	}
	else {
		blush = false;
	}
}

 

I had a lot of fun with this project! I really wanted to emphasize the randomization so instead of creating a basic face set up and randomizing small parts, I decided to just create the face as if everything is randomly generated each time. Because of this, I didn’t make any sketches this time because it was impossible to predict anything about the faces. I wanted them all to be unrecognizable from one another. To help with this, I added variations to eye/nose shapes and also added additional features that aren’t on the face in every randomization. Initially I had wanted to add some kind of animation to this project but it ended up being to complicated with all the variability. Some of the faces end up being kind of funny/scary but I think it’s fun to click and see what the code can come up with!

Helen Reynolds – Project 2 – Variable Faces

hreynold-variablefaces 

/* 
Helen Reynolds
Section E
hreynold@andrew.cmu.edu
Project-02
*/

//shape variables
var noseWidth = 47;
var faceWidth = 304;
var faceHeight = 265;
var eyeSize = 30;
var mouthHeight = 34;
//color variables
var backgroundR = 245;
var colorR = 32;


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

function draw() {
    background(backgroundR, 229, 218);

    //face
    rectMode (CENTER);
    noStroke();
    push();
    translate(width / 2, height / 2);
    rotate(110);
    fill(218, 164, 129);
    rect(0, 0, faceWidth,  faceHeight, 132);
    pop();

    //mouth
    fill(colorR, 30, 30);
    ellipse(width / 2, height / 2 + 70, 58, mouthHeight);

    //cheeks
    fill(253, 219, 200);
    ellipse(width / 2 - 25, height / 2 + 50, 56, 56);
    ellipse(width / 2 + 25, height / 2 + 50, 56, 56);

    //ears 
    fill(218, 164, 129);
    triangle(170, 97, 251, 144, 186, 212);
    triangle(474, 97, 393, 144, 455, 212);

    //bridge of nose
    rectMode (CENTER);
    noStroke();
    fill(206, 152, 123);
    rect(width / 2, height / 2, noseWidth, 76, 18);

    //nose
    rectMode (CENTER);
    noStroke();
    fill(167, 83, 78);
    rect(width / 2, height / 2 + 27, noseWidth, 24, 9);

    //eyes
    fill(colorR, 50, 30);    
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //eyes sparkle
    fill(255);
    ellipse(eyeLX + 2, height / 2 - 2, eyeSize / 3, eyeSize / 3);
    ellipse(eyeRX + 2, height / 2 - 2, eyeSize / 3, eyeSize / 3);
}

function mousePressed() {
    faceWidth = random(290, 340);
    faceHeight = random(250, 270);
    eyeSize = random(20, 40);
    colorR = random(30, 170);
    noseWidth = random(35, 60);
    mouthHeight = random(35, 65);
    backgroundR = random(200, 255);

}

To create this kitten, I sought inspiration from Hello Kitty and real cats. Starting off, I worked primarily in Illustrator. While I could’ve taken a more imaginative route with this, I chose to make the variations in my project pretty subtle so that the cat was always relatively believable.

Kitten process

Anthony Ra – Project02 – Variable Faces

sketch


var eyeSize = 20;
var eye = 40;
var faceWidth = 100;
var faceHeight = 130;
var fillet = 100;
var head = 50;
var headd = 50;
var teeth = 20;
var sideStache = 7;
var r, g, b;

function setup() {
  createCanvas(480, 600);
  background(220, 250, 220);
  r = random(255);
  g = random(255);
  b = random(255);
  noStroke(0)

}

function draw() {

/* fixed symbol */
noStroke();
fill(70, 200, 0);
triangle(240, 20, 210, 100, 225, 100);

fill(150, 230, 0);
triangle(240, 20, 225, 100, 255, 100);

fill(70, 200, 0);
triangle(240, 20, 255, 100, 270, 100);

fill(30, 150, 0);
triangle(210, 100, 225, 100, 240, 180);

fill(70, 200, 0);
triangle(225, 100, 240, 180, 255, 100);

fill(30, 150, 0);
triangle(240, 180, 255, 100, 270, 100);

rectMode(RADIUS);
fill(250, 220, 190);
rect(width/2, height*3/5, faceWidth, faceHeight, fillet);
var eyeLX = width/2 - faceWidth*0.4;
var eyeRX = width/2 + faceWidth*0.4;

/* neck */
noStroke();
fill(250, 220, 190);
rect(width/2, height*4/5, faceWidth - 15, 185);

/* beard */
fill(90, 35, 5);
arc(width/2, height*3/5 + 30, faceWidth*2, faceHeight*2 - 50, TWO_PI, PI);

fill(250, 220, 190);
arc(width/2, height*3/5 + 30, faceWidth*2, faceHeight + 20, TWO_PI, PI);

/* eye */
fill(250);
ellipse(eyeLX, height*3/5 - 30, eye, eyeSize);
ellipse(eyeRX, height*3/5 - 30, eye, eyeSize);

/*pupil*/
fill(0);
ellipse(eyeLX, height*3/5 - 30, eyeSize, eyeSize);
ellipse(eyeRX, height*3/5 - 30, eyeSize, eyeSize);

/* ear */
fill(240, 220, 190);
arc(width/2 - faceWidth, height*3/5, 2*eyeSize, 2*eye, HALF_PI, HALF_PI + PI);
arc(width/2 + faceWidth, height*3/5, 2*eyeSize, 2*eye, HALF_PI + PI, HALF_PI);


fill(220, 200, 170);
arc(width/2 - faceWidth, height*3/5, eyeSize, eye, HALF_PI, HALF_PI + PI);
arc(width/2 + faceWidth, height*3/5, eyeSize, eye, HALF_PI + PI, HALF_PI);

fill(90, 35, 5);
rect(eyeLX, height*1/2 + 5, 5 + eye/2, eyeSize/4, fillet/25);
rect(eyeRX, height*1/2 + 5, 5 + eye/2, eyeSize/4, fillet/25);

/* hair */
fill(80, 30, 5);
ellipse(205, 225, head*2, head + 10);

fill(90, 35, 5);
triangle(140, 360, 150, 302, 133, 290);
triangle(340, 360, 347, 290, 330, 302);

fill(125, 40, 7);
ellipse(167, 247, headd, headd - 7);
ellipse(280, 265, head, head);

fill(90, 35, 5);
ellipse(211, 250, 2*head, head);
ellipse(150, 280, headd - 10, headd + 20);
ellipse(330, 280, head - 10, head + 20);
ellipse(260, 240, headd, headd);
ellipse(290, 226, head + 30, head + 10);

fill(115, 35, 5);
ellipse(260, 215, headd, headd);

fill(85, 30, 5);
ellipse(281, 238, headd, headd);

fill(115, 35, 5);
ellipse(176, 264, headd, headd);
ellipse(317, 248, head + 20, head);

/* teeth */

stroke(90, 35, 5);
strokeWeight(2);
line(eyeLX, 415, eyeRX, 415);

fill(50);
arc(width/2, 415, 80, 35, TWO_PI, PI);

fill(200, 0, 0);
noStroke();
arc(width/2, 415, teeth*2, teeth*4, TWO_PI, PI);

fill(250, 0, 0);
arc(width/2, 415, teeth/5, teeth*4 - 5, TWO_PI, PI);

fill(250);
noStroke();
arc(eyeLX + 10, 415, teeth, teeth, TWO_PI, PI);
arc(eyeLX + 30, 415, 20, 20, TWO_PI, PI);
arc(eyeRX - 30, 415, teeth, 20, TWO_PI, PI);
arc(eyeRX - 10, 415, 20, teeth, TWO_PI, PI);

/* stache */
stroke(90, 35, 5);
strokeWeight(10);
point(eyeLX, 410);
point(width/2, 400);
point(eyeRX, 410);

noFill();
beginShape();
curveVertex(eyeLX, 410);
curveVertex(eyeLX, 410);
curveVertex(width/2, 400);
curveVertex(eyeRX, 410);
curveVertex(eyeRX, 410);
endShape();

noFill();
strokeWeight(7);
beginShape();
curveVertex(eyeLX, 410);
curveVertex(eyeLX, 410);
curveVertex(eyeLX - sideStache, 440);
curveVertex(eyeLX - 5, 475);
curveVertex(eyeLX - 5, 475);
endShape();

noFill();
strokeWeight(7);
beginShape();
curveVertex(eyeRX, 410);
curveVertex(eyeRX, 410);
curveVertex(eyeRX + sideStache, 440);
curveVertex(eyeRX + 5, 475);
curveVertex(eyeRX + 5, 475);
endShape();

/* nose */

noFill();
stroke(90, 35, 5);
strokeWeight(3);
arc(width/2, 365, eyeSize*2, eye, TWO_PI, PI);

fill(0);
ellipse(width/2 + 7, 375, eyeSize/4, eyeSize/4);
ellipse(width/2 - 7, 376, eyeSize/4, eyeSize/4);

/* shirt */
noStroke();
fill(r, g, b, 127);
triangle(0, 575, 156, 525, width/2 + 40, 600);
triangle(480, 575, 324, 525, width/2 - 40, 600);
triangle(width/2, 575, width/2 + 40, 600, width/2 - 40, 600);

fill(r, g, b, 115);
triangle(0, 575, 0, 600, width/2 + 40, 600);
triangle(480, 575, 480, 600, width/2 - 40, 600);



}

function mousePressed() {


  eyeSize = random(10, 30);
  head = random(45, 65);
  headd = random(45, 65);
  teeth = random(15, 25);
  sideStache = random(5, 12);
  r = random(255);
  g = random(255);
  b = random(255);
}

The first thing I thought of when it came to interchangeable facial features is the life simulation game, The Sims. I know a guy in which many people and I agree on looks like the default Sims character. Implementing variables was a bit of a challenge in which I couldn’t only rely on numbers for the placement of my shapes. There are subtle changes in facial features, but as a whole, the face looks very different from the last to the next.