Project 02 – face generator – srauch

This face generator makes lots of cool folks to chill with! About half of the characteristics of each person — for instance, the shirt size and color, the background, and the skin tone — are completely random, while other components such as the eye color or headwear/hairstyle are randomly selected from a list of options. Writing this code really dusted off the ol’ middle school algebra. Some of said algebra is visible in the positively chicken-scratch notebook hieroglyphs I made while figuring out some of the first few variables. Once I had those established, though, I found I wasn’t writing anything down, instead just relying on the variables I’d already defined to write the next ones–quite the departure from how I worked through last week’s homework.

sketch 

var width = 480;
var height = 640;

//background color
var backgroundR = 100;
var backgroundG = 0;
var backgroundB = 0;

//shirt color and size
var shirtR = 200;
var shirtG = 200;
var shirtB = 0;
var shirtWide = 400;
var shirtTall = 100;

//skintone
var skinR = 47;
var skinG = 39;
var skinB = 32;

//neck
var neckTall = 250;
var neckWide = 100;
var neckY = 200;

//head
var headWide = 250;
var headTall = 300;
var headX = width/2;
var headY = 200;

//ears
var earSize = 40;

//eyes
var eyeColor = 1;
var eyeSize = 30;
var eyeDistance = 30;

//nose
var noseLong = 20;
var noseWide = 10;

//mouth
var mouthSelector = 1;

//eyebrows
var eyebrowTall = 30;
var eyebrowWide = 30;
var eyebrowColorSelector = 1;
var eyebrowWeight = 10;

//hair
var hairstyle = 1;

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

