Category: Project-02-Variable-Face

Project 2: Generative Faces

How I feel after having to eat Resnik because I left my lunch at home.

sketch
var eyeSizeL = 20;
var eyeSizeR = 20;
var faceWidth = 100;
var faceHeight = 150;
var chinHeight = 300;
var irisSizeL = 10;
var irisSizeR = 10;
var browHeightL = 130
var browHeightR = 130
var cheekSizeL = 70
var cheekSizeR = 70
var lusciousLips = 15
var juicyLips = 17
var thickLipsTop = 13
var thickLipsBottom = 22

let moodColor = 50
 
function setup() {
    createCanvas(300, 500);
}
 
function draw() {
    background(moodColor);
    noStroke ();
    fill ('#86BB43');
    ellipse(width /2, height / 3, 135,140); //head shape
    fill('#F2BE80');
    rect(width/2 -15,250,30,60); //neck
    fill('#E856AD');
    ellipse(width/2, height,210,360,); 
    rect(width/2 -20, 300, 40,60)//shirt
    rect(width/2 -25, 280, 50,25, 10)
    fill('#86BB43');
    ellipse(width /2, 230, 80); //chin
    fill('#86BB43');
    circle(width/2-40, height/7*3,cheekSizeL); //left cheek
    circle(width/2+40, height/7*3, cheekSizeR); //right cheek
    fill (150);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill('#2B3D15');
    ellipse(eyeLX, browHeightL,30,20); //eyebrow
    ellipse(eyeRX, browHeightR-3,30,20); //eyebrow
    fill('#86BB43');
    ellipse(eyeLX, browHeightL-6, 35, 20); //eyebrow
    ellipse(eyeRX, browHeightR+3, 35, 20); //eyebrow
    fill(225)
    circle(eyeLX, height / 3, eyeSizeL); //eyeball
    circle(eyeRX, height / 3, eyeSizeR); //eyeball
    fill(10);
    ellipse(eyeLX, height / 3, irisSizeL, irisSizeL); //pupil
    ellipse(eyeRX, height / 3, irisSizeR, irisSizeR); //pupil
    fill('#D25A27');
    arc(width/2-5, 222, thickLipsTop,lusciousLips, PI,TWO_PI) //top lip
    arc(width/2+5, 222, thickLipsTop,lusciousLips, PI, TWO_PI) //top lip
    arc(width/2, 224,thickLipsBottom,juicyLips, 0,PI) //bottom lip
  
    
    
    
}
 
function mousePressed() {
    faceHeight = random(100, 200);
    eyeSizeL = random(15, 35);
    eyeSizeR = random(15, 35);
    irisSizeL = random(7,15);
    irisSizeR = random(7,15);
    browHeightL = random(125,135);
    browHeightR = random(125,135);
    cheekSizeL = random(70, 90);
    cheekSizeR = random(70, 90);
    lusciousLips = random(13, 25);
    juicyLips = random(15,25)
    thickLipsTop = random(13, 20)
    thickLipsBottom = random(20, 30)
  
    moodColor = color(random(30), random(95), random(40))
}

Project 2 – Variable Faces

sketch 

var facewidth = 200;
var faceheight = 200;
var lefteary = 149; //y coordinate of the left ear
var righteary = 149; //y coordinate of the right ear
var eyebrowx1 = 295; //x coordinate of the left eyebrow
var eyebrowy1 = 230; //y coordinate of the left eyebrow
var eyebrowx2 = 345; //x coordinate of the right eyebrow
var eyebrowy2 = 230; //y coordinate of the right eyebrow
var eyewidth = 15;
var eyeheight = 15;
var mouthwidth = 15;
var mouthheight = 11;
var cheekwidth = 65;
var cheekheight = 65;

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

