Category: SectionD

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.

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.

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.

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.

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