Project-02-Variable-Face – Page 3 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

William Su – Project 02 – Variable Face

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-02
//data-width="640" data-height="480"

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var diam = 170;
var smileDiam = 0.2;
var endAng = 0.5;
var startAng = 0.1;
var fillnum = 100;
var weightnum = 1;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	stroke(0);
    strokeWeight(weightnum);
    background(180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    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);
    arc(width / 2, height / 2, smileDiam * diam, smileDiam * diam, startAng * PI, endAng * PI);
}
 
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, 200);
    eyeSize = random(10, 30);
    startAng = random(0.05, 0.3);
    endAng = random(0.4, 0.8);
    smileDiam = random(0.2, .4);
    fillnum1 = random (50, 200);
    fillnum2 = random (100, 250);
    fillnum3 = random (10, 150);
    fill(fillnum1, fillnum2, fillnum3);
    weightnum = random(1,5);
}

In this project, I utilized the template given and added 3 extra areas of variability. The first one is different smiles, the second is the color of the face, the third is the stroke width.

YouieCho-Project-02-Variable-Face

sketch

/*Youie Cho
  Section E
  minyounc@andrew.cmu.edu
  Project-02-Variable-Face*/

var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 150;
var cloudW = 40;
var cloudH = 60;
var cloudWs = 30;
var cloudHs = 40;
//eye color
var r = 100;
var g = 100;
var b = 100;
//background color
var rB = 73;
var gB = 129;
var bB = 242;


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

