Category: Project-02-Variable-Face

jamieh-Project-02-Variable-Face

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 02
*/

 // Simple beginning template for variable face.
 var eyeSize = 20;
 var faceWidth = 100;
 var faceHeight = 150;
 var eyebrowSize = 30;
 var eyebrowThickness = 1.5;
 var noseWidth = 4;
 var noseHeight = 25;
 var neckWidth = faceWidth/4;
 var neckHeight = neckWidth/2;


 width = 640;
 height = 480;

 var shirtW = 150;
 var shirtH = 100;
 var shoulder = 50;
 var buttonSize = 5;
 var handSize = 30;



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

 }

 function draw() {
    noStroke();
    background(229, 242, 255);
    
//Hair (Behind)
    noStroke();
    fill(0, 0, 0);
    rect(width/2-faceWidth/2, height/2, faceWidth*1.08, faceHeight);

//Neck
    noStroke();
    fill(255, 235, 217);
    rect(width/2-neckWidth/2, height/2+faceHeight/2-5, neckWidth, neckHeight*1.25);

//Shirt
    noStroke();
    fill(256, 256, 256);
    rect(width/2-shirtW/2, height/2+faceHeight/2.1+neckHeight, shirtW, shirtH, shoulder, shoulder, 0, 0);

//NeckTriangle
    fill(255, 235, 217);
    triangle(
        width/2-neckWidth/2, height/2+faceHeight/2.1+neckHeight,
        width/2-neckWidth/2+neckWidth, height/2+faceHeight/2.1+neckHeight,
        width/2, height/2+faceHeight/2.1+neckHeight*2.1);

//Face Colour
    fill(255, 242, 230);
    
//Face shape
    ellipseMode(CENTER);
    ellipse(width/2, height/2, faceWidth, faceHeight);
 
//Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(width/2, height/2+height/12, faceWidth/3, faceHeight/8);
    fill(255, 242, 230);
    ellipse(width/2, height/2+height/14, faceWidth/2, faceHeight/8);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(1);
    arc(width/2, height/2+height/12, faceWidth/3, faceHeight/8, 0, PI);


//Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Outer (white)
    noStroke();
    fill(256, 256, 256);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Middle (Light brown)
    fill(153, 90, 0);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);

    //Inner (Dark brown)
    fill(51, 25, 0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);

//Eyebrows
    noFill();
    stroke(0, 0, 0);

    strokeWeight(eyebrowThickness);
    arc(eyeLX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(eyeRX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

//Nose (does not change atm)
	//252, 234, 208 AND 255, 238, 215

    stroke(255, 229, 204);
    strokeWeight(3);
    line(width/2, height/2-noseWidth, width/2+noseWidth, height/2+noseHeight); 
    strokeWeight(1.5);
    line(width/2+noseWidth, height/2+noseHeight, width/2-noseWidth*1.2, height/2+noseHeight*1.2);

    //Nose shadow
    stroke(255, 243, 230);
    strokeWeight(4);
    line(width/2+noseWidth, height/2-noseWidth, width/2+noseWidth*2, height/2+noseHeight); 
    strokeWeight(2);
    line(width/2+noseWidth*2, height/2+noseHeight, width/2, height/2+noseHeight*1.2);

    //Nostril
    strokeWeight(3);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);


//Hair
	noStroke(51, 17, 0);
	strokeWeight(2);  
    
    fill(51, 17, 0);
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);             //Anchor point 1
    bezierVertex( 
                 width/2+faceWidth/8, height/2-faceHeight/3,        //Control point 1
                 width/2+faceWidth, height/2+faceHeight/8,          //Control point 2
                 width/2+faceWidth/3, height/2+faceHeight*1.25);    //Anchor point 2
    bezierVertex(
                 width/2+faceWidth/1.5, height/2+faceHeight,
                 width/2+faceWidth*1.1, height/2-faceHeight/2,
                 width/2-faceWidth/8, height/2-faceHeight/2);
    endShape();
    
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);              //bottom hair top point 
    bezierVertex(
                 width/2-faceWidth/1.25, height/2+faceHeight/8,      //bottom hair control point
                 width/2-faceWidth/6, height/2+faceHeight*1.5,       //bottom hair control point
                 width/2-faceWidth/2, height/2+faceHeight);
    bezierVertex(
                 width/2-faceWidth/3, height/2+faceHeight*0.8,
                 width/2-faceWidth, height/2-faceHeight/3,
                 width/2-faceWidth/8, height/2-faceHeight/2);        //top hair top point
    endShape();


//Shirt Buttons
    noStroke();
    fill(0, 0, 0);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize, buttonSize);

    fill(217, 217, 217);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize*0.75, buttonSize*0.75);

//Table
    fill(102, 51, 0);
    rect(0, height/2+faceHeight/2.1+neckHeight+shirtH, width, height-(height/2+faceHeight/2.1+neckHeight+shirtH));

//Hand
    fill(255, 235, 217);
    ellipse(width/2-shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    ellipse(width/2+shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    //thumb
    ellipse(width/2-shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);
    ellipse(width/2+shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);

}

 function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 175);
    eyeSize = random(10, 30);
    eyebrowThickness = random(1, 5);
    eyebrowSize = random(25, 35);
    noseWidth = random(2, 5);
    noseHeight = random(15, 20);
    shirtW = random(100, 300);
    shoulder = random(25, 100);
    buttonSize = random(5, 10);

}

This project is inspired by freshmen 15. Through writing this code, I understand the purpose of using variables and how it makes the code cleaner.

aerubin-Project-02-Variable-Face-Section-C

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-02

