Category: Project-02-Variable-Face

Alice Cai Project 02

sketch-50.js

var eyeSize = 50;
var faceWidth = 250;
var faceHeight = 300;
var mouthWidth = 100
var mouthHeight = 50
var flufF = 50

function setup() {
    createCanvas(640,480);
}
 
function draw() {
    background(252, 136, 3);

    //body
    fill(234, 255, 0);
    strokeWeight(5);
    ellipse(width / 2, height, faceWidth,  faceHeight);


//face
    fill(234, 255, 0);
    strokeWeight(5);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    

//eyes
    fill(255);
    stroke(0);
    strokeWeight(0);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX + 10, height / 2, eyeSize + 10, eyeSize);
    ellipse(eyeRX + 10 , height / 2, eyeSize + 10, eyeSize);
   
    fill(0);
    stroke(0);
    strokeWeight(0);
    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);
   

//mouth
    fill(194, 66, 66);
    strokeWeight(0);
    ellipse(width / 2, height / 1.5, mouthWidth,  mouthHeight);

//fluff
    stroke(234, 255, 0);
    strokeWeight(30);
    line(width / 2.05, 80, width /2.1 , 120);

    stroke(234, 255, 0);
    strokeWeight(20);
    line(width / 2.5, 80, width /2.1 , 120);

     stroke(234, 255, 0);
    strokeWeight(10);
    line(width / 2.3, 50, width /2.1 , 120);

}


    
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(200, 250);
    faceHeight = random(250, 350);
    eyeSize = random(30, 60);
    mouthHeight = random(40, 60);
    mouthWidth = random(75, 100);
}

This is my chick! I first made variables for the values that I wanted to change. Then made a canvas and shapes. I used canvas width/height variable to control a lot of shape positioning. Finally, I set some values to random when click, and also set restraints so shapes don’t come out of the face.

Lanna Lang – Project 02 – Variable Face

lanna_project02_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
// Project 02 Variable Face

var fill1 = '#00bff3'
var r = 255
var g = 245
var b = 104
var duckoWidth = 500
var duckoHeight = 600
var thic = 20
var mouthWidth = 70
var eyeSize = 20
var blushX = 80
var blushY = 470


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

function draw() {
    background(fill1);
    
//lefthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 170, 150);

//righthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 310, 150);

//body
    fill(r, g, b);
    ellipse(240, 550, duckoWidth, duckoHeight);

//eyes
    fill(0);
    circle(140, 390, eyeSize);
    circle(340, 390, eyeSize);

//mouth
    strokeWeight(mouthWidth);
    stroke('#f49ac1');
    line(200, 500, 280, 500);

//blush lines on the left
    strokeWeight(10);
    stroke('#f69679');
    line(blushX - 20, blushY, blushX, blushY + 30);
    line(blushX, blushY, blushX + 20, blushY + 30);
    line(blushX + 20, blushY, blushX + 40, blushY + 30);
  
//blush lines on the right
    strokeWeight(10);
    stroke('#f69679');
    line(blushX + 300, blushY, blushX + 320, blushY + 30);
    line(blushX + 320, blushY, blushX + 340, blushY + 30);
    line(blushX + 340, blushY, blushX + 360, blushY + 30);
}

function mousePressed() {
    g = random(200, 255);
    duckoWidth = random(100, 900);
    mouthWidth = random(30, 200);
    eyeSize = random(5, 150);
}

I experimented with different faces and making different characters, but I enjoyed the result of coding this character, so this became my final outcome. The code behind the character is simple, but after experimenting with p5js and creating characters for a while, I decided that sometimes less is more.

Mari Kubota- Project 2- Variable Faces

In this project I changed the size of the cat’s eyes, nose, mouth, head, ears, and body with each mouse press. The most challenging part of the project was to make the ears connect to the head with each randomized variable.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 80;
var bodyWidth = 100;
var bodyHeight = 150;
var noseX = 10;

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