function draw() {
  background(255,243,169);
  noStroke();
  fill(255,197,197);
  ellipse(266,lefteary,70,172); //left ear
  ellipse(373,righteary,70,172); //right ear
  ellipse(320,267,facewidth,faceheight); //face
  fill(255,171,195);
  ellipse(250,291,cheekwidth,cheekheight);//left cheek
  ellipse(389,291,cheekwidth,cheekheight); //right cheek
  fill(107,43,43);
  ellipse(286,251,eyewidth,eyeheight);//left eye
  ellipse(353,251,eyewidth,eyeheight); //right eye
  rect(313,268,mouthwidth,mouthheight); //mouth
  strokeWeight(5);
  stroke(107,43,43);
  line(277,230,eyebrowx1,eyebrowy1); //eyebrow left
  line(eyebrowx2,eyebrowy2,362,230); //eyebrow right
  
  
}

function mousePressed(){
  eyebrowy1 = random(225,235);
  eyebrowy2 = random(225,235);
  eyewidth = random(5,30);
  eyeheight = random(5,30);
  mouthwidth = random(5,30);
  mouthheight = random(5,30);
  cheekwidth = random(40,70);
  cheekheight = random(20,70);
  lefteary = random(120,170);
  righteary = random(120,170);
  
}

Variable Face

sketch
//Jasmin Kim
//Section D

var eyeSize = 70;
var faceWidth = 200;
var faceHeight = 250;
var mouthSize = 80;
var mouthW = 80;
var mouthH=40;
var R = 188;
var G = 212;
var B = 246;


var value = 0;

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

function draw() {
    background(R,G,B);

    //Face Shape
    fill(243,213,B); //Beige
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  //Face
    var faceX = (width/2);
    var faceY = (height/2);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Body Shape
    var bodyW = faceWidth*1.8
    var bodyH = (height/2)+(height*0.6)
    rect((width/2)-(faceWidth/1.1),(height/2)+(faceHeight/2.4),bodyW,bodyH,80,80,20,20);
    
    //glass rectangle
    fill(158,157,156);
    stroke(1);
    rect(eyeLX,(height/2)-3,faceWidth/2,5);
    
    //Eyes
    stroke(7);
    strokeWeight(1);
    var eyeH = height/2
    ellipse(eyeLX, eyeH, eyeSize*1.3, eyeSize*1.3);   //gray glasses
    ellipse(eyeRX, eyeH, eyeSize*1.3, eyeSize*1.3);
    fill(255);
    ellipse(eyeLX, eyeH, eyeSize, eyeSize);           //white eyes
    ellipse(eyeRX, eyeH, eyeSize, eyeSize);
    
    //eyes moving
    fill(0);
    var moveXr = constrain(mouseX,eyeLX-(eyeSize/5),eyeLX+(eyeSize/5));
    var moveYr = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    var moveXl = constrain(mouseX,eyeRX-(eyeSize/5),eyeRX+(eyeSize/5));
    var moveYl = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    ellipse(moveXr, moveYr, eyeSize/2, eyeSize/2);       //black eyeball
    ellipse(moveXl, moveYl, eyeSize/2, eyeSize/2);

    //Mouth
    if(faceWidth <230){
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-40,eyeLX+(eyeSize/2),eyeH-50);               //sad eyebrow
        line(eyeRX-(eyeSize/2),eyeH-50,eyeRX+(eyeSize/2),eyeH-40);
        noStroke();
        fill(79,129,255)
        circle(eyeLX,(height*0.65),20);                                           //tears
        triangle(eyeLX-10, height*0.65, eyeLX, height*0.6,eyeLX+10, height*0.65);   //tears#2
        fill(0);
        ellipse(width/2,(faceY+(faceHeight/4.5))+10,50,45);     //black mouth
        if(faceHeight<290){
            stroke(4);
            line(280,90,(width/2)-20,130);      //hair
            line(300,90,(width/2)-14,125);
            line(320,90,(width/2)-8,118);
        }
        
    } else{
        fill(R,G,B);
        strokeWeight(1);
        var mouthY = faceY+(faceHeight/4.5);
        var mouthX = faceX-(mouthW/2);
        rect(mouthX, mouthY, mouthW, mouthH,25,25,25,25);       //normal mouth
        //Angry Eyebrows
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-50,eyeLX+(eyeSize/2),eyeH-40);
        line(eyeRX-(eyeSize/2),eyeH-40,eyeRX+(eyeSize/2),eyeH-50);
        //tongue
        strokeWeight(1);
        fill(239,133,154);
        arc(mouthX+(mouthW/2),mouthY+mouthH, mouthW/1.8, mouthH*0.8, PI, TWO_PI);

    }

    
}