function draw() {
    background(250, 140, 155);
    fill(rB, gB, bB);
    rect(30, 25, 570, 380);

    //body
    noStroke();
    fill(224, 194, 121);
    beginShape();
    curveVertex(100, 600);
    curveVertex(180, 600);
    curveVertex(220, 360);
    curveVertex(400, 330);
    curveVertex(480, 600);
    curveVertex(400, 600);
    endShape();

    //ears
    fill(224, 194, 121);
    ellipse(260, 200, faceWidth / 4 - 10, faceHeight / 2);
    ellipse(380, 200, faceWidth / 4 + 10, faceHeight / 2 + 10);

    //face
    fill(242, 216, 155);
    ellipse(width / 2, 270, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;

    //eye
    fill(r, g, b);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    noFill();

    //nose
    fill(171, 129, 26);
    triangle(285, 260, 315, 260, 300, 283);

    //mouth
    noFill();
    strokeWeight(3);
    stroke(84, 50, 9);
    bezier(280, 283, 285, 287, 290, 287, 300, 283);
    bezier(300, 283, 310, 287, 315, 287, 320, 283);

    //cloud
    fill(225)
    noStroke();
    ellipse(160, 100, cloudWs, cloudHs);
    ellipse(180, 100, cloudW, cloudH);
    ellipse(200, 100, cloudW, cloudH);
    ellipse(220, 100, cloudW, cloudH);
    ellipse(240, 100, cloudWs, cloudHs);

    //cheeks
    fill(255, 189, 158);
    ellipse(235, 273, faceWidth / 5, faceHeight / 6);
    ellipse(380, 273, faceWidth / 4, faceHeight / 6);

}

function mousePressed() {
    faceWidth = random(180, 220);
    faceHeight = random(150, 200);
    eyeSize = random(10, 20);
    cloudW = random(40, 50);
    cloudH = random(50, 70);
    cloudWs = random(20, 40);
    cloudHs = random(30, 40);
    r = random(26, 99);
    g = random(34, 102);
    b = random(4, 201);
    rB = random(73, 209);
    gB = random(129, 224);
    bB = random(242, 255);
}

It was fun to try changing colors and shapes, and I think it was especially meaningful to learn to make these changes within various relationships. It also made me make a connection to the generative art I looked at Looking Outwards.

Cathy Dong – Project 2 – Variable Face

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 2-Variable Face
*/

//Basics
var bodyG = 219;
var bodyB = 96;
var headW = 178;
var headH = 79;
var eyeW = 120;
var eyeH = 100;
var eyeR = 30;
var mX = 320;
var mY = 350;
var mW = 30;
var mH = 20;
var speedX = 1;
var startX = 0;
var speedY = 1;
var startY = 0;
var bananaX = 0;
var bananaY = 51;


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

function draw() {
	background(233, 229, 228);

	//hair variables
	hairLx = width / 2 - headW / 2;
	hairRx = width / 2 + headW / 2;
	hairY = headH + 20;

	//eye variables
	ballLx = 315 - eyeW / 2;
	ballRx = 325 + eyeW / 2;
	ballY = 213;

	//body shape
	stroke(0);
	strokeWeight(.5);
	fill(251, bodyG, bodyB);
	beginShape();
	curveVertex(146, 480);
	curveVertex(171, 349);
	curveVertex(174, 200);
	curveVertex(hairLx, hairY);
	curveVertex(width / 2, headH);
	curveVertex(hairRx, hairY);
	curveVertex(466, 200);
	curveVertex(469, 349);
	curveVertex(494, 480);
	curveVertex(494, 480);
	endShape(CLOSE);

	//cloth
	stroke(8, 30, 56);
	strokeWeight(1);
	fill(94, 126, 163);
	beginShape();
	curveVertex(211, 480);
	curveVertex(212, 448);
	curveVertex(186, 423);
	curveVertex(160, 385);
	curveVertex(167, 358);
	curveVertex(188, 394);
	curveVertex(221, 418);
	curveVertex(320, 429); //cloth mid point
	curveVertex(419, 418);
	curveVertex(452, 394);
	curveVertex(473, 358);
	curveVertex(480, 383);
	curveVertex(454, 423);
	curveVertex(441, 448);
	curveVertex(443, 480);
	curveVertex(443, 480);
	endShape(CLOSE);

	//pocket
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	beginShape();
	curveVertex(277, 480);
	curveVertex(276, 460);
	curveVertex(320, 468);
	curveVertex(364, 460);
	curveVertex(363, 480);
	curveVertex(363, 480);
	endShape(CLOSE);

	//button
	stroke(48, 77, 112);
	strokeWeight(2);
	fill(68, 100, 143);
	circle(219, 435, 20);
	circle(219, 435, 10);
	circle(430, 435, 20);
	circle(430, 435, 10);

	//Left hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairLx, hairY);
	line(width / 2, headH, hairLx - 30, hairY + 20);
	line(width / 2, headH, hairLx + 50, hairY - 20);

	//Right Hair
	stroke(0);
	strokeWeight(5);
	noFill();
	line(width / 2, headH, hairRx, hairY);
	line(width / 2, headH, hairRx + 30, hairY + 20);
	line(width / 2, headH, hairRx - 50, hairY - 20);

	//Eye
	stroke(0);
	strokeWeight(.5);
	fill(225);
	ellipse(315 - eyeW / 2, 233, eyeW, eyeH);
	ellipse(325 + eyeW / 2, 233, eyeW, eyeH);

	//Eyeball
	ballLx = mouseX;
	ballLx = constrain(ballLx, 315 - eyeW + eyeR, 315 - eyeR);
	ballRx = mouseX;
	ballRx = constrain(ballRx, 325 + eyeR, 325 + eyeW - eyeR);
	ballY = mouseY;
	ballY = constrain(ballY, 233 - eyeH / 2 + eyeR, 233 + eyeH / 2 - eyeR);
	//dark
	noStroke();
	fill(80, 67, 60);
	circle(ballLx, ballY, eyeR);
	circle(ballRx, ballY, eyeR);
	//light
	noStroke();
	fill(53, 40, 33);
	circle(ballLx, ballY, eyeR / 2);
	circle(ballRx, ballY, eyeR / 2);

	//glass
	stroke(148, 148, 148);
	strokeWeight(20);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass shadow
	stroke(175, 174, 175);
	strokeWeight(10);
	noFill();
	ellipse(255, 245, 125, 131);
	ellipse(385, 245, 125, 131);

	//glass belt
	stroke(96, 75, 58);
	strokeWeight(2);
	fill(62, 58, 54);
	rect(165, 230, 23, 27);
	rect(456, 230, 20, 27);

	//Mouse
	stroke(0);
	strokeWeight(.5);
	fill(225);
	triangle(mX, mY, mX - mW / 2, mY - mH, mX + mW / 2, mY - mH);

	//BANANA TEXT
	stroke(198, 143, 79);
	strokeWeight(3);
	fill(225, 181, 143);
	if (keyIsPressed) {
		if ((key == 'a') || (key == 'A')) {
			speedX = -1;
		}
		if ((key == 's') || (key == 'S')) {
			speedX = 1;
		}
		if ((key == 'w') || (key == 'W')) {
			speedY = -1;
		}
		if ((key == 'z') || (key == 'Z')) {
			speedY = 1;
		}
	} 

	textSize(100);
	text('BANANA', startX, startY);
	startX += speedX;
	startY += speedY;
	startX = constrain(startX, 0, width - 450);
	startY = constrain(startY, 80, height - 10);


	//Banana fruit
	bananaX = mouseX;
	bananaX = constrain(bananaX, 0, width - 107);
	bananaY = mouseY;
	bananaY = constrain(bananaY, 52, height - 27);
	stroke(206,154,8);
	strokeWeight(1);
	fill(255, 226, 0);
	beginShape();
	curveVertex(bananaX, bananaY);
	curveVertex(bananaX + 54, bananaY - 3);
	curveVertex(bananaX + 78, bananaY - 16);
	curveVertex(bananaX + 90, bananaY - 31);
	curveVertex(bananaX + 90, bananaY - 48);
	curveVertex(bananaX + 98, bananaY - 50);
	curveVertex(bananaX + 97, bananaY - 33);
	curveVertex(bananaX + 103, bananaY - 31);
	curveVertex(bananaX + 107, bananaY - 22);
	curveVertex(bananaX + 90, bananaY + 11);
	curveVertex(bananaX + 62, bananaY + 24);
	curveVertex(bananaX + 47, bananaY + 27);
	curveVertex(bananaX + 25, bananaY + 23);
	curveVertex(bananaX + 13, bananaY + 20);
	curveVertex(bananaX + 3, bananaY + 8);
	endShape(CLOSE);

}

function mousePressed(){
	bodyG = random(220, 95);
	bodyB = random(95, 220);
	headW = random(150, 200);
	headH = random(75, 100);
	eyeW = random(100, 130);
	eyeH = random(100, 110);
	eyeR = random(20, 40);
	mX = random(315, 325);
	mY = random(340, 380);
	mW = random(25, 50);
	mH = random(15, 45);
}

I had fun making minions. I sketched out the basic shapes based on a picture. The idea is to let his eye balls follow the banana, and make his face features and body color change with mouse click. The text “BANANA” move when pressing “w,” “a,” “z,” and “s,” capitalized or not.

SooA Kim– Project 02 – Variable Face

sketch

I had fun sketching this Ghibli character called Kaonashi or “no face”. It was a good exercise for me to learn how mouthPressed function and random() work by changing the size and color using different variables.

Reference photos:

/*
SooA Kim
Section D
sookim@andrew.cmu.edu
Project-02-Variable-Face
*/

var eye = 40;
var eyeH = 300;
var faceW = 240;
var mouthH = 10;
var color1 = 255;
var tri1 = 150;
var tri2 = 148;
var tri3 = 184;
var mouthOpen = 1;


function setup() {
    createCanvas(480, 640);
    background (25, 170, 180);
}

function draw() {
    //blackcoat
    strokeWeight(3); 
    fill("black");
    beginShape();
    curveVertex(25, 640);
    curveVertex(25, 640);
    curveVertex(30, 500);
    curveVertex(100, 220);
    curveVertex(240, 120);
    curveVertex(380, 220);
    curveVertex(450, 500);
    curveVertex(455, 640);
    curveVertex(455, 640);
    endShape();

    //face 
    noStroke();
    fill(color1);
    ellipse(240, 330, faceW, 340); 
  
    //eyes
    fill(0);
    ellipse (180, eyeH, eye, eye/2);
    ellipse (300, eyeH, eye, eye/2);
    //shadow?
    ellipse (180, 330, 35, 8);
    ellipse (300, 330, 35, 8);

     //mouth
     ellipse (240, 450, mouthH * 5, mouthH);
  
    //top triangles
    fill(tri1, tri2, tri3);
    triangle (160, 270, 175, 230, 190, 270);
    triangle (290, 270, 300, 230, 320, 270);
    //bottom triangles
    triangle(160, 350, 175, 420, 190, 350);
    triangle(290, 350, 300, 420, 320, 350);  
    ellipse(240, 475, 30, 10);
  
    //mouth2 open
    if (mouthOpen >= 1) {
        fill(0); //black
    }
    else {
        fill(255);   
        ellipse(240, 560, 250, 100);
        fill("red");
        ellipse(240, 560, 250, 55);
        stroke(1);
        line(130, 510, 130, 547);
        line(150, 510, 150, 540);
        line(180, 510, 180, 537); 
        line(210, 510, 210, 533);
        line(240, 510, 240, 533);
        line(270, 510, 270, 533);
        line(300, 510, 300, 535);
        line(330, 525, 330, 540);
        line(350, 525, 350, 547);
        line(130, 573, 130, 620);
        line(150, 580, 150, 620);
        line(180, 585, 180, 620);
        line(210, 587, 210, 620);
        line(240, 587, 240, 620);
        line(270, 586, 270, 620);
        line(300, 585, 300, 620);
        line(330, 580, 330, 620);
        line(350, 573, 350, 620);
    }
}
  
function mousePressed(){
    eye = random(5, 40);
    faceW = random (180, 300);
    mouthH = random(5, 25);
    eyeH = random(305, 320);
    tri1 = random(150, 255);
    tri2 = random(0, 255);
    tri3 = random(0, 255);
    mouthOpen = random(0, 4);
    color1 = random(0, 255);
}

Aaron Lee – Project-02 – Variable Faces

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-02-variable faces
*/

//variables
var x = 5;
var y = 5;
var r = 255;
var g = 255;
var b = 255;
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;


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


function draw() {
   background(r,g,b);

   //eyes
   var eyeLX = width / 2 - faceWidth * 0.35;
   var eyeRX = width / 2 + faceWidth * 0.35;
   ellipse(eyeLX, height / 2 + x, eyeSize, eyeSize + x);
   ellipse(eyeRX, height / 2 + y, eyeSize, eyeSize + y);

   //face
   noFill();
   beginShape();
   curveVertex(width / 2, 160);
   curveVertex(width / 2, 160);
   curveVertex(width - 160  + x, 200 + x);
   curveVertex(width - 120 + x, height / 2 + x);
   curveVertex(width - 160 + x, height - 200 + x);
   curveVertex(width / 2, height - 160 + x);
   curveVertex(160 + x, height - 200 + x);
   curveVertex(120 + x, height / 2 + x);
   curveVertex(160 + x, 200 + x);
   curveVertex(width / 2, 160);
   curveVertex(width / 2, 160);
   endShape();

   //hat
   fill(50);
   rect(width / 5 + x, height / 8 + 50 + x, width / 2 + 50 + y, 100 + y);

   //nose
   noFill();
   beginShape();
   curveVertex(width / 2, height /2);
   curveVertex(width / 2, height /2);
   curveVertex(width / 2 + x, 350 + x);
   curveVertex(width / 2, 370);
   curveVertex(width / 2, 370);
   endShape();

   //mouth
   noFill();
   beginShape();
   curveVertex(width / 2 - 20, height - 230);
   curveVertex(width / 2 - 20, height - 230);
   curveVertex(width / 2 - 10 + y, height - 230 + y);
   curveVertex(width / 2 + 10 + x, height - 230 + x);
   curveVertex(width / 2 + 20, height - 230);
   curveVertex(width / 2 + 20, height - 230);
   endShape();
}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    x = random(-30,30);
    y = random(-30,30);
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
}

