Category: Project-02-Variable-Face

Project 2: Variable Face

Karan – Variable Face

var faceWidth = 100
var faceLength = 100
//hat, bow and sun glass colours colours R, G, B
var hbtR = 200
var hbtG = 150
var hbtB = 155

//skin colour variables 
skinColour = 1

//sunglass shape and width
var sgWidth = 20
var sgHeight = 20

// hat size variables
var hatWidth = 200
var hatHeight = 100
var topWidth = 150

// mouth variables
mouth = 1



function setup() {
    createCanvas(300, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220)
    //skin colour
    if (skinColour==1){
        fill(117,64,27)
    } else if (skinColour==2){
        fill(207,152,84)
    } else if (skinColour==3){
        fill(244,203,151)
    }

     //face
    noStroke()
    ellipse(width/2,height/2, faceWidth, faceLength);

    //sunglasses
    fill(hbtR, hbtG, hbtB);
    ellipse(width/2-1/5*faceWidth, height/2-1/8*faceLength,sgWidth,sgHeight);
    ellipse(width/2+1/5*faceWidth, height/2-1/8*faceLength,sgWidth,sgHeight);
    stroke(hbtR, hbtG, hbtB)
    line(width/2-1/5*faceWidth,height/2-1/8*faceLength,width/2+1/5*faceWidth,height/2-1/8*faceLength);

    //bow
    triangle(width/2,height/2+1/2*faceLength,width/2-15,(height/2+1/2*faceLength)-5,width/2-15,(height/2+1/2*faceLength)+5);
    triangle(width/2,height/2+1/2*faceLength,width/2+15,(height/2+1/2*faceLength)-5,width/2+15,(height/2+1/2*faceLength)+5);

    //nose
    fill(0);
    
    triangle(width/2,height/2,width/2+5,height/2+10,width/2-5,height/2+10);

    //hat
    fill(hbtR,hbtG,hbtB);
    line(width/2-60,height/2-1/3*faceLength,width/2+60,height/2-1/3*faceLength);
    quad(width/2-30,height/2-1/3*faceLength,width/2+30,height/2-1/3*faceLength,width/2+23,height/2-faceLength,width/2-23,height/2-faceLength)
}

function mousePressed() {
    skinColour = int(random(1,4));
    faceWidth = random (75,150);
    faceLength = random(75,150);
    hbtR = random(0,255);
    hbtG = random(0,255);
    hbtB = random(0,255);
}

This is what I imagine my fashion sense in terms of colour coding would be: Same coloured hat, sunglasses and bow-tie. It was interesting to understand the relationship in between variables.

Project 2: Generating Faces by Mouse Clicking

My attempt at making an interactive variable face generator:

gnmarino-project 2

//variables to use to randomize
var head = 0
var hair = 0
var ear = 0
var nose = 0
var mouth = 0
//hair color
var color1 = 0
var color2 = 0
var color3 = 0
//variables to use to structure everything
var faceDetail = 2
var faceWidth = 300
var faceHeight = 450
//made my own grid system
var cellHeight = 80
var cellWidth = 80

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

 function draw() {
    background(255);
    noStroke();
    //base skin color
    fill(249, 224, 195);
//(the ears)there are four different ear types. 
//each are associated a specific number that is randomly choosen in mouse pressed functionj
//used if statement so that when mouse is pressed it only picks one option (because only one option is true)
    if (ear == 1) {
        ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, cellHeight);
        ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, cellHeight);
    } else if (ear == 2) {
        ellipse( 1.25 * cellWidth, 3.5 * cellHeight, cellWidth, 2 * cellHeight);
        ellipse( 4.75 * cellWidth, 3.5 * cellHeight, cellWidth, 2 * cellHeight);
    } else if (ear == 3) {
        ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, 1.5 * cellHeight);
        ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 2 * cellWidth, 1.5 *cellHeight);
    } else {
        ellipse( 1.5 * cellWidth, 3.5 * cellHeight, 1.25 * cellWidth, cellHeight);
        ellipse( 4.5 * cellWidth, 3.5 * cellHeight, 1.25 * cellWidth, cellHeight);
    } 
    
// (the hair) works the same as ears. has 4 different types of hair
    if (hair == 1) { //mohawk
        //fill color is completely randomized with variables in mouse pressed so that R, B, G is a completely random number everytime
        //so it can make any color in the RBG system to colorize hair
        fill(color1, color2, color3);
        rect(2.5 * cellWidth, .6 * cellHeight, cellWidth, cellHeight);
    } else if (hair == 2) { //afro
        fill(color1, color2, color3);
        ellipse(3 * cellWidth, 2 * cellHeight, 4.5 * cellWidth, 2.75 * cellHeight);
    } else if (hair == 3) { //long hair
        fill(color1, color2, color3);
        ellipse(3 * cellWidth, 2 * cellHeight, 4.75 * cellWidth, 2.5 * cellHeight);
        rect(.625 * cellWidth, 2 * cellHeight, 4.75 * cellWidth, 4.25 * cellHeight);
    } else { //bald
        //to show baldness I put a point that is hidden behind head
        point(width/2, height/2);
    }

    fill(249, 224, 195); //skin color