function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(250, 350);
    eyeSize = random(40, 70);
    R = random(0,255);
    G = random(0,255);
    B = random(0,255);
    mouthW = random(55,85);
    mouthH = random(30,45);

}

For this project, I tried to show two different facial expressions while I limited the probability of hairs too. Skin color, background color, and eyebrows change as I click the mouse. An interesting part of this project is that I also tried to move the pupils according to the screen mouse.

Project 02- Variable Face

For my project, I decided that instead of coding a typical human face, I wanted to show different animal faces. I wanted the variability to come from the colors of the physical attributes of the animal, its background color, as well as its species! I chose four different animals– a cat, a bear, a koala, and a bunny. I kept the size of their attributes the same since I wanted some consistency with the other randomness.

mk24sketch02 
//Mirie Kim
//section A

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

var animal = 0;
var backgroundColorR = 230;
var backgroundColorG = 220;
var backgroundColorB = 250;
var headEarColorR = 0;  //and whiskers
var headEarColorG = 0;
var headEarColorB = 0;
var innerEarNoseColorR = 250;  //and  snout
var innerEarNoseColorG = 210;
var innerEarNoseColorB = 230;
var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;
var smile = 3;
var bearNoseColorR = 90; //and bunny's
var bearNoseColorG = 209;
var bearNoseColorB = 49;
var smileX = 15;
var smileY = 40;

function draw() {
	if(animal >= 0 & animal < 1){ //cat
		noStroke();
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		triangle(205,205, 260, 145, 200, 130); //ears
		triangle(435,205, 380, 145, 440, 130);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(215,195, 250, 155, 215, 150); //inside ears
		triangle(425,195, 390, 155, 425, 150); 
		fill(255);
		ellipse(260,240, 80, 85); //eyes
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);	
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(320,280, 310, 270, 330, 270); //nose
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);

	}
	else if (animal >= 1 & animal < 2) { //bear
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,165,90); //ears
		ellipse(415,165,90);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,165,50); //inside ears
		ellipse(415,165,50);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270); 

	}
	else if (animal >= 2 & animal < 3) { //koala
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,185,140); //ears
		ellipse(415,185,140);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,185,80); //inside ears
		ellipse(415,185,80);
		//head
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220);
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		//nose
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320,275, 45, 57);

	}
	else if (animal >= 3 & animal < 4) { //bunny
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(260,145,60,250); //ears
		ellipse(380,145, 60, 250);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(260,145,30, 150); //inside ears
		ellipse(380,145,30, 150);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270);
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);	
	
	}
}

function mousePressed() {
	animal = random(0,4); //produces decimal so have to refer to range in if/else statements
	backgroundColorR = random(0,255);
 	backgroundColorG = random(0,255);
 	backgroundColorB = random(0,255);
	headEarColorR = random(0,255);
	headEarColorG = random(0,255);
	headEarColorB = random(0,255);
	innerEarNoseColorR = random(0,255);
	innerEarNoseColorG = random(0,255);
	innerEarNoseColorB = random(0,255);
	eyeColorR = random(0,255);
	eyeColorG = random(0,255);
	eyeColorB = random(0,255);
	bearNoseColorR = random(0,255);
	bearNoseColorG = random(0,255);
	bearNoseColorB = random(0,255);
}

Project 2 – Variable Faces