I utilized curveVertx () command to create smooth transitions of the curves.

Claire Yoon-Project-02-Variable-Face

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Assignment-02
  */
  // variables for face.
    var eyeSize = 35;
    var pupilSize = 25;
    var faceWidth = 110;
    var faceHeight = 110;
    var facecolorR = 255
    var facecolorG= 204;
    var facecolorB= 77;
    var brow = 185;
    var mouthx= 60
    var mouthy= 40

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

  function draw() {
    background(249);
    noStroke (0)
    //face
    fill(250, facecolorG, facecolorB)
    ellipse(width / 2, height / 2, faceWidth*2,  faceHeight*2);

    //outer eye
    fill("white")
    var eyeLX = width / 2 - faceWidth * 0.40;
    var eyeRX = width / 2 + faceWidth * 0.40;
    ellipse(eyeLX, height / 2.05, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.05, eyeSize, eyeSize);

    //pupil
    fill(103, 70, 0)
    var pupilLX = width / 2 - faceWidth * 0.40;
    var pupilRX = width / 2 + faceWidth * 0.40;
    ellipse(pupilLX, height / 2.05, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2.05, pupilSize, pupilSize);

    //blush
    fill(238, 134, 154)
    var eyeLX = width / 2 - faceWidth*0.7;
    var eyeRX = width / 2 + faceWidth*0.7;
    ellipse(eyeLX, height / 1.8, eyeSize, eyeSize);
    ellipse(eyeRX, height / 1.8, eyeSize, eyeSize);

    //eyebrow
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(250, 200);
    curveVertex(250, 200);
    curveVertex(270, brow);
    curveVertex(300, brow);
    curveVertex(300, brow);
    endShape();

    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    beginShape();
    curveVertex(340, brow);
    curveVertex(340, brow);
    curveVertex(370, brow);
    curveVertex(390, 200);
    curveVertex(390, 200);
    endShape();

    //mouth
    stroke(103, 70, 0);
    strokeWeight(9);
    noFill();
    arc(width / 2, height / 1.8, mouthx, mouthy, TWO_PI, PI);
  }

  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(100, 130);
    faceHeight = random(100, 130);
    facecolorG = random(76, 250);
    facecolorB = random(36, 120);
    eyeSize = random(0,50)
    pupilSize = random(20, 30);
    brow = random(180,200)
    mouthx = random(40,80)
    mouthy= random(30,70)
  }