var eye = 10;
var pupil = 15;
var eyebrow = 1;
var eyelines = 0;
var n = 10; //n for nose
var ear = 1;
var lip = 0;
var ll = 1; //ll for lip length
var jaw = 1;
var chin = 10;
var skull = 1;
var eyebrowcolor = 1;
var lipcolor = 0;

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

function draw() {
    background(254, 247, 244);

    //Jaw Line
    noFill();
    stroke(1);
    beginShape();
    curveVertex(600*jaw, 400*jaw);
    curveVertex(500, 365);
    curveVertex(310, 380);
    curveVertex(300, 300);
    curveVertex(16*chin, 27*chin);
    endShape();

    //Lower Lip
    fill(222+lipcolor, 157+lipcolor, 160+lipcolor);
    beginShape();
    curveVertex(70, 100);
    curveVertex(350, 260);
    curveVertex(300, 300);
    curveVertex(300*ll, 280-lip);
    curveVertex(360, 270);
    endShape();

    //Upper Lip
    beginShape();
    curveVertex(180, 230);
    curveVertex(353, 270);
    curveVertex(300, 260);
    curveVertex(300*ll, 280-lip);
    curveVertex(350, 260);
    curveVertex(110, 140);
    endShape();
    
    fill(254, 247, 244);
    noStroke();
    triangle(350, 252, 329, 264, 360, 271);

    //Cupids Bow
    stroke(1);
    line(300, 260, 30.4*n, 24.0*n);

    //nose
    noFill();
    arc(30.8*n, 22.4*n, 30, 30, 100.3, 96);
    arc(29.1*n, 23.0*n, 70, 20, 120, 91);
    arc(26.9*n, 22.0*n, 40, 34, 90, 79.2);
    arc(25.2*n, 2.6*n, 7.0*n, 36.5*n, 102.05, 95.8);
    line(26.1*n, 20.2*n, 301, 148);

    //nose bridge
    arc(299, -34, 70, 365, 102.01, 95.8);
    
    //Top of Head
    arc(458, 151, 290, 300*skull, 3.29, 4);
    arc(454, 145, 300, 270*skull, 4, 6.5);

    //Back of Neck
    arc(782, 300, 400, 600, 90, 79.2);

    //jaw curve
    arc(490, 337.5, 80, 55, 100.33, 95.7);

    //front of neck
    arc(358, 595, 200, 430, 99, 97);

    //eye
    arc(35.5*eye, 14.4*eye, 45, 45, 90.5, 79.2);

    line(33.6*eye, 13.0*eye, 38.0*eye, (14.2*eye)+eyelines);
    line(33.7*eye, 15.6*eye, 38.0*eye, (14.2*eye)+eyelines);

    //pupil
    fill(100+pupil, 126+pupil, 35+pupil);
    ellipse(33.8*eye, 14.4*eye, 10, 18);
    fill(0);
    ellipse(33.4*eye, 14.4*eye, 5, 10);

    //ear
    noFill();
    arc(480*ear, 188*ear, 80, 95, 98.6, 96);
    arc(470*ear, 188*ear, 80, 75, 99, 94.3);

    //eyebrow
    fill(122/eyebrowcolor, 55/eyebrowcolor, 22/eyebrowcolor);
    noStroke();
    rect(335*eyebrow, 110*eyebrow, 30, 10);
    triangle(365*eyebrow, 110*eyebrow, 365*eyebrow, 120*eyebrow, 389*eyebrow, 125*eyebrow);
}

function mousePressed() {
    pupil = random(0, 100);
    eyebrow = random(.97, 1.03);
    eye = random(9.7, 10.5);
    eyelines = random(-4, 10);
    n = random(9.4, 10.6);
    ear = random(.94, 1.06);
    lip = random(-8, 9);
    ll = random(.97, 1.02);
    jaw = random(.84, 1.1);
    chin = random(6, 14);
    skull = random(.9, 1.06);
    eyebrowcolor = random(.5, 1.4);
    lipcolor = random(-40, 70);
}

Since I drew a face shown in the frontal view last week, I decided to try to draw the profile view for this assignment. My work began on a piece of paper to draw out the outline of the face (shown below). Then I brainstormed the different ways of which I could make the complex outline of the human profile utilizing code. I came to the conclusion that “curveVertex” would be useful in forming the jawline and lips, and I could use a combination of arcs and lines for the majority of the remainder.

I was inspired by the vast variations of faces we see everyday and I tried to emulate the uniqueness of each individual’s profile by changing features such as placement of the ear, placement of the eye, the strength of the jaw line, and many more. In order to emphasize the effect placement of facial features has on facial identification, hair was not necessary as it covers up the natural shape of the skull which contains a multitude of variations in itself. All in all, I am very satisfied with the product and how dramatically the face changes when clicked.

jooheek-Project02-Variable-Face

sketch

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-02

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