function draw() {
    noStroke();
    background(147,184,186);

    fill (0);
    ellipse(width/2, height/2+100, bodyWidth, bodyHeight); //body
    triangle(width/2, height/2+faceHeight/2, width/2+faceWidth/2, height/2, width/2+faceWidth/4,height/4); //ear
    triangle(width/2, height/2+faceHeight/2, width/2-faceWidth/2, height/2, width/2-faceWidth/4,height/4); //ear
    ellipse(width/2, height/2, faceWidth, faceHeight); //head

    fill(255,145,200);
    triangle (width/2, height/2+15, width/2+noseX, height/2+5, width/2-noseX, height/2+5); //nose
    stroke(255,145,200);
    strokeWeight(4);
    line(width/2, height/2+15, width/2+eyeSize, height/2+20); //mouth
    line(width/2, height/2+15, width/2-eyeSize, height/2+20); //mouth

    noStroke();
    fill (231,219,82)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //eye
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize); //pupil
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize); //pupil
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(80, 150);
    eyeSize = random(10, 30);
    bodyWidth = random(100,150);
    bodyHeight = random(130,200);
    noseX = random(5,20);
}

Timothy Liu — Project 02 — Variable Face

tcliu-OpenEnded-02

// Timothy Liu
// 15104 Section C
// Open Ended-02

// facial features (variables)
var eyeWidth = 25;
var eyeHeight = 15;
var pupilWidth = eyeWidth / 2;
var pupilHeight = 11 * eyeHeight / 16;
var noseWidth = 15;
var noseHeight = 40;
var earSize = 30;
var headWidth = 125;
var headHeight = 150;
var mouthWidth = 60;
var mouthHeight = 40;
var mouthStart;
var mouthEnd;
var skin1 = "#FFD3A1";
var eyeL;
var eyeR;

// body shape and size (variables)
var bodyWidth = 200;
var bodyHeight = 370;
var colorR = 105;
var colorG = 64;
var colorB = 122;

// hat dimensions and color (variables)
var hatR = 14;
var hatG = 28;
var hatB = 117;
var hatBottom;

// function time!
function setup() {
    
    createCanvas(600, 480);
    mouthStart = TWO_PI;
    mouthEnd = PI;
    eyeL = width / 2 - headWidth / 5;
    eyeR = width / 2 + headWidth / 5;
    hatBottom = height / 4 - headHeight / 6;
    // initializing P5.js functions in setup()

}
 
function draw() {

    // background color
    background(240, 196, 101);
    noStroke();

    // ears
    fill(skin1);
    ellipse(width / 2 - headWidth / 2, height / 4, headWidth / 8, headHeight / 6);
    ellipse(width / 2 + headWidth / 2, height / 4, headWidth / 8, headHeight / 6);

    // neck
    fill(skin1);
    rect(width / 2 - headWidth / 4, height / 4 + headHeight / 4, headWidth / 2, headHeight);

    // head and face
    fill(skin1);
    ellipse(width / 2, height / 4, headWidth, headHeight);

    // bucket hat
    fill(hatR, hatG, hatB);
    quad(width / 2 - headWidth / 2, hatBottom, width / 2 - headWidth / 3, height / 4 - headHeight / 2, 
    	width / 2 + headWidth / 3, height / 4 - headHeight / 2, width / 2 + headWidth / 2, hatBottom);
    rect(width / 2 - 2 * headWidth / 3, hatBottom, headWidth * 1.35, headWidth / 32);

    // eyeballs
    fill("white");
    ellipse(eyeL, height / 4 - height / 48, eyeWidth, eyeHeight);
    fill("white");
    ellipse(eyeR, height / 4 - height / 48, eyeWidth, eyeHeight);

    // pupils
    fill(59, 35, 18);
    ellipse(eyeL, height / 4 - height / 48, pupilWidth, pupilHeight);
    fill(59, 35, 18);
    ellipse(eyeR, height / 4 - height / 48, pupilWidth, pupilHeight);

    // nose
    fill("#D39972");
    arc(width / 2, height / 4 + headHeight / 8, noseWidth, noseHeight, PI, TWO_PI);

    // mouth
    fill(255, 150, 150);
    arc(width / 2, height / 3, mouthWidth, mouthHeight, mouthStart, mouthEnd, CHORD);

    // body and shirt
    fill(colorR, colorG, colorB);
    arc(width / 2, 5 * height / 6, bodyWidth, bodyHeight, PI, TWO_PI);

    // pants
    fill("#003366");
    rect(width / 2 - bodyWidth / 2, 5 * height / 6, bodyWidth, height / 6);

    // thigh gap
    fill(240, 196, 101);
    rect(width / 2 - bodyWidth / 8, 15 * height / 16, bodyWidth / 4, bodyWidth / 4)
}