For my variable face project, I chose to randomize chicken faces! This project seemed difficult at first, but after studying the sample code template, I had a better understanding of how and where to assign and use variables. My biggest challenge was figuring out how to randomize the chicken beak, since the code for a triangle consists of six coordinates; I had to figure out which coordinates to randomize and which coordinates to stay constant (so the beak doesn’t fly around the canvas). Overall, however, this project was quite fun and I think my chicken turned out reallyyyy cute 😀

Maggie-Variable Faces
var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 300;
var beakWidth = 18;
var beakHeight = 30;
var cheekSize = 20;
var crown1Size = 40;
var crown2Size = 30;
var r=133;
var g=217;
var b=92;
function setup() {
    createCanvas(500, 500);
}
 
function draw() {
    background(r,g,b);
    noStroke();
    //face
    fill(255,255,255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(0, 0 ,0);
    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);
    //beak
    fill (239,128,9);
    triangle((width/2) - (beakWidth/2),height/2, width/2, height/2 + beakHeight,(width/2) + (beakWidth/2), height/2);
    //cheek
    fill (243,187,200);
    var cheekLX = width/2 - faceWidth/3;
    var cheekRX = width/2 + faceWidth/3;
    ellipse(cheekLX, height /2 + 25, cheekSize, cheekSize);
    ellipse(cheekRX, height/2 +25, cheekSize, cheekSize);
    //crown 1
    fill(247,86,79);
    var crownLX = width/2 - 10;
    var crownRX = width/2 + 10;
    ellipse(crownLX, height/2 - 70, crown1Size, crown1Size);
    ellipse(crownRX, height/2 - 70, crown2Size, crown2Size);


}
 
function mousePressed() {
    r = random(110, 200);
    g = random(50,217);
    b = random(50, 200);
    faceWidth = random(130, 320);
    faceHeight = random(120, 350);
    eyeSize = random(6, 22);
    beakWidth =random(15, 40);
    beakHeight = random(15,20);
    cheekSize = random (15, 30);
    crown1Size = random(40,65);
    crown2Size = random(30, 70);
}

Project 02: Variable Face

sketch
/*
Bon Bhakdibhumi
Section D
*/
var cheekSize = 44;
var eyeSize = 15;
var mouthWidth = 52;
var mouthHeight = 52;
var faceWidth = 178;
var faceHeight = 267;
var r = 240;
var g = 92;
var b = 138;

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

function draw() {
    background(255);
    stroke(1);
    noFill();
    //face
    beginShape();
    curveVertex(276, 221);
    curveVertex(265, 215);
    curveVertex(257, 214);
    curveVertex(250, 213);
    curveVertex(234, 215);
    curveVertex(230, 214);
    curveVertex(204, 229);
    curveVertex(191, 235);
    curveVertex(169, 251);
    curveVertex(160, 260);
    curveVertex(152, 271);
    curveVertex(141, 296);
    curveVertex(142, 313);
    curveVertex(143, 322);
    curveVertex(142, 337);
    curveVertex(139, 353);
    curveVertex(137, 365);
    curveVertex(135, 412);
    curveVertex(146, 431);
    curveVertex(157, 422);
    curveVertex(171, 453);
    curveVertex(198, 468);
    curveVertex(215, 473);
    curveVertex(251, 471);
    curveVertex(299, 426);
    curveVertex(313, 388);
    curveVertex(325, 341);
    curveVertex(337, 305);
    curveVertex(340, 292);
    curveVertex(288, 229);
    endShape(CLOSE);
    //right ear
    ellipse(335, 350, 30, 59);
    // left ear
    ellipse(132, 336, 24, 62);
    //nostril
    noStroke();
    fill(0);
    ellipse(218, 380, 9, 9);
    ellipse(230, 380, 9, 9);
    // cheeks
    var xLcheek = width/2 - faceWidth*0.4
    var xRcheek = width/2 + faceWidth/4
    var o = 60
    noStroke();
    fill(r, g, b, o);
    ellipse(xLcheek, height/1.7, cheekSize, cheekSize);
    ellipse(xRcheek, height/1.7, cheekSize, cheekSize);
    // mouth
    var xMouth = width/2.15
    fill(0);
    arc(xMouth, height/1.55, mouthWidth, mouthHeight, 0, PI, CHORD);
    // left eye
    var xLeye = width/1.5 - faceWidth*0.19
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xLeye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xLeye, height/2, eyeSize, eyeSize);
    // right eye
    var xReye = width/1.5 - faceWidth*0.75
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xReye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xReye, height/2, eyeSize, eyeSize);
}