//heads
//same if statment system as before, 3 head types
    if (head == 1) {
        quad(cellWidth, 1.5 * cellHeight, 5 * cellWidth, 1.5 * cellHeight, 4.5 * cellWidth, 6.5 * cellHeight, 1.5 * cellWidth, 6.5 * cellHeight);
    } else if (head == 2) {
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else {
    quad( 1.25 * cellWidth, 3 * cellHeight, 4.75 * cellWidth, 3 * cellHeight, 4 * cellWidth, 6.5 * cellHeight, 2 * cellWidth,6.5 * cellHeight);
    circle(width/2, 3 * cellHeight, faceWidth);
    }
// eyes, 1 type
    fill(50);
    ellipse(2.5 * cellWidth, 3 * cellHeight, .25 * cellWidth, .5 * cellHeight);
    ellipse(3.5 * cellWidth, 3 * cellHeight, .25 * cellWidth, .5 * cellHeight);

    noFill();
    strokeWeight(2);
    stroke(50)
//nose, 4 nose types
    if (nose == 1) { //button nose
        ellipse(width/2, height/2, .75 * cellWidth, .5 * cellHeight);
    } else if (nose == 2) { // big nose
        arc(width/2, height/2, cellWidth, .75 * cellHeight, PI + HALF_PI, TWO_PI + HALF_PI);
    } else if (nose == 3) { //downwards nose
        arc(width/2, height/2, .5 * cellWidth, .75 * cellHeight, 0, PI);
    } else { //skinny nose
        arc(width/2, height/2, cellWidth, .25 * cellHeight, PI + HALF_PI, TWO_PI + HALF_PI);
    }

//mouth, 4 types
    if (mouth == 1) { //expressionless mouth
        strokeWeight(5);
        line(2.5 * cellWidth, 5 * cellHeight, 3.5 * cellWidth, 5 * cellHeight);
    } else if (mouth == 2) {//open mouth
        fill(50);
        arc(3 * cellWidth, 5 * cellHeight, 1.25 * cellWidth, cellHeight, 0, PI, CHORD);
    } else if (mouth == 3) { //smirk
        noFill();
        strokeWeight(5);
        beginShape();
        curveVertex(3 * cellWidth, 5.25 * cellHeight);
        curveVertex(3 * cellWidth, 5.25 * cellHeight);
        curveVertex(3.3 * cellWidth, 5.20 * cellHeight);
        curveVertex(3.5 * cellWidth, 5 * cellHeight);
        curveVertex(3.5 * cellWidth, 5 * cellHeight);
        endShape();
    } else { //sad mouth
        strokeWeight(5);
        arc(3 * cellWidth, 5 * cellHeight, .75 * cellWidth, .5 * cellHeight, PI, TWO_PI);
    }
//beauty marks, 2 types
    if (faceDetail == 1) { //leftside
        strokeWeight(8);
        point(2.25 * cellWidth, 5 * cellHeight);
    } else if (faceDetail == 2) {//right side
        strokeWeight(8);
        point(4.25 * cellWidth, 4 * cellHeight);
    }
}
function mousePressed() {
//baracks to make random only do integars
    head = random([1, 2, 3]);
    ear = random([1, 2, 3, 4]);
    nose = random([1, 2, 3, 4]);
    mouth = random([1, 2, 3, 4]);
    hair = random([1, 2, 3, 4]);
//hair color randomizer
    color1 = random(0, 255);
    color2 = random(0, 255);
    color3 = random(0, 255);
//added extra integars to make beauty marks less frequent and only happen 1/4 of the time
    faceDetail = random([1, 2, 3, 4, 5, 6, 7, 8]);
}

Doing this project taught me a lot about the process of coding and fixing your code when it is wrong.

My Characters I created as inspiration

I first started off with a grandiose plan to make these 4 faces and then mix and match each part of each face so it muddles all the faces randomly. However, it was a lofty goal for the time I had.

My process of figuring out my grid system

This led me to settling but still constructing my code in a fully self-made variable grid structure, if statements, and using random() to choose between the the variants I created for each facial feature.

Additionally, I randomized the faces even more by making hair colors able to be whatever shade in RBG it desires.

Overall, I learned a lot of the simple powers of the random() function and I wish I could’ve added on more to this project.

Project 02: Variable Faces

jen project 02 sketch copy

//Jennifer Kim
//Class section: C

var eyeSize = 40;
var Type = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var faceWidth = 275;
var pupilWidth = 40;
var pupilHeight = 30;
var faceHeight = 250;
var faceColorA = 0;
var faceColorB = 255;
var faceColor = 2;
var hairclipStyle = 0;

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(229,204,255);
    
    //hair
    fill(51,25,0);
    arc(240, 340, 300, 380, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);

    
    //face
    if (faceColor>1) {
       fill(255,229,204);
   } else if (faceColor<=1) {
       fill(241,200,124);
   }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes 
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //pupils
    fill(153,76,0);
    ellipse(width/2-50,height/2,pupilWidth-15,pupilHeight-15);
    ellipse(width/2+50,height/2,pupilWidth-15,pupilHeight-15);
    
    //circle nose
    fill(241,194,125);
    ellipse(width/2,height/2+30,15,15);

    //straight mouth
    if (Type <= 1.25){ 
    fill(255,213,255);
    rect(width/2-25, height/2+60,50,5);
    
    //triangle nose
    } else if (Type <= 2.5){ 
    fill(241,194,125); 
    triangle(width/2 - 15, height/2 + 40, width/2 + 15, height/2 + 40, width/2, height/2);
    }
    
    //hair accessories
    if (hairclipStyle <= 0.8){ 
        fill(76,0,153);
        circle(width/3, height/3, 60); 
        circle(width - (width/3), height/3, 60);
        
    } else { //attempt at using curve vertex
        fill(76,0,153);
        beginShape(); 
        curveVertex(310, 280);
        curveVertex(350, 300);
        curveVertex(390, 250);
        curveVertex(290, 210);
        curveVertex(270, 310);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(220, 230);
    faceHeight = random(240, 250);
    eyeSize = random(30, 40);
    Type = random(0,3);
    pupilWidth=random(30,35);
    pupilHeight=random(30,35);
    faceColorA = random(30, 150);
    faceColorB = random(70,200);
    hairclipStyle = random(0, 3);
}