var faceSize = 200;
var cheekSize = 230;
var earsSize = 50;
var eyeHeight = 50;
var eyeWidth = 30;
var hippoR = 149;
var hippoG = 186;
var hippoB = 198;
var backgroundR = 0;
var backgroundG = 77;
var backgroundB = 104;

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

	noStroke();
	//hippo ears
	var earsRX = width/2 - faceSize*0.25;
	var earsLX = width/2 + faceSize*0.25;
	var earsY = height/2 - faceSize*0.25;

	fill(hippoR, hippoG, hippoB);
	ellipse(earsRX, earsY, earsSize, earsSize);//outer ear right

	fill(hippoR, hippoG, hippoB);
	ellipse(earsLX, earsY, earsSize, earsSize);//outer ear left

	fill(hippoR-20, hippoG-20, hippoB-20);
	ellipse(earsRX, earsY, earsSize*0.8, earsSize*0.8);//inner ear right

	fill(hippoR-20, hippoG-20, hippoB-20);
	ellipse(earsLX, earsY, earsSize*0.8, earsSize*0.8);//inner ear left


	//hippo face
	fill(hippoR, hippoG, hippoB);
	ellipse(width/2, height/2, faceSize, faceSize*0.75);

	//hippo Eye
	var eyeRX = width/2 + faceSize*0.25;
	var eyeLX = width/2 - faceSize*0.25;
	
	fill(255, 255, 255);
	ellipse(eyeLX, height/2, eyeWidth, eyeHeight);//left eye white

	fill(255, 255, 255);
	ellipse(eyeRX, height/2, eyeWidth, eyeHeight);//right eye white

	fill(0, 0, 0);
	ellipse(eyeLX, height/2, eyeWidth/2, eyeHeight/2);//left eye black

	fill(0, 0, 0);
	ellipse(eyeRX, height/2, eyeWidth/2, eyeHeight/2);//right eye black
	
	//hippo cheek
	fill(hippoR+20, hippoG+20, hippoB+20);
	ellipse(width/2, 325, cheekSize, cheekSize*0.75);

	//hippo nose
	var noseRX = width/2 - cheekSize*0.25;
	var noseLX = width/2 + cheekSize*0.25;
	var noseY = height/2 + cheekSize*0.25;
	
	fill(hippoR+40, hippoG+40, hippoB+40);
	ellipse(noseRX, noseY, earsSize, earsSize);//hippo noseright light

	fill(hippoR+40, hippoG+40, hippoB+40);
	ellipse(noseLX, noseY, earsSize, earsSize);//hippo noseleft light

	fill(hippoR-10, hippoG-10, hippoB-10);
	ellipse(noseRX, noseY, earsSize*0.6, earsSize*0.6);//hippo noseright dark

	fill(hippoR-10, hippoG-10, hippoB-10);
	ellipse(noseLX, noseY, earsSize*0.6, earsSize*0.6);//hippo noseleft dark

}

function mousePressed() {
	faceSize = random(70, 270);
	cheekSize = random(100, 300);
	earsSize = random(50, 100);
	eyeHeight = random(50, 150);
	eyeWidth = random(30, 130);
	hippoR = random(0, 255);
	hippoG = random(0, 255);
	hippoB = random(0, 255);
	backgroundR = random(0, 255);
	backgroundG = random(0, 255);
	backgroundB = random(0, 255);
	clear();

}

For this project, I wanted to do something simple yet fun to do, which is why I chose to do an animal, specifically a hippo. I think this assignment really let me understand how and why variables are used.

hdw – Project 2 – Variable Face

sketch

var picker = 1
var types = [1, 2, 3, 4, 5];
var backgroundR = 255
var backgroundG = 255
var backgroundB = 255

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

function draw(){
    background(255);
    fill(backgroundR-30,backgroundG-30,backgroundB,100);
    noStroke();
    rect(0,0,height,width);

  var head = width * 2/5;
  var eyes = width * 1/10;
  var lips = width * 1/30;

  //shadow
  noStroke();
  fill(backgroundR+10,backgroundG+10,backgroundB+10);
  ellipse(width*.4,height*.6,head,head);


  if(picker == 1){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    arc(width*3/5,height*.5,eyes,eyes,0,180);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5,height*.6,lips,lips);
    ellipse(width*.5,height*.6+lips,lips,lips);
    }

  if (picker == 2){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,340,160);
    arc(width*3/5,height*.5,eyes,eyes,340,160);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5+5,height*.6+1+10,.7*lips,.7*lips);
    ellipse(width*.5,height*.6+lips*.7*.5+lips*.5+10,lips,lips);
    }

  if (picker == 3){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,20,200);
    arc(width*3/5,height*.5,eyes,eyes,20,200);
    //lips
    stroke(250,0,0);
    arc(width*.5-5,height*.6+10,lips,lips,210,60);
    }

  if (picker == 4){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,180,0);
    arc(width*3/5,height*.5,eyes,eyes,180,0);
    //lips
    noFill();
    stroke(255,0,0);
    strokeWeight(10);
    arc(width*.5,height*.6,2*lips,2*lips,0,180);
    //ellipse(width*.5,height*.6+lips,lips,lips);
  }

  if(picker == 5){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    ellipse(width*3/5,height*.5,eyes,eyes);
    //lips
    stroke(255,0,0);
    strokeWeight(10);
    noFill();
    ellipse(width*.5,height*.6+.5*lips,lips,lips);
    }

  //blush
  fill(255,backgroundG,backgroundB);
  noStroke();
  ellipse(width*2/5,height*.6, 2*lips, 2*lips);
  ellipse(width*3/5,height*.6, 2*lips, 2*lips);
}

function mousePressed(){
    picker = random(types);
    backgroundR = random(0,250);
    backgroundG = random(0,250);
    backgroundB = random(0,250);
}

Process:

Made some initial concept sketches. Used mmiller5’s project 02 as a reference for the use of variables and commands of the five fixed variable faces. Stella Han helped me figure out where to put the variables for var types and var picker, because I initially posted them in the draw function and not as a global variable. Soonho Kwon helped me figure out how to get the background and shadow opacity to behave. Initially the shadow didn’t show up because I had it set to a variable opacity in the same colors as the background. I reversed the opacity so that the background had less intensity and created a white filler first so the color would show.

ikrsek-Section C-Project-02-Variable-Face

sketch

//Isadora Krsek
//Section B
//Ikrsek@andrew.cmu.edu
//Project-2