function mousePressed(){
    r = random(20, 200);
    g = random(20, 200);
    b = random(20, 200);
    cheekSize = random(35, 50);
    mouthWidth = random(0, 70);
    mouthHeight = random(0,70);
    eyeSize = random(10, 20);
}

I based my project off a minimalistic illustration I did in Illustrator. I made the mouth size, cheek size, and eye size generative to create varying facial expressions for the same person. I then decided to make the cheeks change color and shape while maintaining a low opacity, making the drawing more dynamic while also persevering its minimalistic style.

My initial sketch

Project 2 – Variable Face

VariableFaces
var faceWidth = 60;
var faceHeight = 60;
var mouthWidth = 50;
var mouthHeight = 30;
var eyeWidth = 70;
var eyeHeight = 70; 
var browHeight = 60;

let ecolor = 255;
let bcolor = 10;

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

function draw() {
    background(bcolor)

    var x = width/2;
    var y = height/2;

    //hair
    fill(29, 22, 16);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 6*faceWidth, 6*faceHeight);
    rect(x - (3*faceWidth), y - (1.5 * faceHeight), 6*faceWidth, 5*faceHeight);

    //ears 
    fill(171, 113, 88);
    ellipse(x - (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);
    ellipse(x + (1.5 * faceWidth), y, 2*faceWidth, 2*faceHeight);

    //earrings
    noFill();
    stroke(ecolor);
    strokeWeight(8);
    circle(x - (1.5 * faceWidth), y + faceHeight, 95);
    circle(x + (1.5 * faceWidth), y + faceHeight, 95);

    //face
    fill(171, 113, 88);
    noStroke();
    ellipse(x, y - (1.5 * faceHeight), 4*faceWidth, 4*faceHeight);
    rect(x - 2*faceWidth, y - 1.5*faceHeight, 4*faceWidth, 2*faceHeight);
    ellipse(x, y + 0.5*faceHeight, 4*faceWidth, 4*faceHeight);

    //nose
    noStroke();
    fill(0, 0, 0);
    ellipse(x - 10, y, 8, 4);
    ellipse(x + 10, y, 8, 4);

    //mouth
    strokeWeight(5);
    stroke(235, 76, 61);
    fill(0, 0, 0);
    ellipse(x , y + 50, mouthWidth, mouthHeight);

    //eyes
    strokeWeight(5);
    stroke(0, 0, 0);
    fill(255, 255, 255);
    ellipse(x - faceWidth, y - faceHeight, eyeWidth, eyeHeight);
    ellipse(x + faceWidth, y - faceHeight, eyeWidth, eyeHeight);

    //pupils
    fill(0, 0, 0);
    var a = constrain(mouseX, (x + faceWidth) - (eyeWidth/2) + 20, (x + faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y - faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);
    var a = constrain(mouseX, (x - faceWidth) - (eyeWidth/2) + 20, (x - faceWidth) + (eyeWidth/2) - 20);
    var b = constrain(mouseY, (y - faceHeight) - (eyeHeight/2) + 20, (y- faceHeight) + (eyeHeight/2) - 20);
    ellipse(a, b, 30, 30);

    //bindi
    noStroke();
    fill(ecolor);
    circle(x, y - (2*faceHeight), 25, 25);

    //eyebrows
    strokeWeight(9);
    stroke(0);
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x-(faceWidth*1.5), y-(2*faceHeight), x-(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));
    line(x+(faceWidth*1.5), y-(2*faceHeight), x+(faceWidth*0.5), y-(2*browHeight));

}