I gained inspiration from the emoji and set some values for things such as the eyebrows, eyes and the color of the face to show the difference in emotions when clicking on it.

Kristine Kim-Project 02-Variable-Face

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project-02-variable-Face

var headW = 350;
var headH = 300;
var head_colorR = 250;
var head_colorG = 250;
var head_colorB = 150;
var eyesize = 100;
var pupilsize = 60;
var blushW = 60;
var blushH = 30;
var blush_colorR = 250;
var blush_colorG = 180;
var blush_colorB = 242;
var buttons = 50;
var buttons_colorR = 231;
var buttons_colorG = 129;
var buttons_colorB = 247;
var eyebrowLU = 30;
var eyebrowLD = 100;
var eyebrowRU = 450;
var eyebrowRD = 100;
var backgroundR = 242;
var backgroundG = 161;
var backgroundB = 90;


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

function draw() {
    background(backgroundR,backgroundG,backgroundB);
//body
    fill ('#74eda7');
    noStroke();
    triangle(width/2, height/4.5, 480,640,0,640);
// head
    fill (head_colorR, head_colorG, head_colorB);
    noStroke();
    rectMode(CENTER);
    rect(width/2, height/2.5, headW, headH);
    //rect(width/7.5, height/6, headW, headH);
//eyes    
    var eyeL = width/2 - headW*0.25;
    var eyeR = width/2 + headW*0.25;
    fill('white');
    stroke(255, 204, 0);
    strokeWeight(6);
    ellipse(eyeL,height/2.75, eyesize, eyesize);
    ellipse(eyeR,height/2.75, eyesize, eyesize);
// pupil
    var pupilL = width/2 - headW*0.25;
    var pupilR = width/2 + headW*0.25;
    fill ('#3d4540');
    noStroke();
    ellipse(pupilL, height/2.75,pupilsize, pupilsize);
    ellipse(pupilR, height/2.75,pupilsize, pupilsize);
// left eyebrow 
    stroke('black');
    strokeWeight('20');
    noSmooth();
    line(eyebrowLU,70,190,160);
    line(190,160,30,eyebrowLD);
// right eyebrows
    line(300, 160, 450,eyebrowRD);
    line(eyebrowRU,70,300,160);
//mouth
    fill('#eb876c');
    noStroke();
    quad (width/2-50, height/2, width/2+50,height/2, width/2 +100, height/2+ 100, width/2 -100, height/2+100);
//teeth
    fill('white');
    stroke('#dbdbdb');
    strokeWeight('5');
    rect(width/2-25,height/1.85,50,50);
    rect(width/2+25,height/1.85,50,50);
//blush
    var blushLeft = width/2.25- headW*0.25;
    var blushRight = width/1.8 + headW*0.25;
    stroke('#f25a5a');
    strokeWeight('5');
    fill(blush_colorR,blush_colorG,blush_colorB);
    ellipse(blushLeft, height/2, blushW, blushH);
    ellipse(blushRight, height/2, blushW, blushH);
//buttons
    stroke('#d1d1d1');
    strokeWeight('3');
    fill(buttons_colorR, buttons_colorG,buttons_colorB);
    ellipse (width/2, height/1.4, buttons, buttons);
    ellipse (width/2, height/1.2, buttons, buttons);
    ellipse (width/2, height/1.05, buttons, buttons);

}
//mousepressed
function mousePressed(){
    headW = random(275,430);
    headH = random(250,350);
    head_colorR = random(0,400);
    head_colorG = random(0,300);
    head_colorB = random(0,400);
    blush_colorR = random(0,400);
    blush_colorG = random(0,500);
    blush_colorB = random(0,400);
    eyesize = random(85,230);
    pupilsize = random(20,85);
    blushH = random(30,70);
    blushW = random(60,100);
    buttons_colorR = random(0,300);
    buttons_colorG = random(0,400);
    buttons_colorB = random(0,200);
    buttons = random(40,70);
    backgroundR = random(0,200);
    backgroundG= random(0,200);
    backgroundB = random(0,200);

   
}