function mousePressed() {

    // brackets to denote an array. The coinFlip variable helps determine whether it's a smile or frown.
    var coinFlip = random([0, 1]);

    // randomly generating head proportions including eyes, face size, pupil, nose, and mouth.
    headWidth = random(100, 200);
    headHeight = random(121, 180);
    eyeWidth = random(15, 40);
    eyeHeight = random(10, 20);
    eyeL = width / 2 - headWidth / 5;
    eyeR = width / 2 + headWidth / 5;
    pupilSize = 9 * eyeWidth / 16;
    noseWidth = random(10, 30);
    noseHeight = random(20, 50);
    mouthWidth = random(20, 60);
    mouthHeight = random(20, 60);

    // randomly generating body size and color.
    bodyWidth = random(170, 350);
    colorR = random(0, 255);
    colorG = random(0, 255);
    colorB = random(0, 255);

    // randomly generating hat color.
    hatR = random(0, 255);
    hatB = random(0, 255);
    hatG = random(0, 255);

    // this is an array of different hex values for skin tones.
    // the program randomly selects a skin tone every time the mouse is pressed.
    skin1 = random(["#FFD3A1", "#F5CB9A", "#C39582", "#FFCEB4", "#A57E6E", "#EABD9D", "#FFCEB4", "#DEAB7F", "#FFDCB1"]);
    
    // this if statement helps determine whether the character is smiling or frowning using the coinFlip variable defined above. 
    if (coinFlip == 0) {
        mouthStart = 6.28;
        mouthEnd = 3.14;
        // Smiley mouth
    } else {
    	mouthStart = 3.14;
    	mouthEnd = 6.28;
    	// Frowny mouth
    }

    // condition to ensure that the Smiley mouth never sticks out past the chin
    // note: this was originally an if-and statement, but the ampersand was causing issues with WordPress embedding.
    if (mouthStart == 6.28) {
        if ((height / 3 + mouthHeight) > (height / 4 + headHeight / 2)) {
            mouthHeight = mouthHeight / 2;
        }
    }

    // condition to ensure Frowny mouth never touches the nose
    if (mouthStart == 3.14) {
        if ((height / 3 - mouthHeight) < (height / 4 + headHeight / 8 + noseHeight)) {
            mouthHeight = mouthHeight / 2;
        }
    }

}

This project was a fun challenge for me because it required a heavy amount of step-by-step variable referencing, but it also encouraged me to think very logically. Every time I set up coordinates, I actively made sure to question if I could use a variable to simplify my code, and this made it significantly easier to randomize the face (as well as other features) later because all of my variables were already consolidated.

I enjoyed getting to play with an abstract art style, and I made my characters reflect that; they each have simplified features, but my program incorporates a wide array of body types and shapes. I’ve come away from this project with a much stronger understanding of how to utilize local and global variables, as well as how to use if-else statements to set up different conditions to ensure my faces didn’t distort in odd ways.