Figuring out how to shape and position with the curveVertex() was tricky, but I was eventually able to create what I was going for. It was also interesting to put my new knowledge from lecture about if/else statements to use.

Project 02: Variable Faces

variable faces 

var eyeSize = 100;   //Max Stockdale, section D
var faceWidth = 350;
var faceHeight = 250;
var mouth = 50;
var tooth=40;
var nose=60;
var eyeHighlight=20;
var body=400
var arms=100

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

 
function draw() {
    background(91,161,191);  //blue
    strokeWeight(0);
    fill(47,213,102);
    circle(width/2, height/1.2, body); //body shape
    fill(255,255,255);
    strokeWeight(0);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face
    var eyeLX = width / 2 - faceWidth * 0.5;
    var eyeRX = width / 2 + faceWidth * 0.5;
    strokeWeight(1);
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  //right eye
    fill(255,255,255);
    circle(eyeLX + 5, height / 2, eyeHighlight);  //eye highlight
    circle(eyeRX + 5, height / 2, eyeHighlight);  //eye highlight
    fill(48,56,65); 
    rect(width/2, height/2, mouth, mouth);  //mouth
    fill(255,255,255);
    triangle(320,240, 330,250, 340,240);  //tooth
    fill(72,3,31);
    ellipse(width/2, height/2.25, nose, 20); //noser
    strokeWeight(0);
    fill(153,155,250);
    circle(width/4.75, height/1.3, arms);  //left arm
    circle(width/1.25, height/1.3, arms);  //right arm
    fill(255,255,255);

    




}
 
function mousePressed() {
    faceWidth = random(50, 600);
    faceHeight = random(150, 300);
    eyeSize = random(20, 60);
    mouth = random(10, 40);
    ears = random(5,15);
    nose = random(15,45);
    body =random(400,500);
    arms = random(80,120);
}

Project 02: Variable Faces

John Henley; 15-104 section D

sketch

//John Henley; 15-104 section D

var headWidth = 150; //head variables
var headHeight = 160;
var headRound = 50;
var headColorRed = 141;
var headColorGreen = 227;
var headColorBlue = 204;

var hairHeight = 120 //hair variables
var hairColorRed = 12;
var hairColorGreen = 8;
var hairColorBlue = 10;

var eyeWidth = 20; //eye variables
var eyeGap = 25;
var eyeHeight = headHeight / 5;

var mouthWidth = 50; //mouth variables
var mouthHeight = 40;

var backgroundValue = 150; //canvas variables

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

function draw() { //draw initial face
    background(backgroundValue);
    rectMode(CENTER);
    noStroke();
    fill(hairColorRed, hairColorGreen, hairColorBlue);
    rect(width / 2, height / 2 - headHeight / 2, headWidth + 30, hairHeight, 20, 20, 10, 10); //hair
    fill(headColorRed, headColorGreen, headColorBlue);
    rect(width / 2, height / 2, headWidth, headHeight, headRound / 2, headRound / 2, headRound, headRound); //head
    fill(0);
    ellipse(width / 2 - eyeGap, height / 2 - eyeHeight, eyeWidth); //left eye
    ellipse(width / 2 + eyeGap, height / 2 - eyeHeight, eyeWidth); // right eye
    fill(255);
    ellipse(width / 2 - eyeGap, height / 2 - eyeHeight, eyeWidth / 1.5); //left highlight
    ellipse(width / 2 + eyeGap, height / 2 - eyeHeight, eyeWidth / 1.5); // right highlight
    stroke(0);
    strokeWeight(5);
    noFill();
    arc(width / 2, height / 2 + eyeGap - 20, mouthWidth, mouthHeight, TWO_PI, PI); //mouth

}

function mousePressed() {
    //randomly adjust variables
    headWidth = random(120, 200);
    headHeight = random(140, 230);
    
    headColorRed = random(128, 255);
    headColorGreen = random(128, 255);
    headColorBlue = random(128, 255);
    hairHeight = random(40, 160);
    hairColorRed = random(0, 127);
    hairColorGreen = random(0, 127);
    hairColorBlue = random(0, 127);

    eyeWidth = random(10, 35);
    eyeGap = random(18, 40);

    mouthWidth = random(40, 60);
    mouthHeight = random(20, 50);

    backgroundValue = random(10, 245);
}