//face variables
var headWidth = 120
var headHeight = 140
var skinR = 230
var skinG = 168
var skinB = 150
var eyeR = (30);
var eyeG = (5);
var eyeB = (0);
var earR = (210);
var earG = (160);
var earB = (133);
var earWidth = (26);
var earHeight = (50);
var eyeWidth = (30);
var eyeHeight = (20);
var irisR = (35);
var irisG = (27);
var irisB = (40);
var irisWidth = (15);
var irisHeight = (18);
var blushR = (188);
var blushG = (119);
var blushB = (187);
var blushSize = (20);
var blushOpa = (150);
var noseR = (140);
var noseG = (90);
var noseB = (80);
var upLipR = (170);
var upLipG = (86);
var upLipB = (80);
var loLipR = (189);
var loLipG = (100);
var loLipB = (103);
var browR = (30);
var browG = (20);
var browB = (20);
//nose variables
var noseVertX3 = (2);
var noseVertX4 = (4);
var noseVertX6 = (4);
var noseVertY2 = (30)
var noseVertY3 = (6);
var noseVertY4 = (4);
var noseVertY6 = (6);
var noseVertY7 = (0);
//lip variables
//upper & lower
var v2 = (8);
var v3 = (6);
var v4 = (6);
var v5 = (8);
var v1andv4 = (4);
var v2andv3 = (1);
//just lower
var loLipY = (6);
//brow variables
var browVX2and4 = (10);
var browVX3 = (22);
var browVY2 = (10);
var browVY4 = (4);

function setup() {
    createCanvas(640,480);
    background(188,216,220);
}

function mom() {
    noStroke();
    angleMode(DEGREES);
  //hair back
    fill(23,21,28);
    ellipse(518,150,150,210);
    fill(188,216,220);
    rect(420,155,210,200);
  //ears
    fill(205,174,156);
    ellipse(462,142,25,45);
    ellipse(575,142,25,45);
  //complexion
    fill(220,191,168);
  //head
    ellipse(518,136,113,167);
  //hair bangs
    fill(255);
    stroke(255);
    //ellipse(500,50,5,5);
    //ellipse(518,85,5,5);
    
    stroke(23,21,28)
    fill(23,21,28);
    beginShape();
      curveVertex(500,55);
      curveVertex(514,85);
      curveVertex(533,96);
      curveVertex(570,98);
      curveVertex(540,52);
    
    endShape(CLOSE);
    noStroke();
  //blush 
    fill(233,208,187,172);
    ellipse(482,160,20,20);
    ellipse(552,160,20,20);
  //eye bags 
    fill(197,153,145);
    push();
    translate(487,132);
    rotate(176);
    ellipse(0,0,39,32);
    pop();
    push();
    translate(549,132);
    rotate(8);
    ellipse(0,0,39,32);
     pop();
  //eyes
    fill(240,220,216);
    push();
    translate(488,129);
    rotate(176);
    ellipse(0,0,30,18);
    pop();
    push();
    translate(548,129);
    rotate(8);
    ellipse(0,0,30,18);
    pop();
  //iris
    fill(35,7,0);
    ellipse(488,126,20,14);
    ellipse(548,126,20,15);
  //eyebrows: left, then right 
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(473,111); //outer base
     curveVertex(480,106); //triangle peak 
     curveVertex(502,112); // innermost point
     curveVertex(480,109)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(560,111);
     curveVertex(550,106);
     curveVertex(528,112);
     curveVertex(550,109);
    endShape(CLOSE);
  //nose
    beginShape();
     noFill();
     stroke(135,80,46);
     strokeWeight(3.2);
     vertex(508,130);
     vertex(508,170);
     vertex(514,176);
     vertex(520,172);
     vertex(523,170);
     vertex(523,165);
    endShape();
  //lips
    //upper
    beginShape();
     fill(164,98,76);
     stroke(164,98,76);
     strokeWeight(1);
     curveVertex(500,190);
     curveVertex(507,186);
     curveVertex(515,189);
     curveVertex(523,186);
     vertex(532,190);
    endShape(CLOSE);
    //lower
    beginShape();
     fill(194,115,95);
     stroke(194,115,95);
     strokeWeight(1);
     curveVertex(500,190);
     vertex(532,190);
     curveVertex(515,194);
    endShape(CLOSE);
}

function dad(){
    noStroke();
    //ears
    fill(212,152,133);
    ellipse(75,148,35,50);
    ellipse(226,148,35,50);
    //complexion
    fill(221,167,148);
    //head
    ellipseMode(CENTER);
    ellipse(150,150,152,170);
    //blush
    fill(188,119,112,150)
    ellipse(102,168,40,40);
    ellipse(192,168,40,40);
    //eyes
    fill(240,220,216);
    push();
    translate(112,135);
    rotate(4);
    ellipse(0,0,31,22);
    pop();
    push();
    translate(182,135);
    rotate(174);
    ellipse(0,0,31,22);
    pop();
    //iris
    fill(44,27,40);
    ellipse(182,133,15,18);
    ellipse(112,133,15,18);
    //eyebrows
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(93,123); //outer base
     curveVertex(105,106); //triangle peak 
     curveVertex(123,123); // innermost point
     curveVertex(105,120)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(200,123);
     curveVertex(185,106);
     curveVertex(170,123);
     curveVertex(185,120);
    endShape(CLOSE);
    //nose
    beginShape();
     noFill();
     stroke(164,93,83);
     strokeWeight(3.2);
     vertex(134,130);
     vertex(134,160);
     vertex(132,165);
     vertex(144,171);
     vertex(160,167);
     vertex(163,165);
     vertex(163,160);
    endShape();
    //lips
      //upper
    beginShape();
     fill(180,80,91);
     stroke(180,80,91);
     strokeWeight(1);
     curveVertex(130,190);
     curveVertex(137,182);
     curveVertex(145,185);
     curveVertex(153,182);
     vertex(162,190);
    endShape(CLOSE);
      //lower
    beginShape();
     fill(189,93,103);
     stroke(189,93,103);
     strokeWeight(1);
     curveVertex(130,190);
     vertex(163,190);
     curveVertex(155,200);
     curveVertex(139,200);
    endShape(CLOSE);
    //butt chin 
    stroke(164,93,83);
    strokeWeight(2);
    line(148,220,148,228);
    //glasses
    noFill();
    stroke(56);
    strokeWeight(3.1);
    ellipse(108,142,50,50);
    ellipse(185,142,50,50);
    curve(110,142,131,132,160,132,155,142);
      
    
}