function mousePressed() {
    clear(0);
    faceWidth = random(40,75);
    faceHeight = random(35,70);
    mouthHeight = random(20,80);
    mouthWidth = random(30,90);
    eyeWidth = random(60,80);
    eyeHeight = random(60,80);
    browHeight = random(45,65);

    bcolor = color(random(255), random(255), random(255));
    ecolor = color(random(255), random(255), random(255));

}
Initial Sketch

For this project I started by drawing it on Illustrator. I wanted to continue to iterate on what I created for project one. I decided to keep the face color and nose size consistent and everything else variable. I also added earrings and a bindi for some more personalization.

Project-02-Variable-Face

powerpuffDownload
//Annie Kim
//andrewID: anniekim
//Section B

var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile


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

function draw() {
    background(backR, backG, backB);


    //right half of background
    stroke(RectColorR, RectColorG, RectColorB);
    fill(RectColorR, RectColorG, RectColorB);
    rect(320, 0, 320, 480);


     //lines across
    stroke(248, 206, 93);
    strokeWeight(StrokeArrow);
    line(140, 380, 550, 80);
    line(65, 370, 140, 380);
    line(100, 450, 140, 380);
    fill(248, 206, 93);
    triangle(540, 57, 575, 100, 580, 60);


//heart1 forming
    fill(heart1r, heart1g, heart1b);
    strokeWeight(7);
    stroke(heart1r, heart1g, heart1b);
    triangle(171, 210, 469, 210, 320, 440);
    circle(244, 183, 155);
    circle(396, 183, 155);

//second heart layer
    fill(heart2r, heart2g, heart2b);
    stroke(heart2r, heart2g, heart2b);
    triangle(240, 240, 400, 240, 320, 360);
    circle(359, 220, 92);
    circle(281, 220, 92);

//middle hair behind the back
    fill(HR, HG, HB);
    stroke(HR, HG, HB);
    arc(320, 260, 120, 140, 0, PI, CHORD);
    triangle(320, 200, 275, 260, 365, 260);

    //body middle
    fill(Reye, Geye, Beye);
    stroke(0);
    strokeWeight(5);
    rect(295, 220, 50, 80);
    fill(0);
    rect(295, 245, 50, 30);
    fill(255);
    stroke(255);
    rect(328, 305, 15, 40);
    ellipse(297, 297, 25, 45);
    fill(0);
    stroke(0);
    arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
    arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe

    //recovering black stroke
    stroke(0);

    //middle right arm
    fill(246, 232, 219);
    stroke(246, 232, 219);
    circle(230, 240, 30);
    circle(410, 120, 30);
    stroke(246, 232, 219);
    rect(395, 120, 30, 40);
    triangle(395, 160, 422, 164, 377, 200);
    triangle(235, 225, 295, 225, 243, 249);

 //middle bow
    fill(255, 0, 0);
    stroke(255, 0, 0);
    circle(270, 80, 25);
    circle(375, 80, 25);
    triangle(257, 89, 255, 155, 295, 170);
    strokeWeight(30);
    line(274, 85, 310, 170);
    strokeWeight(1);
    arc(320, 120, 60, 35, PI, 0);
    strokeWeight(30);
    line(375, 80, 330, 170);
    line(375, 80, 370, 175);


    //head middle
    strokeWeight(2);
    fill(246, 232, 219);
    stroke(0);
    ellipse(320, 177, 135, 110);
    

    //middle eyes
    strokeWeight(2);
    fill(255);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(Reye, Geye, Beye);
    stroke(Reye, Geye, Beye);
    circle(350, 178, 45); // color of right eye pink 
    circle(290, 178, 45); // color of left eye pink
    noFill();
    stroke(0);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(0);
    stroke(0);
    circle(346, 180, 35); // black of right eye
    circle(294, 180, 35); // black of left eye
    fill(255);
    circle(346, 180, pupil);
    circle(294, 180, pupil);


    //middle bangs
    fill(HR, HG, HB);
    stroke(0);
    strokeWeight(1.5);
    arc(320, 150, 118, 52, PI, 0, CHORD);
    fill(246, 232, 219);
    stroke(246, 232, 219);
    triangle(320, 135, 310, 155, 330, 155);


    //overlapping head shape
    noFill();
    stroke(0);
    strokeWeight(5);
    ellipse(320, 177, 135, 110);

     //middle smile
    noFill();
    strokeWeight(2);
    arc(320, 205, smilecurvex, smilecurvey, 0, PI);
 
}
    function mouseClicked() {
    Reye = random(0, 255);
    Geye = random(0, 255);
    Beye = random(0, 255);
    HR = random(0,255);
    HG = random(0, 255);
    HB = random(0, 255);
    pupil = random(15, 35);
    heart1r = random(100, 255);
    heart1g = random(75, 90);
    heart1b = random(80, 110);
    heart2r = random(0, 100);
    heart2g = random(0, 100);
    heart2b = random(0,100);
    backgroundr = random(150, 200);
    backgroundg = random(15, 25);
    backgroundb = random(20,30);
    StrokeArrow = random(1, 20);
    RectColorR = random(200,220);
    RectColorG = random(110, 130);
    RectColorB = random(150, 160);
    backR = random(200, 255);
    backG = random(50, 100);
    backB = random(60, 100);
    smilecurvex = random(15, 45);
    smilecurvey = random(15, 45);
}