Yoshi Torralva-Project-02-Variable-Face

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project 02 Variable Face
    var eyeSize = 100;
    var eyemvmnt = 50;
    var faceWidth = 400;
    var faceHeight = 600;
    var hatbottom = 320;
    var hatbottomvmt = 320;
    var Qhat = 160;
    var Qhatx1y1x2y2 = 160;
    var windw = 400;
    var windh = 80;
     
    function setup() {
        createCanvas(640, 480);
    }
    function draw() {
        background(232, 253, 255);
        //wind movements 
        fill(181, 246, 255);
        noStroke();
        rect(windh, windw/4, windw, windh);
        rect(windh * 2, windw/2, windw *2, windh/2);
        rect(windh - windh, windw, windw, windh);
        rect(windh * 5, windw/3.5, windw * 3, windh/2.5);
        //face
        fill(255, 199, 15);
        ellipse(faceWidth * 0.8, faceHeight, faceWidth,  faceHeight);
        //two parts of the hat. The base and top.
        fill(5, 59, 66);
        rect(hatbottom/2, hatbottom/1.1, hatbottomvmt, hatbottom/4);
        quad(Qhatx1y1x2y2, Qhatx1y1x2y2/4, Qhatx1y1x2y2 * 3, Qhatx1y1x2y2/4, Qhat * 2.6, Qhat * 2, Qhat * 1.3, Qhat * 2);
        //variables for eyes
        var eyeL = width / 2 - faceWidth * 0.20;
        var eyeR = width / 2 + faceWidth * 0.20;
        //eye
        fill(255);
        ellipse(eyeL, eyeSize * 4.5, eyeSize, eyeSize);
        fill(255);
        ellipse(eyeR, eyeSize * 4.5, eyeSize, eyeSize);
       //pupil
        fill(0);
        ellipse(eyeL, eyeSize * 4.6, eyemvmnt,eyemvmnt);
        ellipse(eyeR, eyeSize * 4.6, eyemvmnt,eyemvmnt);
    }
     
    function mousePressed() {
        faceWidth = random(370, 450);
        //only used to animate the width of the hat for perspective 
        //only changes the first two quadrants of the top hat to keep the parts connected
        Qhatx1y1x2y2 = random(200,330);
        eyemvmnt = random(40,60);
        hatbottomvmt = random(350,400);
        windh = random(20,100);
        windw = random(200, 1000);
    }

With this project, I focused on using random() to create movement and slight perspective shifts within the piece. With the face, only certain variables were animated to create a similar perspective shift to the hat. Rectangles in the background add depth and additional visual cues of wind as the hat jolts to the right side of the screen.

Stefanie Suk – Project-02 – Variable Faces

For this project, I tried to create as many aspects of variability as possible, including size, color, and position.  I also used variables that are necessary to create and change the face every time I click onto the screen. 

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 02

var faceW = 323;
var faceH = 257;
var noseW = 62;
var noseH = 39;
var nostrilW = 9;
var nostrilH = 16;
var backgroundR = 189;
var backgroundG = 140;
var backgroundB = 191;
var facecolorR = 250;
var facecolorG = 201;
var facecolorB = 222;
var ribboncolorR = 221;
var ribboncolorG = 66;
var ribboncolorB = 134;
var nosecolorR = 239;
var nosecolorG = 128;
var nosecolorB = 177;
var eyecolor = 46;
var eyesizeW = 22
var eyesizeH = 22
var mouthline = 292

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