function words(){
  textSize(30);
  fill(255)
  noStroke();
  text("Dad",122,275);
  text("Mom",490,270);
  textSize(24);
  text("..what I could've looked like...",180,474)
  
  
}

function draw() {
    var noseStartX = (width/2-5);
    var noseStartY = (height/1.3 - headHeight/7);
    var LipStartX = (width/2-15);
    var LipStartY = (height/1.3 + headHeight/4);
    var LeftBrowStartX = (width/2-46);
    var LeftBrowStartY = (height/1.4-headHeight/12);
    var RightBrowStartX = (width/2+46);
    var RightBrowStartY = (height/1.4-headHeight/12);
    
    mom();
    dad();
    noStroke();
    
    //OFFSPRING TIME
     //baby's ears
    fill(earR,earG,earB);
    ellipse(width/2-(headWidth/2),height/1.3,earWidth,earHeight); //left ear
    ellipse(width/2+(headWidth/2),height/1.3,earWidth,earHeight); //right ear 
     //baby's head
    fill(skinR,skinG,skinB);
    ellipse(width/2,height/1.3,headWidth,headHeight);
     //eyes 
    fill(240,220,216); //whites of the eyes
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),eyeWidth,eyeHeight); //left whites of the eyes
    ellipse(width/2+(headWidth/5),(height/1.3 - (headHeight/7)),eyeWidth,eyeHeight); //right whites of the eyes 
    fill(irisR,irisG,irisB); //iris color
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
    ellipse(width/2+(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
     //baby's cheeks
    fill(blushR,blushG,blushB,blushOpa);
    ellipse(width/2-(headWidth/5)-20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //left cheek 
    ellipse(width/2+(headWidth/5)+20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //right cheek 
     //baby's nose
    beginShape();
     noFill();
     stroke(noseR,noseG,noseB);
     strokeWeight(3.2);
     vertex(noseStartX,noseStartY);
     vertex(noseStartX,noseStartY+noseVertY2);
     vertex(noseStartX-noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4,noseStartY+noseVertY3+noseVertY4+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX6,noseStartY+noseVertY2);
    endShape();
     //baby's mouth
       //upper
    beginShape();
      fill(upLipR,upLipG,upLipB);
      stroke(upLipR,upLipG,upLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      curveVertex(LipStartX+v2,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3,LipStartY+v2andv3);
      curveVertex(LipStartX+v2+v3+v4,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3+v4+v5,LipStartY);
    endShape(CLOSE)
       //lower
    beginShape();
      fill(loLipR,loLipG,loLipB);
      stroke(loLipR,loLipG,loLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      vertex(LipStartX+v2+v3+v4+v5,LipStartY)
      curveVertex(LipStartX+v2+v3+v4,LipStartY+loLipY);
      curveVertex(LipStartX+v2,LipStartY+loLipY);
    endShape(CLOSE)
     //baby's eyebrows
       //left
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(LeftBrowStartX,LeftBrowStartY);
     vertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY2);
     curveVertex(LeftBrowStartX+browVX2and4+browVX3,LeftBrowStartY);
     curveVertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY4);
    endShape(CLOSE);
      //right
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(RightBrowStartX,RightBrowStartY);
     vertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY2);
     curveVertex(RightBrowStartX-browVX2and4-browVX3,RightBrowStartY);
     curveVertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY4);
    endShape(CLOSE);
  
    words();
}

function mousePressed(){
/*each of the ranges are based on the proportions/tones of 
the parents who bestow similarities to themselves onto their children*/
    background(188,216,220);
    headWidth = random(113,162);
    headHeight = random(137,170);
    //range for skin color
    skinR = random(220,221);
    skinG = random(167,191);
    skinB = random(148,170);
    //range for eye color
    eyeR = random(35-44);
    eyeG = random(7-27);
    eyeB = random(0-48);
    //range for ear color
    earR = random(205,212);
    earG = random(152,174);
    earB = random(133,156);
    //range for ear size
    earHeight = random(45,50);
    earWidth = random(25,35);
    eyeWidth = random(20,31);
    eyeHeight = random(18,22);
    //range for iris color
    irisR = random(35,80);
    irisG = random(7,27);
    irisB = random(0,40);
    //range for iris size 
    irisWidth = random(8,20);
    irisHeight = random(8,18);
    //range for blush color
    blushR = random(188,233);
    blushG = random(119,208);
    blushB = random(112,187);
    //range for blush size (the value will be the same for width and height bc it is a circle)
    blushSize = random(20,40);
    //range for opacity 
    blushOpa = random(140,172);
    //range for nose colors
    noseR = random(135,164);
    noseG = random(80,93);
    noseB = random(46,83);
    //range for nose sizes
    noseVertX3 = random(0,12);
    noseVertX4 = random(0,10);
    noseVertX6 = random(3,8);
    noseVertY2 = random(30,40)
    noseVertY3 = random(5,6) // + you add to vert y2
    noseVertY4 = random(0,6) // + you add to vert y3
    noseVertY6 = random(22,48)
    noseVertY7 = random(0,5)
    //range for upper lip colors 
    upLipR = random(164,180); 
    upLipG = random(80,98);
    upLipB = random(76,91);
    //ranger for upper lip sizes
    v1andv4 = random(1,8);
    v2andv3 = (.15,.5)
    //range for lower lip colors
    loLipR = random(189,194);
    loLipG = random(93,115);
    loLipB = random(95,103);
    //ranger for lower lip sizes
    loLipY = random(3,10);
    //range for brow colors 
    browR = random(23,80);
    browG = random(6,2);
    browB = random(2,28);
    //range for brow sizes
    browVX2and4 = random(7,22);
    browVX3 = random(18,22);
    browVY2 = random(5,17);
    browVY4 = random(3,4);
}

I’ve always wondered about different ways I could’ve looked based on my parent’s appearances, and so I took the opportunity to simulate something like that in this project. I first took the time to draw out each of my parents in p5.js and then randomized the measurements of those characteristics so that everytime you click the mouse, another possibility appeared. Overall, I am mostly glad I don’t look like most of the “offspring” possibilities.

juyeonk – project02 – face

sketch

var eyeSize = 20;
var upperfaceWidth = 180;
var lowerfaceWidth = 160;
var faceHeight = 240;
var eyelength = 25;
var eyewidth = 25
var earheight = 50;
var noseheight = 70;
var nostrilsize = 15;
var hornheight = 90;
var faceR = 0;
var faceG = 0;
var faceB = 0;




function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(96, 158, 81);
    
    var lefteyeposition = width/2 - upperfaceWidth*0.25;
    var righteyeposition = width/2 + upperfaceWidth*0.25;
    var eyeposition = height/2 - faceHeight*0.25;
    
    //face of the horse
    noStroke();
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    quad(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth /2, height/2 - faceHeight/2, width/2 + lowerfaceWidth/4, height/2 + faceHeight/2, width/2 - lowerfaceWidth/4, height/2 + faceHeight/2);
    
   
    //left ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight);
    
    //left inner ear
    fill(0);
    triangle(width/2 - upperfaceWidth/2 + 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth - 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight * 1.25);
    
    //right ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 + upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, 50);
    
    //right inner ear
    fill(0);
    triangle(width/2 + upperfaceWidth/2 - 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth + 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, earheight * 1.25);
    
    //left eye
    fill(0);
    ellipse(lefteyeposition, eyeposition, eyewidth, eyelength);
    
    //right eye
    fill(0);
    ellipse(righteyeposition, eyeposition, eyewidth, eyelength);
    
    //nose
    fill(56, 45, 27);
    ellipse(width/2, height/2 + faceHeight/2, lowerfaceWidth * 0.7, noseheight);
    
    //left nostril
    fill(0);
    ellipse(width/2 - 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    //right nostril
    fill(0);
    ellipse(width/2 + 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    
    //unicorn
    //unicorn's horn
    fill(255);
    triangle(width/2, height/2 - faceHeight/2 - hornheight, width/2 - 0.1 * upperfaceWidth, height/2 - faceHeight/2, width/2 + 0.1 * upperfaceWidth, height/2 - faceHeight/2);
    
    

    
    
}
 

function mousePressed() {
    hornheight = random(0, 100);
    upperfaceWidth = random(180, 220);
    lowerfaceWidth = random(140, 240);
    faceHeight = random(220, 260);
    nostrilsize = random(15, 20);
    eyewidth = random(20, 50);
    eyelength = random(20, 30);
    faceR = random(0, 40);
    faceG = random(0, 40);
    faceB = random(0, 40);
}

I tried to program it so that the species of the horse would change when you click on it.
At first I tried to input three types of horses: a regular one, a unicorn, and a pegasus to make the horn pop up if the horse is a unicorn and make the wings pop up if the horse is a pegasus. But I had some trouble incorporating conditionals with the mouthpressed function, so I had to be satisfied with the changes in color of the horse’s skin and the and the sizes of its features. I made the range for the value of the hornheight 0-100 so that the horse would sometimes look like it doesn’t have a horn, but I hope I could make that happen by using conditionals.

Project 02 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-02

var colorR = 100;
var colorG = 150;
var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var blushSize = 35;
var noseWidth = 10;
var noseHeight = 10;
var mouthWidth = 70;
var mouthHeight = 45;
var colorR2 = 100;
var hairDecorationType = 1;

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

function draw() {
	//Background 
    background(colorR, colorG, 200);
	noStroke();
    fill(255);
    ellipse(width/2, height/2, 300, 350);

    //Face
    fill(242, 214, 180);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    ellipse(width/2+100, height/2, 40, 40);
    ellipse(width/2-100, height/2, 40, 40);

    //Eyes
    var eyeLX = width/2-faceWidth*0.18;
    var eyeRX = width/2+faceWidth*0.18;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize+12, eyeSize+12);
    ellipse(eyeRX, height/2, eyeSize+12, eyeSize+12);
    fill(0);
    ellipse(eyeLX+2.5, height/2, eyeSize, eyeSize+3);
    ellipse(eyeRX-2.5, height/2, eyeSize, eyeSize+3);
    fill(255);
    ellipse(eyeLX+3, height/2, eyeSize-15, eyeSize-15);
    ellipse(eyeRX-3, height/2, eyeSize-15, eyeSize-15);

    //Blush
    var blushLX = width/2-faceWidth*0.32;
    var blushRX = width/2+faceWidth*0.32;
    fill(250, 185, 225, 150);
    ellipse(blushLX, height/2+faceHeight*0.15, blushSize*1.2, blushSize); 
    ellipse(blushRX, height/2+faceHeight*0.15, blushSize*1.2, blushSize);

    //Hair
    stroke(0);
    strokeWeight(5);
    noFill();
	beginShape();
	curveVertex(width/2, height/2-100);
	curveVertex(width/2, height/2-100);
	curveVertex(width/2-15, height/2-125);
	curveVertex(width/2-15, height/2-135);
	curveVertex(width/2-10, height/2-145);
	curveVertex(width/2, height/2-150);
	curveVertex(width/2+20, height/2-140);
	curveVertex(width/2+10, height/2-130);
	curveVertex(width/2+10, height/2-130);
	endShape();

	//Nose
    var noseX = width/2
    var noseY = height/2+faceHeight*.12
    stroke(150, 120, 90, 100);
    strokeWeight(3);
    noFill();
    arc(noseX, noseY, noseWidth, noseHeight, PI, TWO_PI);

    //Mouth
	fill(222, 86, 88);
	noStroke();
	arc(width/2, height/2+faceHeight*.2, mouthWidth, mouthHeight, TWO_PI, PI);

    //Tooth
	fill(255);
    strokeWeight(1);
	rect(width/2-.2*mouthWidth, height/2+40, .2*mouthWidth, .2*mouthHeight);
	rect(width/2+1, height/2+40, .2*mouthWidth, .2*mouthHeight);

	hairDecoration();
}

function ribbon() {
	//Ribbon
	fill(colorR2, 100, 200);
	triangle(width/2, height/2-100, width/2+40, height/2-70, width/2+40, height/2-130);
	triangle(width/2, height/2-100, width/2-40, height/2-70, width/2-40, height/2-130);
	fill(colorR2-50, 100, 200);
	ellipse(width/2, height/2-100, 25, 25);
}

function hairTie() {
	//Hair Tie
	fill(colorR2, 200, 100);
	ellipse(width/2-16, height/2-100, 35, 35);
	ellipse(width/2+16, height/2-100, 35, 35);
}

function hairDecoration() {
    if (hairDecorationType === 1) {
        ribbon();
    }
    else if (hairDecorationType === 2) {
        hairTie();
    }
}

function mousePressed() {
    colorR = random(190, 255);
    colorG = random(0, 190);
    eyeSize = random(15, 30);
    blushSize = random(20, 40);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    mouthWidth = random(40, 80);
    mouthHeight = random(40, 60);
    colorR2 = random(0, 255);
    hairDecorationType = Math.floor((random()*2)+1);
}

I wanted to create an interactive baby face with changing eyeSize, noseSize, blushSize, mouthSize, and hairDecoration. Some of the elements such as hair and face, remain the same throughout.

adev—Project 03—Variable—Face

adev_Project_02

var skinR = 201;
var skinG = 143;
var skinB = 101;

var rectX = 350;
var rectY = 200;
var rectWidth = 150;
var rectHeight = 230;

var mouthW = 50;
var mouthH = 50;

var eyeW = 40;
var eyeH = 20;

var pt = 18;

var personas = ["JOE likes raw vegetables and long walks on the beach", "JOEY like iced green tea and planning weddings", "JOESEPH likes tofu turkey and Nathan Lane movies", "JOLENE likes peanut butter cups and Tibetan arts and crafts", "JOANNE likes lavendar hand cream and red neon lights", "JOESEPHINE likes spicy oats and museum gift shops", "JOAN likes candied pineapple and matcha espresso fusions", "JOEL likes caramel custard and hot wheels", "JOHANNES likes exposed red brick walls and blue turtlenecks"];

var index = 0;
 
function setup() {
 createCanvas (640,480);    
 background(255,233,10);
}

function draw() {
    
    background(255,233,10); 
    
    //body
    fill(skinR, skinG, skinB);
  stroke (220,120,40);
    strokeWeight(10);
    rect(rectX, rectY, rectWidth, rectHeight);
    
    //mouth
     fill (255,0,0); 
    noStroke();
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH +40, 0, 2*HALF_PI);
    
    //teeth
     fill (240); 
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH - 20, 0, 2*HALF_PI);
    
    //eye1
    fill(255);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeH, 15);
    
    //eye2 
    fill(255);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeH, 15);
    
    //personas
  fill(50);
  textFont("Georgia");
  textSize(pt);
   
  text(personas[index], 100,  100);
    
}
    
    
function mousePressed (){
    //changing skin colour
    skinR = random(200,80);
    skinG = random (90,90);
    skinB = random (101,40);
    
    //changing body proportions
    rectX = random(150,450);
    rectY = random(150,300);
    rectWidth = random (150,200);
    rectHeight = random (150, 400);
    
    //changing eye proportions
    eyeW = random (30,70);
    eyeH = random (20,30);
    
    //changing mouth proportions
    mouthH = random (10,200);
    mouthW = random (10,200);
    
    //persona generator 
    index = index + 1;
    if (index == personas.length) {
    index = 0;
  }
    
  }