I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.

Project 2: Variable Face

generative_faces

var bgColor;
var blushColor;
var cheekBlush;
var blushSize;
var blushHeight;
var faceWidth;
var faceHeight;
var faceStyle;
var Bun;
var bunY;
var noseStyle;
var mouthStyle;
var eyeStyle;

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

    bgColor = color(255, 235, 232);
    blushColor = color(255, 138, 130);
    cheekBlush = 0;
    blushSize = 0;
    blushHeight = 0;
    Bun = 0;
    bunY = 0;
    noseStyle = 0;
    faceStyle = 0;
    mouthStyle = 0;
    eyeStyle = 0;
}

function draw() {
    background(bgColor);

    // HAIR BUNS
    fill(0);
    ellipse((width/3), bunY, Bun, Bun); 
    ellipse((width/1.5), bunY, Bun, Bun);

    // FACE
    fill(255);
    strokeWeight(5);
    if (faceStyle >= 2) {
        ellipse((width/2), (height/2), 300, 300); //circular face
    }
    else if (faceStyle >= 1) { //teardrop face
        ellipse((width/2), (height/2.2), 360, 250);
        bezier(475, 300, 400, 500, 220, 550, 125, 300);
    }
    else {
        ellipse((width/2), (height/2), 350, 280); //oval face
    }

    // EYES
    if (eyeStyle >= 2){ //oval eyes
    push();
    fill(255);
    ellipse((width-375), (height-300), 50, 35); // left eye
    ellipse((width-225), (height-300), 50, 35); // right eye

    noStroke();
    fill(0);
    ellipse((width-375), (height-300), 30, 30); //left pupil
    ellipse((width-225), (height-300), 30, 30); // right pupil
    pop();
    }
    else if (eyeStyle >= 1) { //round owl eyes
        stroke(5);
        push();
        fill(255);
        ellipse((width-375), (height-300), 60, 60); //left eye
        ellipse((width-225), (height-300), 60, 60); //right eye
        noStroke();
        fill(0);
        ellipse((width-375), (height-300), 45, 45); //left pupil
        ellipse((width-225), (height-300), 45, 45); //right pupil
        pop();
    }
    else { //closed eyes
        arc((width-375), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //left eye
        arc((width-225), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //right eye
    }

    // BLUSHING CHEEKS
    if (cheekBlush >= 0.5){
        push();
        fill(blushColor);
        noStroke();
        ellipse((width-400), blushHeight, blushSize, blushSize); //left blush
        ellipse((width-200), blushHeight, blushSize, blushSize); //right blush
        pop();
    }

    //MOUTH
    noFill();
    strokeWeight(5);
    if (mouthStyle >= 2){ //closed smile
        arc((width-300), (height-280), 200, 140, QUARTER_PI, QUARTER_PI + HALF_PI);
    }
    else if (mouthStyle >= 1){ //open smile
        push();
        fill(0);
        translate((width-300), (height-220));
        rotate(TWO_PI);
        arc(0, 0, 75, 50, 0, PI, CHORD);
        pop();
    }
    else { //shocked mouth
        fill(0);
        ellipse((width/2), (height - 205), 50, 50);
    }

    //NOSE
    if (noseStyle >= 2) {
        noFill();
        arc((width-300), (height-270), 45, 55, QUARTER_PI, QUARTER_PI + HALF_PI); //down-turned nose
    } else if (noseStyle >= 1){ //nostrils
        push();
        noStroke();
        fill(0);
        ellipse((width-310), (height-250), 10, 10); //left nostril
        ellipse((width-290), (height-250), 10, 10); //right nostril
        pop();
    }
    else { //pink button nose
        fill(blushColor); 
        ellipse((width/2), (height-260), 20, 20);
    }

    //BANGS
    fill(0); //right bang
    push();
    translate((width-225), height-350);
    rotate(-QUARTER_PI - HALF_PI);
    arc(0, 0, 250, 200, 0, PI);
    pop();

    translate((width-375), (height-350)); //left bang
    rotate(QUARTER_PI + HALF_PI);
    fill(0);
    arc(0, 0, 250, 200, 0, PI);
}

function mousePressed(){
    cheekBlush = random(0, 1); //randomize blush
    blushSize = random(30, 60); //randomize blush size
    blushHeight = random(350, 360); //randomize blush's Y-axis
    bunY = random(200, 400); //randomize hair buns' Y-axis
    Bun = random(150, 250); //randomize hair buns' size
    noseStyle = random(0,3); //randomize nose shape
    faceStyle = random(0,3); //randomize face shape
    mouthStyle = random(0,3); //randomize mouth shape
    eyeStyle = random(0,3); //randomize eyes
}

For this project, I drew inspiration from the Moomin books, the logo for Utz Snacks, the mascots for PBS Kids, and the logo for a Korean supermarket franchise. The generative process became a lot easier once I started incorporating if-else statements!

Project-02-Variable Face

sketch

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 300;
var eyeWidth= 40;
var mouth=5;
var eyeball=10;
var nose=20;
var ear=150;
var inside=120;
var tongue=20;


 
function setup() {
    createCanvas(480, 600);
}
 
function draw() {
    background(200);// face shape
    fill(224, 211, 220);
    ellipse(width / 2, height /2, faceWidth,  faceHeight); 
    fill(252, 249, 243); //eye
    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);
    fill(0,0,0); //eyeball
    circle(eyeLX+5,height /2, eyeball,eyeball);
    circle(eyeRX-5,height/2,eyeball,eyeball);
    fill (0,0,0);//nose
    circle(width / 2, height /1.9, nose,nose);
    fill(224, 211, 220); //leftear
    circle(width/4,height/3,ear,ear);
    fill(224, 211, 220); //rightear
    circle(width/1.4,height/3,ear,ear);
    fill(245, 186, 227); //inside
    circle(width/3.7, height/2.8,inside,inside);
    circle(width/1.42, height/2.8,inside,inside);
    strokeWeight (2);
    fill(247, 134, 209) //mouth
    var mouth = width/7 - faceWidth * 0.5;
    ellipse( width/ 2, height/1.6, mouth, mouth/2);
    
}
 
function mousePressed() {
   
    faceWidth = random(200, 300);
    faceHeight = random(280, 300);
    eyeSize = random(20, 50);
    mouth = random(2,5);
    eyeball= random(7,19);
    hair = random(110,160);
    ear = random(140,170);
    inside = random(110,115);
}

I started off by using the original code given for this project. I randomly inserted numbers and variables to see how each code works out. Then I started to design the basic shapes and narrowed it down to the small details.