function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    ellipse(319.5, 232.5, faceW, faceH);
    //face
    noStroke();
    fill(eyecolor)
    ellipse(259, 233, eyesizeW, eyesizeH);
    //lefteye
    noStroke();
    fill(eyecolor);
    ellipse(379, 233, eyesizeW, eyesizeH);
    //righteye
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(175.5, 176.1, 191.5, 102.9, 263.7, 118.9);
    //leftear
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(466.5, 191, 466.5, 118, 393, 118);
    //rightear
    noStroke();
    fill(nosecolorR, nosecolorG, nosecolorB);
    ellipse(320, 259.5, noseW, noseH);
    //nose
    noStroke();
    fill(0);
    ellipse(305.5, 259, nostrilW, nostrilH);
    //leftnostril
    noStroke();
    fill(0);
    ellipse(333.5, 259, nostrilW, nostrilH);
    //rightnostril
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(275, 185, 275, 125, 320, 155);
    //ribbonleft
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(320, 155, 365, 185, 365, 125);
    //ribbonright
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    ellipse(320, 155.5, 19, 19);
    //ribboncenter
    stroke(0);
    strokeWeight(10);
    line(304, mouthline, 320, 309);
    stroke(0);
    line(336, mouthline, 320, 309);
    //mouth
}

function mousePressed() {
    mouthline = random(292, 323);
    eyesizeW = random(22, 60);
    eyesizeH = random(22, 44);
    backgroundR = random(131, 242);
    backgroundG = random(140, 174);
    backgroundB = random(133, 202);
    facecolorR = random(201, 250);
    facecolorG = random(201, 219);
    facecolorB = random(201, 250);
    nosecolorR = random(76, 239);
    nosecolorG = random(114, 143);
    nosecolorB = random(87, 253);
}

Ellan Suder – Project 02 – Variable Face


variable face

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-02
*/

var left = 165;
var right = left + 200;
var upDown;
var randomColor;
var randomAlpha = 100;
var randomSize = 50;


function setup() {
    createCanvas(600, 450);
    background(200,300,40);
    
    randomColor = color(0,0,0);

    noStroke();
    fill(0,140,230);
    ellipse(200,450,300,300);
    fill(255); //face
    ellipse(200,200,300,390);
    ellipse(350, 150, 80, 80);
    fill(0,20,30) //dot eyes
    ellipse(150,150,40,40);
    ellipse(350,150,40,40);
  
    fill(0,20,30); //hat
    noStroke();
    beginShape();
    curveVertex(70, 90);
    curveVertex(70, 90);
    curveVertex(58, -20);
    curveVertex(321, -20);
    curveVertex(332, 90);
    curveVertex(332, 90);
    endShape();
  
    strokeWeight(6); // lines
    stroke(0,20,30)
    noFill();
    arc(150, 150, 80, 80, 3* QUARTER_PI, TWO_PI); //left eye
    arc(350, 150, 80, 80, PI, TWO_PI + HALF_PI); //right eye
    arc(250, 220, 80, 30, 3 * HALF_PI, QUARTER_PI); //nose
    arc(250, 280, 60, 60, 0 , PI); //mouth
    strokeWeight(7);
    stroke(0,140,230);
    rect(80, 100, 140, 120, 20); // left glasses lens
    rect(300, 100, 140, 120, 20); // right glasses lens
    
    textSize(10);
    noStroke();
    fill(0);
    text("click to randomize!", 460, 90);
}
 