I wanted to have fun with the Project and so I decided to make characters out of my different faces. I like how each face has a fun, kind of weird but unique personality. I thought they all looked like “Joes” so I made them all pretty similar. I started off wanting to do really complicated things that I had to simplify but it was a good opportunity to play with p5.js, experiment and learn about arrays.

ashleyc1-Section C-Project-02-Variable-Face

sketch

//Ashley Chan   
//Section C
//ashleyc1@andrew.cmu.edu
//Assignment-02-A


var cupShape = 260;
var cupWidth = 200;
var cupBrim = 50;
var liquidWidth = 200;
var liquidHeight = 10;
var randomInteger = 1.25;
var eyeSize = 50;
var eyeX = 100;
var pupilLX = 285;
var pupilLY = 295;
var pupilRX = 390;
var pupilRY = 295;
var drinkColor = 100;
var steamMvt = 270;
var mouthX = 320;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(242, 234, 188);

//handle
    noStroke();
    fill(255);
    ellipse(cupWidth + 250, 310, 150, 100);

    fill(242, 234, 188);
    ellipse(cupWidth + 250, 310, 100, 50);

//cup body

    fill(255);
    noStroke();
    rect(cupWidth , 200, (cupWidth * randomInteger), 240, 40, 40, cupShape, cupShape);