I started this project first by sketching an imagery character. Last project, I used Adobe illustrator to help me point out coordinates but this time, I wanted to challenge myself but starting on a blank canvas. It was more challenging and time consuming than last time but definitely helped me understand the concept of coding and building my own code.

Shannon Ha – Project 02 – Variable Face

sketch

var bunW = 106;
var bunH = 88;

var bangsShowH = 166;
var bangsShowW = 305;

var bangsHideH = 83;
var bangsHideW = 305;

var faceWidth = 329;
var faceHeight = 267;

var eyesW = 44;
var eyesH = 31;

var pupilsA = 12;
var pupilsB = 12;
var pupilsXL = 235;
var pupilsY = 259;
var pupilsXR = pupilsXL + 140;


var mouthW = 74;
var mouthH = 21;
var mouthX = 336;
var mouthY = 341;

var backgroundR = 102;
var backgroundG = 45;
var backgroundB = 145;

var haircolor = 0;

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

function draw() {

//background
    background(backgroundR,backgroundG,backgroundB);

//face
    fill(240,199,156);
    noStroke();
    ellipse(320 , 267, faceWidth,  faceHeight);

//bun hair
    fill(haircolor);
    noStroke();
    ellipse(208,143,bunW,bunH);
    ellipse(431,143,bunW,bunH);

//bangs hair
    fill(haircolor);
    noStroke();
    ellipse(320,192,bangsShowW,bangsShowH);

    rectMode(RADIUS);
    noStroke();
    fill(240,199,156);
    rect(321,252,bangsHideW/2,bangsHideH/2);

//hair pins
    stroke(238,28,72);
    strokeWeight(3);
    line(172,175,254,120);
    line(386,120,467,175);

//eyes
    fill(255);
    noStroke();
    ellipse(243,256,eyesW,eyesH);
    ellipse(381,256,eyesW,eyesH);

//pupils
    fill(0);
    ellipse(pupilsXL,pupilsY,pupilsA,pupilsB);
    ellipse(pupilsXR,pupilsY,pupilsA,pupilsB);

//nose
    fill(170,134,77);
    ellipse(304,291,30,21);
    fill(240,199,156);
    ellipse(305,285,30,21);

//mouth
    fill(0);
    ellipse(mouthX,mouthY,mouthW,mouthH);
}