Project-02: Variable Faces; Face Variables

connie-variablefaces

During this project, I decided to use the codes from my self-portrait and use that to create different variables of faces. I made each click to change the features of eyes, hair color, and face shape. I tried to make the mouse clicks change the mouth shape, but unfortunately, I couldn’t make it so.

Project-02: Variable-Face

My Project

//sets up ability to make different backgrounds;
var backgroundSelector = 1;
//global variables for background 1 (morning) and 2 (night);
var cloudX1 = 100;
var cloudX2 = 300;
var cloudX3 = 180;
var cloudX4 = 220;
//sets up global variables for backround 2 (night);
var saucerX = 60;
var saucerY = 100;
var dir = 1;
var dirSaucer = 1;
//global variables for background 3 (evening);
var background3r = 231;
var background3g = 148;
var background3b = 20;
var sunY = 80;
var moonY = 720;
//sets up ability to make different face shapes;
var face = 1;
//sets up global variables for face shapes;
var rectWidth = 150;
var rectHeight = 250;
var circleRad = 300;
var ellipseWidth = 260;
var ellipseHeight = 320;
//sets up ability to use different Skin Tones;
var skinPreset = 0;
//sets up global variables for skin color;
var skinR = 224;
var skinG = 172;
var skinB = 105;
//sets up variables for facial features;
//creates initial x-coordinates of eyes that;
//fits all initial face shapes;
var leftEye = 195;
var rightEye = 285;
//sets up ability to have different Eye Colors;
var eyeColorPreset = 1;
//sets up global variables for Eye Colors;
var eyeColorR = 99;
var eyeColorG = 78;
var eyeColorB = 52;
//sets up global variables for noses;
var noseX2 = 220;
var noseY1 = 240;
var noseY2 = 340;
//sets up smile size;
var smileW = 20;
var smileH = 30;