function draw() {
    noStroke();
    background(backgroundR, backgroundG, backgroundB);

    // sleeve location variables -- have to be here (not global) so will update with new shirtWide values 
    var shirtCornerStar = ((width-shirtWide)/2)+((shirtWide/4)/2); //x coord of starboard sleeve
    var shirtCornerPort = width-shirtCornerStar; //x coord of port sleeve

    //shirt
    fill(shirtR, shirtG, shirtB);
    //rect(((width-shirtWide)/2), (height-shirtTall), shirtWide, shirtTall); 
    rect(shirtCornerStar, (height-shirtTall), (shirtWide-(shirtWide/4)), shirtTall);

    //sleeves
    fill(shirtR-20, shirtG-20, shirtB-20); //makes sleeves slightly darker than shirt
    triangle(shirtCornerStar, (height-shirtTall), shirtCornerStar, height, (shirtCornerStar-((shirtWide/4)/2)), height); //starboard sleeve
    triangle( shirtCornerPort, (height-shirtTall), shirtCornerPort, height, (shirtCornerPort+((shirtWide/4)/2)), height); //port sleeve

    //neck
    neckWide = shirtWide/3
    neckY = height-neckTall-shirtTall+(shirtTall/6);
    fill(skinR-20, skinG-20, skinB-20);
    rect(width/2-neckWide/2, neckY, neckWide, neckTall);
    ellipse(width/2, neckY+neckTall, neckWide, neckTall/4);

    //head
    headX = width/2
    headY = neckY
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //ears
    fill(skinR-10, skinG-10, skinB-10);
    ellipse(headX-(headWide/2), headY, earSize, earSize*1.5); //starboard ear
    ellipse(width-(headX-(headWide/2)), headY, earSize, earSize*1.5); //port ear

    //redraw head to cover ears, theres prob a better way to do this but ears rely on the head variables
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //nose (length and width)
    strokeWeight(noseWide);
    stroke(skinR, skinG-20, skinB-20);
    line(headX, headY, headX, headY+noseLong);
    noStroke();

    //eyes (color and distance from center of head)
    if (eyeColor <= 1) {
        fill(54, 43, 17); //brown
    } else if (eyeColor <= 2) {
        fill(52, 95, 45); //green
    } else if (eyeColor <= 2.8) {
        fill(13, 200, 200); //blue
    } else {
        fill(255, 20, 0); //red!
    }
    ellipse((width/2)-eyeDistance, headY, eyeSize);
    ellipse((width/2)+eyeDistance, headY, eyeSize);


    //mouth (arc of different size and stroke color)
    if (mouthSelector <= 1) { //open smile
        fill(61, 32, 31);
        arc(headX, headY+noseLong*2, headWide/3, headTall/4, radians(0), radians(180));
    } else if (mouthSelector <= 2) { //closed smile
        noFill();
        stroke(skinR+20, skinG-20, skinB-20);
        strokeWeight(20);
        arc(headX, headY+noseLong*2, headWide/3, headTall/5, radians(10), radians(170));
        noStroke();
    } else { //bubblegum
        fill(40, 0, 0);
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 30); //mouth
        fill(238, 168, 234, 70); //pink transparent
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 175, 175); //bubble1
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 180, 180); //bubble 2
        fill(255, 240, 240, 90);
        ellipse(headX+40, headY+(headTall/2)-headTall/3, 30, 30); //highlight
    }

    //and finally, hair!
    if (hairstyle <=1) { //bald
        //do nothing
    } else if (hairstyle <=2) { //beanie
    strokeWeight(12);
    strokeCap(ROUND);
        if (hairstyle <= 1.3){
            fill(168, 47, 47); //red hat
            stroke(168-10, 47-10, 47-10);
        } else if (hairstyle <=1.6) {
            fill(200 , 120, 218); //pink hat
            stroke(200-10, 120-10, 218-10);
        } else {
            fill(86, 93, 200); //perriwinkle hat
            stroke(86-10, 93-10, 200-10);
        }
        arc(headX, headY-(headTall/2)+40, headWide+5, headTall-60, radians(180), radians(360));
        rect(headX-(headWide/2)-10, headY-(headTall/2)+40, headWide+20, 60);
    } else { //bowl cut
        if (hairstyle <= 2.3){
            fill(45, 40, 30); //dark brown
            stroke(45, 40, 30);
        } else if (hairstyle <=2.8) {
            fill(130, 96, 57); //light brown
            stroke(130, 96, 57);
        } else if (hairstyle <=2.9 & skinR > 80 && skinG > 80 && skinB >30) {
            fill(222, 129, 25); //red
            stroke(222, 129, 25);
        } else {
            fill(25, 183, 222); //blue
            stroke(25, 183, 222);
        }
        arc(headX, headY-headY/4, headWide+5, headTall-60, radians(180), radians(360));
    }

    //eyebrows
    if (eyebrowColorSelector <=1) {
        stroke(40, 35, 20); //dark brown
    } else if (eyebrowColorSelector <=2) {
        stroke(230, 230, 138); //blonde
    } else {
        stroke(140, 230, 200); //blue
    }

    noFill();
    strokeWeight(eyebrowWeight);
    arc((width/2)-eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    arc((width/2)+eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    noStroke();

}

function mousePressed() {
    //background color change
    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);

    //shirt color and size change
    shirtR = random(0, 255);
    shirtG = random(0, 255);
    shirtB = random(0, 255);
    shirtWide = random((width-(width/3)), (width-20));
    shirtTall = random((height/6), (height/4));

    //neck and skin changes
    skinR = random(60, 200);
    skinG = random(skinR, skinR-10);
    skinB = random(skinR-20, skinR-30);
    neckTall = random(200, 250);

    //head
    headWide = random(neckWide+100, neckWide+150);
    headTall = random(headWide, headWide*1.4);
    earSize = random(50, 60);

    //eyes
    eyeColor = random(0,3); 
    eyeSize = random(20, 40);
    eyeDistance = random(30, headWide/2-30);

    //nose
    noseLong = random(headTall/10, headTall/6);
    noseWide = random(25, 40);

    //mouth
    mouthSelector = random(0, 3);

    //eyebrows
    eyebrowColorSelector = random(0,2.1);
    eyebrowWeight = random(10, 18);
    eyebrowTall = random(20, 40);

    //hair
    hairstyle = random(0,3);
}

Leave a Reply