function mousePressed() {
    faceWidth = random(245,348);
    faceHeight = random(272,309);
    bangsHideW = random(236,250);
    bangsHideH = random(50,100);
    haircolor = random(0,255);
    eyesW = random(44,60);
    eyesH = random(31,52);
    pupilsXL = random(229,260);
    pupilsY = random(248,267);
    pupilsA = random(11,29);
    pupilsB = random(11,30);
    mouthX = random(284,378);
    mouthY = random(338,364);
    mouthW = random(33,92);
    mouthH = random(15,63);
    backgroundR = random(0,225);
    backgroundG = random(0,225);
    backgroundB = random(0,225);
}

For this project, I explored how to make a variety of expressions using random variables. At first it was a challenge to figure out the relationships between each variable, but it got easier after I made several errors.

CJ Walsh – Project 02 – Variable Faces

sketch

var headHeight = 236;
var headWidth = 213;
var hairHeight = 236;
var hairWidth = 213;
var eyeHeight = 26.5;
var eyeWidth = 26.5;
var mouthHeight = 14.389;
var mouthWidth = 93.842;
var eyeY = 225;

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

function draw() {
	background('#9BE58C');
	// hair
	fill('#664E42');
	ellipse (320 + hairWidth/2, 240, 200, 200);
	ellipse (320 - hairWidth/2, 240, 200, 200);
	// hair
	fill('#664E42');
	ellipse (320, 240, hairWidth*1.5, hairHeight*1.5);
	 var eyeLX = width / 2 - headWidth * 0.25;
    var eyeRX = width / 2 + headWidth * 0.25;
	// head 
	fill ('#E1C1B5');
	ellipse (320, 240, headWidth, headHeight);
	// eyes 
	fill ('#77A7D9');
	ellipse (eyeLX, eyeY, eyeWidth, eyeHeight);
	ellipse (eyeRX, eyeY, eyeWidth, eyeHeight);
	// mouth 
	fill ('#D880AA');
	ellipse (320, 285, mouthWidth, mouthHeight);
}