function setup() {
    //I went with the Portrait Dimensions;
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    
    //changes the background between morning (1), night(2), and sunset(3 or almost 3);
    //morning background;
    if (backgroundSelector <= 1){
        background(135, 206, 235);
        noStroke();
        //creates clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX2, 90, 60, 30);
        ellipse(cloudX2+30, 105, 80, 30);
        ellipse(cloudX2+17, 105, 30, 60);
        ellipse(cloudX2+42, 105, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        rect(cloudX4, 130, 60, 30);
        ellipse(cloudX4+30, 145, 80, 30);
        ellipse(cloudX4+17, 145, 30, 60);
        ellipse(cloudX4+42, 145, 30, 60);
        //causes the Clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX2 = cloudX2 - 1.5;
        if (cloudX2 < -width){
            cloudX2 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
        cloudX4 = cloudX4 - 1.2;
        if (cloudX4 < -width){
            cloudX4 = width;
        }
        //creates sun;
        fill(252, 290, 77);
        circle(80, 80, 80);
    }
    //night background;
    else if (backgroundSelector > 1 & backgroundSelector <= 2){
        background(76, 64, 142);
        noStroke();
        //creates moon
        fill(244, 246, 240);
        circle(400, 80, 80);
        //creates saucer;
        fill(180, 229, 175);
        rect(saucerX, saucerY, 70, 20);
        fill(180);
        rect(saucerX+15, saucerY-10, 40, 10);
        rect(saucerX+15, saucerY+10, 40, 10);
        fill(180, 20, 30);
        rect(saucerX+5, saucerY+5, 5, 5);
        fill(20, 30, 180);
        rect(saucerX+60, saucerY+5, 5, 5);
        fill(224, 55, 45);
        quad(saucerX, saucerY+20, saucerX+10, saucerY+30, saucerX+60, saucerY+30, saucerX+70, saucerY+20);
        //causes saucer to move;
        saucerX = saucerX + (dir*1.7);
        if (saucerX > width){
            dir = -dir;
        }
        if (saucerX < -width){
            dir = -dir;
        }
        //causes the Saucer to move up and down cartoonishly;
        saucerY = saucerY - (dirSaucer*0.5);
        if (saucerY < 80){
            dirSaucer = -dirSaucer;
        }
        else if (saucerY > 120){
            dirSaucer = -dirSaucer;
        }
        //adds clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        //causes clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
    }
    //evening background;
    else if (backgroundSelector > 2 & backgroundSelector < 3){
        background(background3r, background3g, background3b);
        noStroke();
        //changes background to night and causes sun to go down;
        if (background3r != 76){
            background3r = background3r-1;
        }
        if (background3g != 64){
            background3g = background3g-1;
        }
        if (background3b != 142){
            background3b = background3b+1;
        }
        fill(252, 290, 77);
        circle(80, sunY, 80);
        if (sunY != 720){
            sunY = sunY + 4;
        }
        fill(244, 246, 240);
        circle(400, moonY, 80);
        if (moonY != 80){
            moonY = moonY - 4;
        }
    }
    //creates different skinPresets;
    if (skinPreset <= 1){
        skinR = 224;
        skinG = 172;
        skinB = 105;
    }
    else if (skinPreset > 1 & skinPreset <= 2) {
        skinR = 198;
        skinG = 134;
        skinB = 66;
    }
    else if (skinPreset > 2 & skinPreset <= 3) {
        skinR = 141;
        skinG = 85;
        skinB = 36;
    }
    else if (skinPreset > 3 & skinPreset <= 4) {
        skinR = 255;
        skinG = 219;
        skinB = 172;
    }
    //creates different eye colors;
    if (eyeColorPreset <= 1){
        eyeColorR = 99;
        eyeColorG = 78;
        eyeColorB = 52;
    }
    else if (eyeColorPreset > 1 & eyeColorPreset <= 2){
        eyeColorR = 46;
        eyeColorG = 83;
        eyeColorB = 111;
    }
    else if (eyeColorPreset > 2 & eyeColorPreset <= 3){
        eyeColorR = 61;
        eyeColorG = 103;
        eyeColorB = 29;
    }
    else if (eyeColorPreset > 3 & eyeColorPreset <= 4){
        eyeColorR = 28;
        eyeColorG = 120;
        eyeColorB = 71;
    }
    else if (eyeColorPreset > 4){
        eyeColorR = 73;
        eyeColorG = 118;
        eyeColorB = 101;
    }
    //creates different faceShapes and by extension, the faces;
    //each faceShape will also have features that are specific to it;
    //rectangle faceShape;
    if (face <= 1){
        fill(skinR, skinG, skinB);
        stroke(40);
        rect( ((width/2) - (rectWidth/2)), ((height/2) - (rectHeight/2) + 30), rectWidth, rectHeight);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //circle faceShape;
    else if (face > 1 & face <= 2){
        fill(skinR, skinG, skinB);
        stroke(40);
        circle(240, 380, circleRad);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 280, 40);
        circle(rightEye, 280, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 280, 20);
        circle(rightEye, 280, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileW, smileH, HALF_PI, PI);
    }
    //ellipse faceShape;
    else if (face > 2 & face < 3){
        fill(skinR, skinG, skinB);
        stroke(40);
        ellipse(240, 380, ellipseWidth, ellipseHeight);
        //creates eyes
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //creates pictureframe-like border;
    fill(160, 82, 45);
    stroke(160, 82, 45);
    rect(0, 0, 480, 10);
    rect(0, 630, 480, 10);
    rect(0, 10, 10, 620);
    rect(470, 10, 10, 620);
}

function mousePressed(){
    //randomly determines background, faceShape, skinPresets, and eyeColors;
    //also randomly determines faceShapeSize, Nose Size (through Coordinates);
    backgroundSelector = random(3);
    face = random(3);
    skinPreset = random(4);
    eyeColorPreset = random(5);
    circleRad = random(300, 420);
    ellipseWidth = (260, 310);
    ellipseHeight = (320, 400);
    rectWidth = random(150, 230);
    rectHeight = random(250, 330);
    noseX2 = random(180,230);
    noseY1 = random(240, 300);
    noseY2 = random(320, 420);
    smileW = random(20, 80);
    smileH = random(30, 50);

    //resets background 3 (evening) to initial conditions;
    background3r = 231;
    background3g = 148;
    background3b = 20;
    sunY = 80;
    moonY = 720;
}

I created this with about 8 hours of work. I had a lot of fun. However, the WordPress Posting was terrible.

Project 02: Variable Faces

sketchDownload
var pot = 3;
var plant = 1;
var eyebrows = 3;
var eyes = 3;
var mouth = 3;

function setup() {
    createCanvas(400, 400);
}
 
function draw() {
    background(251, 166, 156);
    noStroke();
    fill(255,202,196);
    rect(0,300,400,100);
    if(plant<=1) { //spiky
        noStroke();
        fill(43, 92, 48);
        triangle(140,200,110,120,190,200); //1
        fill(50, 136, 58);
        triangle(155,200,120,70,200,200); //2
        fill(65, 167, 75 );
        triangle(200,200,290,70,260,200); //5
        fill(77, 144, 84 );
        triangle(190,200,220,35,250,200); //4
        fill(57, 116, 62);
        triangle(175,200,160,30,220,200); //3
    }
    else if(plant<=2) { //flower
        noFill();
        stroke(143, 167, 65);
        strokeWeight(6)
        bezier(155,110,185,130,210,200,188,200); //leftstem
        stroke(143, 167, 65);
        strokeWeight(6)
        bezier(250,53,180,130,200,200,200,200); //rightstem
        noStroke();
        fill(178, 123, 210); //lightpurple
        ellipse(140,95,20);
        fill(178,123,210);
        ellipse(155,100,20);
        fill(178,123,210);
        ellipse(150,115,20);
        fill(178,123,210);
        ellipse(135,110,20); //end of flower left
        fill(178, 123, 210);
        ellipse(245,45,20);
        fill(178,123,210);
        ellipse(260,50,20);
        fill(178,123,210);
        ellipse(255,65,20);
        fill(178,123,210);
        ellipse(240,60,20); //endof flower right
        noStroke();
        fill(223, 186, 244);
        ellipse(249,55,10) //topflowermiddle
        fill(223, 186, 244);
        ellipse(145,105,10); //bottomflowermiddle
        noStroke();
        fill(143,167,65);
        arc(197,150, 80, 80, 0, PI/2, OPEN); //rightleafright
        fill(143,167,65);
        arc(237,190, 80, 80, PI,-PI/2, OPEN); //rightleafleft
        noStroke();
        fill(143,167,65);
        arc(154,190, 80, 80, -PI/2, 0,OPEN); //leftleafright
        fill(143,167,65);
        arc(194,150, 80, 80, PI/2, PI, OPEN); //leftleafleft
    }
    else if(plant<=3) { //cactus
        noStroke();
        fill(34, 72, 13);
        ellipse(200,85,90);
        noStroke();
        fill(34, 72, 13);
        rect(155,85,90,110);
        noFill();
        strokeWeight(30);
        stroke(34,72,14);
        bezier(130,80,130,100,120,120,160,120); //rightarm
        noFill();
        strokeWeight(30);
        stroke(34,72,14);
        bezier(275,100,275,120,280,150,240,145); //leftarm
    }


    if(pot<=1) {
        noStroke();
        fill(209,164,96);
        quad(100,200,300,200,250,360,150,360); //pot1
        fill(194, 140, 55);
        rect(90,190,220,35); //pottop1
        fill(160, 118, 53 );
        triangle(144,340,148,352,155,321); //crack
        triangle(153,329,155,321,142,310);
        triangle(141,310,144,313,143,292);
    }
    else if(pot<=2) {
        noStroke();
        fill(178, 123, 210);
        ellipse(200,280,180);
        fill(152, 104, 180);
        rect(105,190,190,35); //pottop1
        fill(132, 83, 161);
        triangle(220,368,233,364,240,330);
        triangle(240,330,237,340,270,317);
        triangle(270,317,263,320,275,300);
    }
    else if(pot<=3) {
        noStroke();
        fill(104, 180, 153);
        ellipse(200,270,180,180);
        fill(104, 180, 153);
        quad(110,180,290,180,230,350,170,350);
        fill(73, 146, 120);
        triangle(260,180,270,180,245,215);
        triangle(245,215,250,204,269,238);
        triangle(269,238,265,232,260,267);
    }

    if(eyes<=1) { //opencircleeyes
        fill(65, 49, 21);
        ellipse(175,280,5,8);
        ellipse(225,280,5,8); //righteye
    }
    else if(eyes<=2) { //closed
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(220,280,220,290,235,290,235,280);
        stroke(65, 49, 21);
        bezier(180,280,180,290,165,290,165,280);
    }
    else if(eyes<=3) { //squint
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        line(180,280,168,275)
        line(180,280,168,285)
        line(220,280,232,275)
        line(220,280,232,285);
    }

    if(mouth<=1) { //openmouth
        noStroke();
        fill(108, 32, 55);
        ellipse(200,312,18,20);
    }
    else if (mouth<=2) { //smile
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(190,310,190,325,210,325,210,310);
    }
    else if (mouth<=3) { //sidemouth
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(200,320,210,325,218,320,225,310);
    }

    if(eyebrows<=1) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(225,253,230,265,238,265,240,265);
        bezier(175,253,170,265,162,265,160,265);
    }
    else if(eyebrows<=2) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(225,253,230,250,238,260,240,265);
        bezier(175,253,170,250,162,260,160,265);
    }
    else if(eyebrows<=3) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        line(220,260,230,255);
        line(180,260,170,255);
    }
    strokeWeight(3); //cheeks
    stroke(255, 158, 147);
    line(238,295,245,290);
    line(246,295,253,290);
    line(162,295,155,290);
    line(154,295,147,290);

fill(255);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("2 CORINTHIANS 4:7",333,390);
}

 
function mousePressed() {
    pot = random(0, 3);
    plant = random(0, 3);
    eyebrows = random(0,3);
    eyes = random(0,3);
    mouth = random(0,3);
}