function mousePressed() {
    noStroke(); //two circles change color every mousepress
    randomColor = color(random(230),random(230),random(230));
    fill(randomColor);
    ellipse(150,220,40,40);
    ellipse(350,220,40,40);

    var a = 110; //clover
    var b = 45;
    var r = 10;
    var w = 50;
    ellipse(a,b,r+10,w+10);
    bezier(a,b, //top
         a-r+w,b-r+w,
         a+r+w,b-r-w,
         a,b);
    bezier(a,b, //top (left)
         a-r-w,b-r-w,
         a+r-w,b-r+w,
         a,b);
    bezier(a,b, //right (top)
         a+r-w,b+r-w,
         a+r+w,b-r-w,
         a,b);
    bezier(a,b, //right (bottom)
         a+r+w,b+r+w,
         a+r-w,b-r+w,
         a,b);
    bezier(a,b, //left
         a-r+w,b-r+w,
         a-r-w,b+r+w,
         a,b);
    bezier(a,b, //left (top)
         a-r-w,b-r-w,
         a-r+w,b+r-w,
         a,b);
    bezier(a,b, //bottom (left)
         a+r-w,b+r-w,
         a-r-w,b+r+w,
         a,b);
    bezier(a,b, //bottom
         a+r+w,b+r+w,
         a-r+w,b+r-w,
         a,b);
  
    fill(255) //redraw sclera
    ellipse(150,150,75,75);
    ellipse(350,150,75,75);
    left = random(137, 158);
    right = left + 200
    randomSize = random(10,45);
    randomAlpha = random(60,100);
    randomColor.setAlpha(randomAlpha);
    fill(randomColor);
    upDown = random(137,163);
    ellipse(left, upDown, randomSize, randomSize); //eyes
    ellipse(right, upDown, randomSize, randomSize);
    
    fill(255) //redraw nose area
    rect(250,200,45,40);
    stroke(0);
    noFill();
    arc(250, 220, randomSize + 20, 30, 3 * HALF_PI, QUARTER_PI); //nose  
  
    noStroke();
    fill(255)
    ellipse(250,300,85,85);
    fill(0);
    var oscsize; //mouth
    ellipse(250,300,80,60 - sin(millis()/100) * 20);
  
    let letters = ['A', 'B', 'C', 'D', 'E', 'F', 
'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let letter = random(letters); // select random letter
    fill(200,300,40) //redraw background 
    rect(450,30,100,100)
    fill(0);
    textSize(62);
    text(letter, 470, 90);
}

Danny Cho_Project 2_Variable-Face

This is variation of the first portrait project. The cheek of Bao expands, and the blushes move as well. Also, the saturation of the background and the vertical size of the mouth are randomized, too.

variableface

var cheek = 200; //extension of cheek
var blushLoc = 200; //position of blush
var mouth = 210; //vertical size of mouth
var bgTint = 67; //saturation of background
var blushSat = 87.6; //saturation of blush

let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;



function setup() {
  createCanvas(400, 400);
  noStroke();
  colorMode(HSL);
  let c = color(355, 67, 67);
  let value = saturation(c);
  fill(c);
  rect(0,0, 400, 400);

}

function draw(){
    colorMode(HSL);
    strokeWeight(0)
    let c = color(355, bgTint, 67);
    let value = saturation(c);
    fill(c);
    rect(0,0, 400, 400);

    fill(212, 57.6, 80.6)
    strokeWeight(0)
    ellipse(200, 410, 460, 300)
    //body
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    beginShape();
    curveVertex(200, 200);  //top
    curveVertex(200, 200);
    curveVertex(175, 230);
    curveVertex(150, 270);  //left handle
    curveVertex(125, 280);
    curveVertex(120, 285);
    curveVertex(135, 300);
    curveVertex(160, 288);
    curveVertex(200, 290);  //lowest point
    curveVertex(240, 288);
    curveVertex(265, 300);
    curveVertex(280, 285);
    curveVertex(275, 280);
    curveVertex(250, 270);  //right handle
    curveVertex(225, 230);
    curveVertex(200, 200);
    curveVertex(200, 200);
    endShape();
    //face
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    beginShape();
    curveVertex(200, 100);
    curveVertex(200, 100);
    curveVertex(180, 135);
    curveVertex(325 - cheek, cheek - 30); //325 - cheek, cheek - 30
    curveVertex(120, cheek); //cheek
    curveVertex(200, 220+(cheek*(1/15))); //low tip
    curveVertex(280, cheek); //cheek
    curveVertex(75 + cheek, cheek - 30); //75 + cheek, cheek - 30
    curveVertex(220, 135);
    curveVertex(200, 100);
    curveVertex(200, 100);
    endShape();
    //left eye
    fill(0,0,15.7);
    circle(170, 175, 20)
    //left eye shine
    fill(47, 89.7, 73.3);
    strokeWeight(0);
    beginShape();
    curveVertex(180,175); //right point
    curveVertex(180,175);
    curveVertex(173,178);
    curveVertex(170,185); // lowest point
    curveVertex(167,178);
    curveVertex(160,175);
    curveVertex(167,172);
    curveVertex(170,165);
    curveVertex(173,172);
    curveVertex(180, 175);
    curveVertex(180, 175); //top point
    endShape();
    //right eye
    fill(0,0,15.7)
    circle(230, 175, 20) //
    //right eye shine
    fill(47, 89.7, 73.3);
    strokeWeight(0);
    beginShape();
    curveVertex(240,175); //right point
    curveVertex(240,175);
    curveVertex(233,178);
    curveVertex(230,185); // lowest point
    curveVertex(227,178);
    curveVertex(220,175);
    curveVertex(227,172);
    curveVertex(230,165);
    curveVertex(233,172);
    curveVertex(240, 175);
    curveVertex(240, 175); //top point
    endShape();
    //mouth
    fill(30)
    strokeWeight(1);
    stroke(30);
    beginShape();
    curveVertex(192.5, 200);
    curveVertex(192.5, 200);
    curveVertex(196.5, mouth);
    curveVertex(200, mouth+4);
    curveVertex(203.5, mouth);
    curveVertex(207.5, 200);
    curveVertex(207.5, 200);
    endShape();


    fill(17, 56.2, 93.7);
    strokeWeight(1);
    stroke(30);
    circle(192.5, 200, 15);
    fill(17, 56.2, 93.7);
    strokeWeight(1);
    stroke(30);
    circle(207.5, 200, 15);
    //coverup
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    rect(170, 190, 60, 10);

    //blush
    fill(355, blushSat, 74.7);
    strokeWeight(0);
    circle(340-blushLoc, blushLoc-10, 24); //340-cheek, cheek-10
    fill(355, blushSat, 74.7);
    strokeWeight(0);
    circle(blushLoc+60, blushLoc-10, 24);//cheek+60, cheek-10

    //left arm
    fill(17, 56.2, 93.7);
    stroke(30)
    strokeWeight(1);
    beginShape();
    curveVertex(value1x, value1y);
    curveVertex(value1x, value1y);
    curveVertex(value2x, value2y);
    curveVertex(value3x, value3y);
    curveVertex(value3x, value3y);
    endShape();
    //right arm 
    fill(17, 56.2, 93.7);
    stroke(30)
    strokeWeight(1);
    beginShape();
    curveVertex(207, 250);
    curveVertex(207, 250);
    curveVertex(210, 265);
    curveVertex(213, 250);
    curveVertex(213, 250);
    endShape();
}

function mousePressed() {
    bgTint = random(0, 100);
    cheek = random(200, 250);
    blushLoc = 200 + (cheek - 200)*(3/5);
    mouth = random(210, 230)
    blushSat ++;
  if (value2y === 265) {
    value2y = 230;
  } else {
    value2y = 265;
  }

}

lee chu – project 02 – variable face

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 02

var eyeSize = 20;
var eyeColor = 24;
var mouthWidth = 20;
var faceR = 60;
var faceH = 120;
var hairH = 20;
var R = 229;
var browL = 12;
var browT = 0;

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

function draw() {
    background(color(R, 208, 227));
    fill(color(231, 229, 229));

    // head
    strokeWeight(0.7);
    beginShape();
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - faceR, height/2);
    curveVertex(width/2 - 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 - 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 + faceR, height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    endShape();

    // cheeks
    beginShape();
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 + faceR, 1.2 * height/2);
    curveVertex(width/2 + 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 + 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 - faceR, 1.2 * height/2);
    curveVertex(width/2 - 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    endShape();

    // eyes
    var eyeRX = width/2 + faceR * 0.5;
    var eyeLX = width/2 - faceR * 0.5;
    var eyeRH = height/2 + 0.05 * faceH;
    var eyeLH = height/2;
    strokeWeight(0);
    fill('black');
    ellipse(eyeRX, eyeRH, eyeSize, 0.9 * eyeSize);
    ellipse(eyeLX, eyeLH, eyeSize, 0.9 * eyeSize);
    fill(color(184, 24, eyeColor));
    ellipse(eyeRX, eyeRH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    ellipse(eyeLX, eyeLH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    fill('white');
    ellipse(eyeRX + 0.25 * eyeSize, eyeRH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);
    ellipse(eyeLX + 0.25 * eyeSize, eyeLH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);

    // eyebrows
    strokeWeight(0.7);
    beginShape();
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX, eyeRH - 0.85 * eyeSize);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    endShape();
    beginShape();
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX, eyeLH - 0.85 * eyeSize);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    endShape();

    // mouth
    strokeWeight(0);
    fill('gray');
    beginShape();
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    endShape();

    // hair
    strokeWeight(0.5);
    noFill();
    beginShape();
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2 - 0.1 * faceH, height/2 - 0.5 * faceH - 0.85 * hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    endShape();

}

function mousePressed() {
    R = random(180, 255);
    faceR = random(30, 85);
    faceH = random(80, 170);
    eyeSize = random(8, 30);
    eyeColor = random(0, 255);
    mouthWidth = random(10, 40);
    hairH = random(10, 90);
    browT = random(-3, 3);
    browL = random(5, 14);
}

I experimented with curveVertex() to create a blob-like face with variable pupils, mouth, eyebrows, and hair.

Fanjie Jin – project 02 – variable face

sketch

// Fanjie Mike Jin
//Section
//fjin@andrew.cmu.edu
//Project-02 (Variable Faces)

var eyeSize = 25;
var skin = 76;
var faceWidth = 230;
var faceHeight = 200;
var colorPink = 230;
var eyeW = 20;
var eyeH = 50;
var eyeballX = 360;
var eyeballX2 = 183;
var mouseW = 70;
var mouseH = 80;

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

function draw(){
    background(57,skin, 117);

//footleft
    noStroke();
    fill(163, 65, 67);
    ellipse(350 - 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//footright
    noStroke();
    fill(163, 65, 67)
    ellipse(290 + 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//body
    noStroke();
    fill(255, colorPink, 219);
    ellipse(320, 240,faceWidth, faceHeight);

//handleft
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 - 0.5 * faceWidth, 310 - 0.5 * faceHeight, 70, 50);

//handright
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 + 0.5 * faceWidth, 295 - 0.5 * faceHeight, 70, 50);

//cheekLeft
    noStroke();
    fill (255, 191, 205);
    ellipse(256, 245, 46, 20);

//cheekRight
    noStroke();
    fill (255, 191, 205);
    ellipse(386, 245, 46, 20);

//eyesleft
    noStroke();
    fill (0);
    ellipse(288, 194, eyeW, eyeH);

//eyesright
    noStroke();
    fill (0);
    ellipse(360, 194, eyeW, eyeH);

//eyeballleft
    noStroke();
    fill (255);
    ellipse(eyeballX, 183, 9, 20);

//eyeballright
    noStroke();
    fill (255);
    ellipse(eyeballX - 72, 183, 9, 20);

//mouse
    noStroke();
    fill (255, 120, 192);
    ellipse(320, 279, mouseW, mouseH);
}

function mousePressed(){
    colorPink = random(204, 150);
    faceWidth = random(230, 260);
    faceHeight = random(200, 230);
    eyeW = random(20, 30);
    eyeballX = random(355, 365);
    mouseW = random(70, 80);
    mouseH = random(80, 90);
    skin = random(50, 80);
    }

I decided to make a variable face of Kirby which is my favorite hero in super smash bros. The variable components for this project are the size of Kirby’s face, eyeball positions, eye sizes and the color of Kirby as well as the background.