function mousePressed() {
	headWidth = random (100, 300);
	headHeight = random (100, 300);
	eyeHeight = random (10, 50);
	eyeWidth = random (10, 40);
	mouthHeight = random (5, 50);
	mouthWidth = random (20, 70);
	eyeY = random (180, 250);
	hairHeight = random (100, 350);
	hairWidth = random (100, 350);
}

My inspiration started out as being inspired by my self portrait from last week. I wanted to make simple faces that when changed randomly would create fun combinations and expressions. I used Illustrator to sketch out examples of my ideas and used those sketches as my starting ellipses in my code. I thought adding some ellipses around the face could create some fun structures that looked like hair. After finishing my work, I realized it reminded a lot of Adventure Time when the humans wear their animal hats.

Xiaoyu Kang – Project 02 – Variable Face

sketch

/*
Xiaoyu Kang
Section B
xkang@andrew.cmu.edu
Assignment-02-B
*/
var circles = 200;
var faceW = 280;
var faceH = 300;
var hairL = 200; 
var eyes = 30;
var backC = 100;

function setup() {
    createCanvas(640, 640);
    background(242,180,180);
}
function draw() {
	var hairW = faceW + 90;
    noStroke();
//background circles
    fill(158,37,circles);
    ellipse(30,80,backC,backC);
    ellipse(100,320,backC,backC);
    ellipse(300,60,backC,backC);
    ellipse(530,30,backC,backC);
    ellipse(540,580,backC,backC);
    ellipse(600,280,backC,backC);
    ellipse(50,520,backC,backC);
//hair
    fill(221,184,85);
    ellipse(320,310,hairW,faceH + 90);
    rect(320 - hairW * 0.5,310,hairW,hairL);
//face
    fill(242,232,221);
    ellipse(320,320,faceW,faceH);
//hair
    fill(221,184,85);
    arc(320, 200, 280, 80, 180, PI + QUARTER_PI, CHORD);
//neck 
    fill(242,232,221);
    rect(280,440,80,80);
//cloth
    fill(229,128,circles);
    rect(270,490,100,20);
    ellipse(320,640,400,280);
//ear
    fill(242,232,221);
    ellipse(320 - faceW * 0.5,320,50,90);
    ellipse(320 + faceW * 0.5,320,50,90);
//eyes
    fill("grey");
    ellipse(320 - 60,300,eyes,eyes);
    ellipse(320 + 60,300,eyes,eyes);
    fill("white");
    ellipse(320 - 70,290,10,10);
    ellipse(320 + 50,290,10,10);
//eyebrowsL
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(230,270);
    vertex(240,275);
    vertex(270,270);
    vertex(280,260);
    endShape(CLOSE);
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(410,270);
    vertex(400,275);
    vertex(370,270);
    vertex(360,260);
    endShape(CLOSE);
//nose
    fill(195,154,133);
    strokeWeight(10);
    beginShape();
    vertex(295,340);
    vertex(310,350);
    vertex(330,350);
    vertex(345,340);
    endShape(CLOSE);
//lips
    fill(216,135,128);
    strokeWeight(10);
    beginShape();
    vertex(270,380);
    vertex(290,400);
    vertex(350,400);
    vertex(370,380);
    endShape(CLOSE);
}
function mousePressed() {
	circles = random(100,250);
    faceW = random(260,300);
    faceH = random(280,320);
    hairL = random(180,380);
    eyes = random(20,35);
}

I mainly focused on writing a code that will allow shape changes and color changes. The size of the person’s face are made changeable by clicking the mouse. And since the size of the hair is based on the size of the face, the hair changes as the face changes. The size of the person’s eyes also varies. I also made the color of both the clothings and the circles in the background changeable. The color varies in a range of different kind of red and purple.