Variable Faces

sketch

//Yanina Shavialenka
//Section B

var flipped = false;

var hairLength = 260;

var mouthShape = 0;
var mouthY = 350;
var mouthX = 330;
var mouthWidth = 105;
var mouthHeight = 70;

var eyeBrowsXL = 270;
var eyeBrowsXR = 390;
var eyeBrowsWidth = 90;
var eyeBrowsHeight = 40;
var eyebrowY = 235;
var rEyebrows = 82;
var gEyebrows = 60;
var bEyebrows = 7;

var rShirt = 107;
var gShirt = 142;
var bShirt = 35;

var rEyes1 = 0;
var gEyes1 = 0;
var bEyes1 = 255;

var rEyes2 = 30;
var gEyes2 = 144;
var bEyes2 = 255;

var earXR = 455;
var earXL = 203;
var earY = 283;
var earWidth =60;
var earHeight = 100;

var earringXL = 195;
var earringXR = 462;
var earringY = 325;
var earringWidth = 2;
var earringHeight = 15;

var earringLongXR = 458;
var earringLongXL = 191;
var earringLongY = 335;
var earringLongWidth = 10;
var earringLongHeight = 25;

var studSmallX = 478;
var studBigX= 472;
var studSmallY = 302;
var studBigY = 310;
var studSmallWidth = 4;
var studBigWidth = 6;
var studBSmallHeight = 4;
var studBigHeight = 6;

var faceX = 330;
var faceY = 250;
var faceWidth = 280;
var faceHeight = 330;

var  bangsXL = 250;
var bangsXR = 415;
var bangsY = 160;
var bangsWidth = 120;
var bangsHeight = 80;