//cup brim

    fill(220);
    ellipse(cupWidth/2 * 3.25, 220, 200, cupBrim);
    
   
//drink
//when mouse clicked, liquid color will change and adjust to new shape of cup

    fill(drinkColor, 49, 30);
    ellipse(cupWidth/2 * 3.25, 220, liquidWidth - 20, cupBrim - 10);

//eyes
//when mouse clicked, width of cup changes

     fill(0);
     var eyeX = cupWidth/2;
     ellipse(eyeX*2.75, 300, eyeSize, eyeSize);
     ellipse(eyeX*3.75, 300, eyeSize, eyeSize);

//pupils
//when mouse clicked, pupils go crazy

     fill(255);
     stroke(5);
     ellipse(pupilRX, pupilRY, 15, 15);
     ellipse(pupilLX, pupilLY, 15, 15);

//mouth

    push();
    noFill();
    stroke(50);
    arc(cupWidth + 125, 380, 50, 10, 0, PI);
    pop();

//blush

    fill(249, 210, 243);
    noStroke();
    ellipse(eyeX + 175, 330, 50, 20);
    ellipse(eyeX + 275, 330, 50, 20);

//steam

    noFill();
    stroke(0);
    push();
    translate((cupWidth/2) - 80, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) - 20, 10);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) + 50, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();


}
 
