Category: Uncategorized

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.

jyook_VariableFaces

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project-02

//aspects of variability
var faceWidth = 150;
var faceHeight = 150;

var faceColorR = 255;
var faceColorG = 255;
var faceColorB = 255;

var topHeadWidth = 150;
var topHeadHeight = 150; 

var eyeWidth = 15;
var eyeHeight = 15;

var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0; 

var pupilWidth = 5;
var pupilHeight = 5;

var pupilColorR = 0;
var pupilColorG = 0;
var pupilColorB = 0; 

var eyebrowThick = 3;

var noseWidth = 8; 
var noseHeight = 8;

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

function draw() {
    background(faceColorR * (1/6), faceColorG * (1/6), faceColorB * (1/6));

    //draw general face
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //draw top of head
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2.5, topHeadWidth, topHeadHeight);

    //draw eyes and eye color
    noStroke();
    var eyeLx = width / 2 - faceWidth * 0.25;
    var eyeRx = width / 2 + faceWidth * 0.25;
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLx, height / 2, eyeWidth, eyeHeight);
    ellipse(eyeRx, height / 2, eyeWidth, eyeHeight);

    //draw eyebrow and its thickness
    noStroke();
    var browLx = eyeLx - 13;
    var browRx = eyeRx - 13;
    fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    rect(browLx, height / 2.2, 25, eyebrowThick);
    rect(browRx, height / 2.2, 25, eyebrowThick);

    //draw pupils
    noStroke();
    fill(eyeColorR * 2, eyeColorG * 2, eyeColorB * 2);
    ellipse(eyeLx, height / 2, pupilWidth, pupilHeight);
    ellipse(eyeRx, height / 2, pupilWidth, pupilHeight);

    //draw nose
    noStroke();
    fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    ellipse(width / 2, height / 1.85, noseWidth, noseHeight);

    //draw mouth
    noFill();
    stroke(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    strokeWeight(2);
    arc(width/2, height/1.85 + 13, 30, 5, 0, PI, OPEN);

}

function mousePressed() {
    //randomize dimensions of face
    faceWidth = random(70, 200);
    faceHeight = random(80, 200);

    //randomize color of face
    faceColorR = random(0, 255);
    faceColorG = random(0, 255);
    faceColorB = random(0, 255);

    //randomize dimensions of eyes
    eyeWidth = random(10, 30);
    eyeHeight = random(10, 30);

    //randomize dimensions of third eye
    thirdEyeSize = random(0, 30)

    //randomize color of eyes
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);

    //randomize eyebrow thickness
    eyebrowThick = random(1, 8);

    //randomize dimensions of nose
    noseWidth = random(5, 30);
    noseHeight = random(10, 30);

    //randomize dimensions of pupils
    pupilWidth = random(5, 10);
    pupilHeight = random(5, 10);

    //randomize dimensions of top head
    topHeadWidth = random(90, 180);
    topHeadHeight = random(90, 180);

}

When I was starting out with the project, I didn’t know what features to add to the faces other than the basic eyes, head, nose, and mouth. After some time playing around with primitive shapes, I placed a new ellipse that overlapped with the original face ellipse, which made it look like a weird species. So I decided that the second head’s size would be fun to manipulate. In the end, the theme of my project was about showing the many ways an alien can look like in our imagination.