var eyeXL = 270;
var eyeXR = 390;
var eyeY = 255;
var eyeWidth = 65;
var eyeHeight = 55;

var eyeXL1 = 270;
var eyeXR1 = 390;
var eyeY1 = 255;
var eyeWidth1 = 50;
var eyeHeight1 = 50;

var reflectionBigX = 273;
var reflectionBigY = 252;
var reflectionBigWidth = 8;
var reflectionBigHeight = 8;

var reflectionSmallX = 393;
var reflectionSmallY = 252;
var reflectionSmallWidth = 4;
var reflectionSmallHeight =4;

var glassesXL = 270;
var glassesXR = 390;
var glassesY = 255;
var glassesWidth = 90;
var glassesHeight = 80;

var noseX = 330;
var noseY = 315;
var noseWidth = 35;
var noseHeight = 40;

var tX1 = 280;
var tY1 = 450;
var tX2 = 325;
var tY2 = 500;
var tX3 = 280;
var tY3 = 500;

var tXX1 = 325;
var tYY1 = 500;
var tXX2 = 370;
var tYY2 = 450;
var tXX3 = 370;
var tYY3 = 500; 

var tXXX1 = 475;
var tYYY1 = 450;
var tXXX2 = 575;
var tYYY2 = 550;
var tXXX3 = 475;
var tYYY3 = 550;

var tXXXX1 = 175;
var tYYYY1 = 450;
var tXXXX2 = 70;
var tYYYY2 = 550;
var tXXXX3 = 175;
var tYYYY3 = 550;

var rectX1 = 370;
var rectX2 = 175;
var rectY = 450;
var rectWidth = 105;
var rectHeight = 150;

function setup() {
   createCanvas(640, 480);
   background(65, 105, 225);
   text("p5.js vers 0.9.0 test.", 10, 15);  
}

function draw() {
   background(5, 105, 225);
   noStroke(30, 144, 255);
   fill(30, 144, 255);
   rect(width/8-30, height/10+2, width-100, height-100);

   noStroke();
   fill(100, 149, 237, 130);
   rect(width/6.4, height/4.8, width-200, height-200);

   noStroke();
   fill(135, 206, 250, 50);
   rect(width/4-10, height/3-10, width-300, height-300);

   noStroke();
   fill(176, 196, 222, 50);
   rect(width/4+4*10, height/2-4*10, width-400, height-400);

   noStroke();
   fill(240, 248, 255, 20);
   rect(width/2-10*2, height/2-10*2, width-500, height-440);

   //Hair
   noStroke();
   fill(160, 82, 45);
   rect(width/5+30, height/2-10*4, width-300, hairLength);
   ellipse(width/2+8, height/3+10*3, width-300, height-200);

   //Neck
   noStroke();
   fill(255, 218, 185);
   rect(width/2-10*4+2, height-10*8, width/8+10, height/4.8);

   //Ears
   stroke(1);
   fill(255, 218, 185);
   arc(earXR, earY, earWidth, earHeight, PI, PI, CHORD);
   arc(earXL, earY, earWidth, earHeight, PI, PI, CHORD);

   //Earrings
   stroke(1);
   fill(211, 211, 211);
   rect(earringXL, earringY, earringWidth, earringHeight);
   rect(earringXR, earringY, earringWidth, earringHeight);
   fill(192, 192, 192);
   ellipse(width/4+36, height/1.5, width/64, height/48);
   ellipse(width/1.6+10*6+3, height/1.5, width/64, height/48);
   rect(earringLongXL, earringLongY, earringLongWidth, earringLongHeight);
   rect(earringLongXR, earringLongY, earringLongWidth, earringLongHeight);

   //studs
   ellipse(studBigX, studBigY, studBigWidth, studBigHeight);
   ellipse(studSmallX, studSmallY, studSmallWidth, studBSmallHeight);

   //Face
   stroke(1);
   fill(255, 218, 185);
   ellipse(faceX, faceY, faceWidth, faceHeight);

   //Hair(Bangs)
   noStroke();
   fill(160, 82, 45);
   ellipse(330, 130, 200, 150);
   ellipse(bangsXL, bangsY, bangsWidth, bangsHeight);
   ellipse(bangsXR, bangsY, bangsWidth, bangsHeight);

   //Eyes(Shape)
   stroke(1);
   fill(255, 255, 255);
   ellipse(eyeXL, eyeY, eyeWidth, eyeHeight);
   ellipse(eyeXR, eyeY, eyeWidth, eyeHeight);

   //Eyes(Color)
   noStroke();
   fill(rEyes1, gEyes1, bEyes1, 170);
   ellipse(eyeXL1, eyeY1, eyeWidth1, eyeHeight1);
   ellipse(eyeXR1, eyeY1, eyeWidth1, eyeHeight1);

   //Eyes(Color)
   noStroke();
   fill(rEyes2, gEyes2, bEyes2, 100);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15, eyeHeight-15);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15, eyeHeight1-15);

   //Eyes(Pupils)
   noStroke();
   fill(0, 0, 0);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);

   //Eyes(Reflection)
   noStroke();
   fill(255, 255, 255);
   ellipse(reflectionBigX, reflectionBigY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionBigX+6, reflectionBigY+6, reflectionSmallWidth, reflectionSmallHeight);
   ellipse(reflectionSmallX, reflectionSmallY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionSmallX+6, reflectionSmallY+6, reflectionSmallWidth, reflectionSmallHeight);

   //Eyebrows
   fill(rEyebrows, gEyebrows, bEyebrows);
   arc(eyeBrowsXL, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI, PI + HALF_PI + QUARTER_PI, CHORD);
   arc(eyeBrowsXR, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI + QUARTER_PI, 2*PI, CHORD);

   //Glassses
   stroke(1);
   fill(240, 248, 255, 100);
   ellipse(glassesXL, glassesY, glassesWidth, glassesHeight);
   ellipse(glassesXR, glassesY, glassesWidth, glassesHeight);

   line(width/2-5, height/2+5*3, width/2+5*5, height/2+5*3);
   line(width/1.6+5*7, height/2+5*3, width/1.6+10*7, height/2);
   line(width/2.5-3*10-2, height/2+5*3, width/4+3*10+1, height/2-1);

   //Mouth
   noStroke();
   fill(205, 92, 92);
   arc(mouthX, mouthY, mouthWidth, mouthHeight, mouthShape, mouthShape+PI, CHORD);

   //Nose
   noStroke();
   fill(228, 167, 187);
   arc(noseX, noseY, noseWidth, noseHeight, PI, 2*PI, PIE);

   //Tshirt
   stroke(1);
   fill(rShirt,gShirt,bShirt);
   line(width/2-10*4, height-10*3, width/2+5, height+20);
   line(width/2+5, height+20, width/2+5*10, height-10*3);
   line(width/2-10*4, height-10*3, width/4+5*3, height-10*3);
   line(width/4+5*3, height-10*3, width/8 + 2*5, height*1.1+30);
   line(width/2+5*10, height-10*3, width-165, height-10*3);
   line(width-165, height-10*3, width-3*20, height*1.1 + 2*13);
   
   noStroke();
   triangle(tX1, tY1, tX2, tY2, tX3, tY3);
   triangle(tXX1, tYY1, tXX2, tYY2, tXX3, tYY3);
   triangle(tXXX1, tYYY1, tXXX2, tYYY2, tXXX3, tYYY3);
   triangle(tXXXX1, tYYYY1, tXXXX2, tYYYY2, tXXXX3, tYYYY3);
   rect(rectX1, rectY, rectWidth, rectHeight);
   rect(rectX2, rectY, rectWidth, rectHeight);

}