function mousePressed() {
 
    cupShape = random(30, 80);
    cupWidth = random(200, 210);
    cupBrim = random(20, 50);
    liquidWidth = random(170, 200);
    liquidHeight = random(20, 30);
    randomInteger = random(1.2, 1.4);
    drinkColor = random(100, 200);
    steamMvt = random(270, 300);
    eyeSize = random(30, 70);
    pupilLX = random (270, 295);
    pupilLY = random(290, 305);
    pupilRX = random(380, 390);
    pupilRY = random(290, 310);


}

Initially, I didn’t know what face I wanted to create so I drew the first thing I saw at the time, which was a poster of a coffee cup in Morewood Gardens. Although I’m not particularly happy with my final result because I wanted to add additional elements that didn’t work out, I’m still proud that, while creating this, I began developing the ability to troubleshoot and understand where to find the problem in my code whenever the index revealed something I wasn’t intending.

Nayeon_Project02_Variable face

nayeon-variable_faces

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-02_Variable Faces


var pupil = 70;
var eyeS = 100;
var faceW = 300;
var faceH = 240;
var bodyW = 300;
var bodyH = 300;
var feetW = 50;
var feetH = 60;
var wingW = 100;
var wingH = 170;
var r = 166;
var g = 95;
var b = 38;
var dir = 1;
var speed = 0.5;



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

function draw() {
    background(250);
    noStroke();

//body
    fill(r, g, b);
    ellipse((width / 2), 420, bodyW, bodyH);

//ears
    push();
    translate(160, 200);
    rotate(30);
    translate(-160, -200);
    arc(150, 220, 180, 130, 0, 180);
    pop();

    push();
    translate(350, 350);
    rotate(-30);
    translate(-350, -350);
    arc(400, 220, 180, 130, 0, 180);
    pop();


//head
    ellipse((width / 2), (height / 2), faceW, faceH);

    fill(235, 207, 174);
    ellipse((width / 2), (height / 2) + 10, (faceW - 50), (faceH - 30));

    fill(207, 145, 74);
    ellipse((width / 2) - 50, (height / 2), eyeS + 40, eyeS + 20);
    ellipse((width / 2) + 50, (height / 2), eyeS + 40, eyeS + 20);

//eyes
    fill(260);
    ellipse((width / 2) - 50, (height / 2), eyeS, eyeS);
    ellipse((width / 2) + 50, (height / 2), eyeS, eyeS);

    fill(r -100, g -100, b -100);
    ellipse((width / 2) - 50, (height / 2), pupil, pupil);
    ellipse((width / 2) + 50, (height / 2), pupil, pupil);

    pupil += dir * speed;
    if (pupil > 80) {
        dir = -dir;
        pupil = 80;
    } else if (pupil < 50) {
        dir = -dir;
        pupil = 50;
    }

//beak
    fill(219, 164, 0);
    ellipse((width / 2), (height / 2) + 40, 40, 70);

//feet
    ellipse((width / 2) - 50, 570, feetW, feetH);
    ellipse((width / 2) + 50, 570, feetW, feetH);

//feather
    fill(235, 207, 174);
    triangle((width / 2) - 30, 450, (width / 2) -20, 470, (width / 2) -10, 450);
    triangle((width / 2) - 10, 450, (width / 2), 470, (width / 2) + 10, 450);
    triangle((width / 2) + 30, 450, (width / 2) +20, 470, (width / 2) +10, 450);


//wings
    fill(r -20, g -20, b -20)
    ellipse((width / 2) - 120, 480, wingW, wingH)
    ellipse((width / 2) + 120, 480, wingW, wingH)

}

function mousePressed() {

    faceW = random(250, 350);
    faceH = random(200, 280);
    eyeS = random(80, 120);
    pupil = random(50, 90);
    bodyW = random(250, 350);
    bodyH = random(250, 350);
    feetW = random(30, 70);
    feetH = random(50, 90);
    wingW = random(70, 130);
    wingH = random(150, 200);
    r = random(130, 190);
    g = random(70, 115);
    b = random(0, 50);

  }

 

I made a draft of a cute owl and painted it with Photoshop, and started to code shapes. Now it became bit odd for ordinary owl, but I like the randomness shapes of this creature!