function mousePressed() {
   hairLength = random(100, 280);

   flipped =! flipped; 
      if(flipped) {
         mouthShape += PI;
         mouthY = 380;
      }
      else {
        mouthShape -= PI;
        mouthY = 350;
      }
      
   rShirt = random(255);
   gShirt = random(255);
   bShirt = random(255);

   rEyes1 = random(255);
   gEyes1 = random(255);
   bEyes1 = random(255);

   rEyes2 = random(255);
   gEyes2 = random(255);
   bEyes2 = random(255);

   rEyebrows = random(255);
   gEyebrows = random(255);
   bEyebrows = random(255);

   eyebrowY = random(210, 245);
}

I used my Self-Portrait from the previous assignment to make this Face Variables such as I randomly change the length of the hair, color of the eyes/eyebrows/shirt. The hardest part for me was to change the colors because I had trouble figuring out how it works.

Project 2: Variable Faces

sketch

var eyeSize = 50
var mouthType = 1
var eyebrowType = 1

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

function draw() {
    background(215, 167, 119);
    strokeWeight(0);
    fill(107, 70, 27); // eyes
    ellipse(width/3, height/3, eyeSize);
    ellipse(width*2/3, height/3, eyeSize);
    if (eyebrowType >=1) { // angry eyebrows
        fill(107, 70, 27);
        triangle(width/5, height/5, width/4, height/4, width/2, height/4);
        triangle(4*width/5, height/5, 3*width/4, height/4, width/2, height/4);
    } else if (eyebrowType < 1 & eyebrowType > .5) { // unibrow
        strokeWeight(20);
        line(width/4, height/5, 3*width/4, height/5);
    } else { // arc eyebrows
        noFill();
        strokeWeight(7);
        arc(width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
        arc(2*width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
    }
    noFill(); // nose
    strokeWeight(7);
    stroke(107, 70, 27);
    arc(width/2, height/2, 80, 80, PI/4, 3/4 * PI);
    stroke(107, 70, 27); // line mouth
    if (mouthType >= 1) {
        strokeWeight(7);
        line(width/3, 3*height/4, 2*width/3, 3*height/4);
    } else if (mouthType < 1 & mouthType > .5) { // open mouth
        strokeWeight(0);
        fill(107, 70, 27);
        ellipse(width/2, 3*height/4, width/2, height/10);
    } else { // smile mouth
        strokeWeight(7);
        arc(width/2, 3*height/4, 200, 100, PI/6, 5/6 * PI);
    }


}

function mousePressed() {
    eyeSize = random(25, 75);
    mouthType = random(1.5);
    eyebrowType = random(1.5);

}

I wanted to see what combination of facial features the computer would create, rather than creating combinations myself. While this prevented me from focusing on individual emotions, it’s been fun to see what the computer comes up with.