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

Rebecca Kim – Project 02 – Variable Face

/*
Rebecca Kim
Section C
rykim@andrew.cmu.edu
Project-O2
*/


//define variables
var eyeSize = 20;
var faceWidth = 250;
var faceHeight = 200;
var colorX = 200;
var petalY1 = 50;
var petalY2 = 30;
var wordNumber = 0;
var colorR = 255;
var colorG = 120;
var colorB = 120;
var y1 = 285;
var y2 = 295;
var smileY=320;

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

function draw() {
	//face
	strokeWeight(5);
	background(colorX,180,180);
    ellipse(width/2, height/1.9, faceWidth, faceHeight);
    noFill(0);
    stroke(255,255,colorB);
    strokeWeight(.5);
    ellipse(width/2.1, height/1.95, faceWidth, faceHeight);

	//eyes
	strokeWeight(0);
	var eyeLX = width / 2 - faceWidth * 0.25
	var eyeRX = width / 2 + faceWidth * 0.25
	fill(colorR, colorG, colorB);
	ellipse(eyeLX, height / 2, eyeSize, eyeSize);
	ellipse(eyeRX, height / 2, eyeSize, eyeSize);

	//blush
	strokeWeight(5);
	stroke(colorR,colorG,colorB);
	line(385,y1,390,y2);
	line(395,y1,400,y2);
	line(405,y1,410,y2);

	//facial expression
	noFill();
	stroke(0);
	strokeWeight(2);
	beginShape();
	curveVertex(width/2-faceWidth*.15,smileY);
	curveVertex(width/2+faceWidth*.025,310);
	curveVertex(width/2-faceWidth*.025,310);
	curveVertex(width/2+faceWidth*.15,smileY);
	endShape();


	//larger flower
	translate(200, 300);
	strokeWeight(0);
	stroke(colorR,120,120);
	for (var i = 0; i < 10; i ++) {
	ellipse(0, 10, 10, petalY1);
	rotate(PI/5);
	}

	//smaller flower
	translate(240, -40);
	strokeWeight(0);
	fill(colorX,120,120);
	for (var i = 0; i < 10; i ++) {
	ellipse(1, 5, 7, petalY2);
	rotate(PI/3);
	}


	//text
	var word = int(wordNumber);
	if (word == 1) {
		strokeWeight(.1);
		textSize(12);
		fill(160);
		text("???", 50, 50);
	} else if (word == 2){
		noStroke();
		textSize(20);
		fill(200,160,160);
		text(":-(", 50, 50);
	} else if (word == 3){
		strokeWeight(1);
		textSize(15);
		fill(255);
		text(":-/", 50, 50);
	}

 }

 function mousePressed() {
 	faceWidth = random(200, 300);
 	faceHeight = random(150, 300);
 	eyeSize = random(10,25);
 	colorX = random(180,255);
 	colorR = random(240,255);
 	colorG = random(100,150);
 	colorB = random(80,140);
 	petalY1 = random(50,80);
 	petalY2 = random(25,40);
 	word = random(0,4);
 	wordNumber = random(0,4);
 	y1 = random(275,285);
 	y2 = random(285,295);
 	smileY = random(280,350);
 }

Navigating the world of arcs and curves was new and a bit challenging, but nonetheless rewarding once I successfully embedded it into my code!

Yingyang Zhou-Project-02-Variable-Face

Variable Face

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-02-A



var faceWidth =235;
var eyebrow = 8;
var mouth = 20;
var nose = 30;
var eyeSize = 20;
var neck = 150;
var shoulder = 450;
var noseR = 200;
var noseG = 100;
var noseB = 100;
var hairR = 130;
var hairG = 120;
var hairB = 110;
var shoulderCurve = 50;

function setup() {
    createCanvas(600, 600);
    background(208, 142, 44);

}

function draw() {
    //face
    fill(255);
    noStroke();
    ellipse(width/2, width/3, faceWidth, 1.2*faceWidth);
    //neck
    rect(width/2 - neck/4, height/2, neck/2, neck);
    //shoulder
    fill(147, 91, 4);
    rect(width/2 - shoulder/2, width - shoulder/3, shoulder, shoulder/2, shoulderCurve);
    //eye
    fill(0);
    ellipse(225, 141, eyeSize, eyeSize);
    ellipse(290, 156, eyeSize, eyeSize);
    //nose
    noStroke();
    fill(noseR, noseG, noseB);
    triangle(217, 210, 217+nose/2, 210-nose, 210+nose/2, 210);
    //hair
    fill(hairR, hairG, hairB);
    noStroke();
    beginShape();
    curveVertex(270, 290);
    curveVertex(270, 370);
    curveVertex(196, 395);
    curveVertex(175, 220);
    curveVertex(220, 80);
    curveVertex(325, 25);
    curveVertex(438, 80);
    curveVertex(466, 421);
    curveVertex(317, 423);
    curveVertex(347, 131);
    curveVertex(301, 72);
    curveVertex(190, 198);
    curveVertex(208, 274);
    curveVertex(270, 290);
    curveVertex(270, 375);
    curveVertex(270, 377);
    endShape();
    //mouth
    ellipse(225, 250, mouth, mouth/3)
}

function mousePressed(){
    eyeSize = random(5, 20);
    noseR = random(0, 255);
    noseG = random(0, 255);
    noseB = random(0, 255);
    hairR = random(0, 255);
    hairG = random(0, 255);
    hairB = random(0, 255);
}

I started using CurveVertex in this project and turn out a very smooth curve.
Hair color, mouth color and size of eyes and nose are changing with every click. I had a lot of fun in this.

rrandell project02- variable face

sketch

/* Rani Randell
Section A
rrandell@andrew.cmu.edu
Project 2 variable faces */


// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var backcolor;
var mouthW = 70;
var mouthH = 30;
 
function setup() {
    createCanvas(640, 480);
    var R = random(20, 250);
    var G = random(100, 200);
    var B = random(10, 200);
    backcolor = color(R, G, B);

}
 
function draw() {
    background(backcolor);
    fill(230, 10, 200)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);//face

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(10, 30, 200);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
    fill(30, 70, 70);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye

    rect(width/2 - 35, height/2- 20, 20, 3)//eyebrows
    rect(width/2 + 15, height/2- 20, 20, 3)

    fill(200, 10, 120); //mouth color
    ellipse(width/2, height/2+40, mouthW, mouthH)//mouth


}
 
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);
    var R = random(20, 250);
    var G = random(100, 200);
    var B = random(10, 200);
    backcolor = color(R, G, B);
    mouthH = random(10, 40);
    mouthW = random(60, 90);
}

For my Variable Faces project, I wanted to explore randomizing different colors of the background when the mouse is pressed. I accomplished this by making distinct RGB variables and then randomizing them in the mousePressed function.

Alexandra Kaplan-Project 02

aekaplan.js

/* Alexandra Kaplan
   Section C
   aekaplan@andrew.cmu.edu
   Project-02*/

var headW = 250;
var headH = 300;

var eyeSizeW = 40;
var eyeSizeH = 60;
var eyeY = headH/1.3;

var pupilSize = eyeSizeW - 10;
var pupilY = eyeY;
var pupilR =0;
var pupilG =0;
var pupilB =0;

var noseW = 20;
var noseH = 25;

var mouthH = 1;
var mouthW = 1;

var hatH = headH/2.5;
var hatW = 320;
var hatR = 100
var hatG = 50
var hatB = 60


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

function draw() {
	background(200, 200, 230);
	strokeWeight(0);

	//draw head
	fill(220, 190, 160);
	ellipse(width/2, height/2, headW, headH);
	
	//draw eyes
	fill(255);
	var eyeXL = width/2 - headW/4;
    var eyeXR = width/2 + headW/4;
	ellipse(eyeXL, eyeY, eyeSizeW, eyeSizeH);
	ellipse(eyeXR, eyeY, eyeSizeW, eyeSizeH);

    //draw pupils
    fill(pupilR, pupilG, pupilB);
    ellipse(eyeXL, pupilY, pupilSize, pupilSize);
    ellipse(eyeXR, pupilY, pupilSize, pupilSize);

    //draw nose
    fill(200, 170, 140);
    ellipse(eyeXL/2 + eyeXR/2 , height/2 + headH/6 , noseW, noseH);

    //draw mouth
    fill(200,100,100);
    arc(eyeXL/2 + eyeXR/2, height/2 + headH/3, 30 * mouthW, 20 * mouthH, 0, PI + QUARTER_PI, OPEN);
    
    //draw hat
    fill(hatR, hatG, hatB);
    rectMode(CENTER);
    rect(hatW, hatH, headW + 20, headH/2, 100, 100, 10, 10);
}

function mousePressed() {

   //head size
   headW = random(200, 500);
   headH = random(200, 350);

   //pupil color
   pupilR = random(100, 255);
   pupilG = random(100, 255);
   pupilB = random(100, 255);

   //pupil location
   pupilY = random(220, 250);
   
   //nose size
   noseW = random(10, 50);
   noseH = random(10, 50);

   //mouth size
   mouthW = random(0.5, 3);
   mouthH = (0.5, 3);
  
  //hat color
  hatR = random(0, 255);
  hatG = random(0, 255);
  hatB = random(0, 255);

}

I found this project to be pretty difficult to wrap my head around at first, though as I continued on with the project it started to make more sense. As I got into the random manipulation, I started to enjoy myself more than when I was figuring out the arithmetic. I definitely want to use more variables in future projects so I can continue to get more comfortable with them.

Ean Grady-Project 2-Variable Face

sketch

//Ean Grady
//Section A
//egrady@andrew.cmu.edu
//Project-02

var x = 0
var y = 0
var z = 0
var x2 = 0
var y2 = 0
var z2 = 0
var b = 0
var n = 0
var m = 0
var trix1 = 160
var trix2 = 440
var rx1 = 205
var ry1 = 220
var rx2 = 315
var ry2 = 220
var w = 0
var e = 0
var r = 0
var i = 0
var o = 0
var p = 0
var size = 200

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

function draw() {
    background (255, 255, 200);
    noStroke();

    //hair petals
    fill (x2, y2, z2)
    ellipse (215, 210, 70, 60)
    fill (x2, y2, z2)
    ellipse (272, 180, 70, 60)
    fill (x, y, z)
    ellipse (180, 265, 70, 60)
    fill (x2, y2, z2)
    ellipse (180, 330, 70, 60)
    fill (x, y, z)
    ellipse (215, 385, 70, 60)
    fill (x2, y2, z2)
    ellipse (280, 420, 70, 60)
    fill (x, y, z)
    ellipse (360, 405, 70, 60)
    fill (x2, y2, z2)
    ellipse (405, 355, 70, 60)
    fill (x, y, z)
    ellipse (415, 290, 70, 60)
    fill (x2, y2, z2)
    ellipse (395, 230, 70, 60)
    fill (x, y, z)
    ellipse (344, 185, 70, 60)

    //purple body
    fill (120, 20, 200)
    ellipse(300, 500, size, 200)

    //face
    fill (200, 205, 255)
    ellipse (300, 300, 250, 250)

    //eyes
    fill(w, e, r)
    arc(240, 260, 80, 40, 150, PI + QUARTER_PI, CHORD);
    arc(360, 260, 80, 40, 150, PI + QUARTER_PI, CHORD);
    fill(i, o, p)
    arc(240, 260, 80, 40, 20, PI + QUARTER_PI, CHORD);
    arc(360, 260, 80, 40, 20, PI + QUARTER_PI, CHORD);
    fill(255, 255, 255)
    ellipse(360, 260, 20, 20)
    ellipse(240, 260, 20, 20)
    fill(0, 0, 0)
    ellipse(360, 260, 10, 10)
    ellipse(240, 260, 10, 10)

    //mouth
    fill(255, 20, 123)
    rect(270, 300, 60, 100)
    fill(0, 0, 0)
    rect(275, 305, 50, 90)

    //eyebrows
    fill (0, 0, 0)
    rect (rx1, ry1, 80, 20)
    rect (rx2, ry2, 80, 20)

    //triangle hat
    fill(b, n, m)
    triangle(trix1, 210, trix2, 210, 300, 100);
}

function mousePressed() {
    x = random(0, 255);
    y = random(0, 255);
    z = random(0, 255);
    x2 = random(0, 255);
    y2 = random(0, 255);
    z2 = random(0, 255);
    b = random(0, 255);
    n = random(0, 255);
    m = random(0, 255);
    trix1 = random(100, 160)
    trix2 = random(440, 500)
    ry1 = random(220, 200)
    rx1 = random(200, 220)
    ry2 = random(220, 200)
    rx2 = random(310, 320)
    w = random(0, 255)
    e = random(0, 255)
    r = random(0, 255)
    i = random(0, 255)
    o = random(0, 255)
    p = random(0, 255)
    size = random(200, 250)
}

For this project, I didn’t use a pre-drawn sketch of mine, I instead went straight into programming which proved to be the main problem. I don’t mind how my variable face turned out, but in the future, I want to start employing the use of drawings more to make it more organized.

Eunice Choe – Project-02

sketch1

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-02
*/

// face shape
var faceW = 200;
var faceH = 250;
// eyes
var eyeSize = 30;
var eyePupil = 10;
// egg color
var eggColorR = 186;
var eggColorG = 215;
var eggColorB = 241;
// mouth
var mouthW = 40;
var mouthH = 15;
// nest
var nestW = 250;
var nestH = 70;
// brows
var browW = 20;
var browH = 5



function setup() {
    createCanvas(480, 640);
}
// background
function draw() {
    background(230, 160, 160);

// nest back
    noStroke();
    fill(106, 80, 71);
    ellipse(width / 2, height / 2 + 80, nestW, nestH);

// face
    noStroke();
    fill(eggColorR, eggColorG, eggColorB);
    ellipse(width / 2, height / 2, faceW, faceH);

// eye whites
    var leftEyeX = width / 2 - faceW*.2;
    var rightEyeX = width / 2 + faceW*.2;
    fill(255, 255, 255);
    ellipse(leftEyeX, height / 2, eyeSize, eyeSize);
    ellipse(rightEyeX, height / 2, eyeSize, eyeSize);

// eye pupils
    stroke(65, 44, 24);
    strokeWeight(7);
    ellipse(leftEyeX, height / 2, eyePupil, eyePupil);
    ellipse(rightEyeX, height / 2, eyePupil, eyePupil);

// mouth
    stroke(85, 85, 85);
    strokeWeight(4);
    fill(200, 120, 70);
    arc(width / 2, height / 2 + 30, mouthW, mouthH, 0, PI, OPEN);

// brows
    var leftBrowX = width / 2 - faceW*.3;
    var rightBrowX = width / 2 + faceW*.2;
    var browY = height / 2 - faceH*.15;
    fill(162, 114, 135);
    noStroke();
    rect(leftBrowX, browY, browW, browH);
    rect(rightBrowX, browY, browW, browH);


// nest front
    stroke(163, 136, 127);
    fill(124, 103, 95);
    arc(width / 2, height / 2 + 80, nestW, nestH + 100, 0, PI, OPEN);

// caption
    noStroke();
    textFont('Georgia');
    textSize(20);
    textAlign(CENTER);
    text('eggs for days!', width / 2, height / 2 + 200);

}

function mousePressed(){
    // face
    faceW = random(175, 225);
    faceH = random(225, 275);
    // eye
    eyeSize = random(20, 40);
    eyePupil = random(1, 20);
    // egg color
    eggColorR = random(225, 255);
    eggColorG = random(225, 255);
    eggColorB = random(225, 255);
    // mouth
    mouthW = random(10, 100);
    mouthH = random(5, 30);
    // brows
    browW = random(15, 40);
    browH = random(1, 10);


}

For this project, I was inspired by my love of eggs. I began experimenting with egg sketches on illustrator and ultimately decided to put my eggs in a nest. I also decided to change the color, eyes, brows, and mouth so that a new egg would appear on every click. This project was more challenging than the last one, but I still had a lot of fun.

Hannah Cai—Project 2—Variable Faces

/* Hannah Cai
hycai@andrew.cmu.edu
Section C
Project-02-Variable-Face
*/

function setup() {
    createCanvas(640,480);
    background(250);
    rectMode(CENTER);
    ellipseMode(CENTER);
    angleMode(DEGREES);

    // color variables
    bodyR = 251;
    bodyG = 176;
    bodyB = 64;
    finR = 190;
    finG = 30;
    finB = 45;
    scaleR = 255;
    scaleG = 215;
    scaleB = 86;

    size = 1;
    shear = 0;
    gillWeight = (5); 
    showWhiskers = (1);
    whiskerAngle = (0);
    whiskerLength = (33);
    finStyle = 0;
    scaleStyle = 0;
    scaleDot = 0;
    scaleDotSize = 0;
    specimenNumber = 8108;
}

function draw() {
    background(250);
    // label
    textFont('Courier New');
    textStyle(ITALIC);
    textAlign(CENTER);
    textSize(20);
    noStroke();
    fill(0);
    text('Arowana',320,357); //species name
    textSize(14);
    text('Osteoglossidae',320,375); //scientific name
    textSize(10);
    textFont('Courier');
    text('specimen #'+specimenNumber,320,395); //"specimen # x"

    translate(320,240); 
    scale(size);
    shearX(shear);
    translate(-320,-240);

    // tail fins
    fill(finR,finG,finB);
    noStroke();
        // tail
        translate(455,213);
        rotate(-45);
        rect(0,0,112,112,0,40,100,40);
        rotate(45);
        translate(-455,-213);
        // top fin
        ellipse(390,151,71,47);
        // bottom fins
        if (finStyle <= 0.5) { //fin style 1: two short bottom fins
        shearX(35);
        rect(180,270,117,48,0,200,30,200);
        shearX(-35);
        rect(267,274,54,41,0,50,5,50);
        } else { //fin style 2: one long bottom fin
        shearX(35);
        rect(150,270,180,48,0,200,30,200);
        shearX(-35);
        noFill();
        stroke(finR,finG,finB);
        strokeWeight(1);
        arc(266,270,150,70,150,260);
        }

    // whiskers
    if (showWhiskers >= 0.5) { 
    noStroke();
    fill(bodyR,bodyG,bodyB);
    translate(137,151);
    rotate(-whiskerAngle);
    ellipse(-1,-17,4,whiskerLength);
    rotate(whiskerAngle);
    translate(-137,-151);
    }

    // body
    noStroke();
    fill(bodyR,bodyG,bodyB);
    arc(245,150,219,218,0,180); //head
    rect(322,204.5,170,109,0,100,100,0); //tail

    // scales
    strokeWeight(1);
    if (scaleStyle >= 0.5) { //scale style 1: outlines
        noStroke();
        fill(scaleR,scaleG,scaleB);
    } else { //scale style 2: half-circles
        noFill();
        strokeWeight(1);
        stroke(scaleR,scaleG,scaleB);
    }
    arc(223,168,34,34,-90,90); //row 1
    arc(223,204,34,34,-90,90);
    arc(223,240,34,34,-90,90);
    arc(240,185,34,34,-90,90); //row 2
    arc(240,221,34,34,-90,90);
    arc(257,168,34,34,-90,90); //row 3
    arc(257,204,34,34,-90,90);
    arc(257,240,34,34,-90,90);
    arc(274,185,34,34,-90,90); //row 4
    arc(274,221,34,34,-90,90);
    arc(291,168,34,34,-90,90); //row 5
    arc(291,204,34,34,-90,90);
    arc(291,240,34,34,-90,90);
    arc(308,185,34,34,-90,90); //row 6
    arc(308,221,34,34,-90,90);
    arc(325,168,34,34,-90,90); //row 7
    arc(325,204,34,34,-90,90);
    arc(325,240,34,34,-90,90);
    arc(342,185,34,34,-90,90); //row 9
    arc(342,221,34,34,-90,90);
    arc(359,168,34,34,-90,90); //row 10
    arc(359,204,34,34,-90,90);
    arc(359,240,34,34,-90,90);
    arc(376,185,34,34,-90,90); //row 11
    arc(376,221,34,34,-90,90);
    arc(393,204,27,34,-90,90); //row 12

    //scale details
    if (scaleDot >= 0.5) {
    noStroke();
    fill(scaledotR,scaledotG,scaledotB)
    arc(223,168,scaleDotSize,scaleDotSize,-90,90); //row 1
    arc(223,204,scaleDotSize,scaleDotSize,-90,90);
    arc(223,240,scaleDotSize,scaleDotSize,-90,90);
    arc(240,185,scaleDotSize,scaleDotSize,-90,90); //row 2
    arc(240,221,scaleDotSize,scaleDotSize,-90,90);
    arc(257,168,scaleDotSize,scaleDotSize,-90,90); //row 3
    arc(257,204,scaleDotSize,scaleDotSize,-90,90);
    arc(257,240,scaleDotSize,scaleDotSize,-90,90);
    arc(274,185,scaleDotSize,scaleDotSize,-90,90); //row 4
    arc(274,221,scaleDotSize,scaleDotSize,-90,90);
    arc(291,168,scaleDotSize,scaleDotSize,-90,90); //row 5
    arc(291,204,scaleDotSize,scaleDotSize,-90,90);
    arc(291,240,scaleDotSize,scaleDotSize,-90,90);
    arc(308,185,scaleDotSize,scaleDotSize,-90,90); //row 6
    arc(308,221,scaleDotSize,scaleDotSize,-90,90);
    arc(325,168,scaleDotSize,scaleDotSize,-90,90); //row 7
    arc(325,204,scaleDotSize,scaleDotSize,-90,90);
    arc(325,240,scaleDotSize,scaleDotSize,-90,90);
    arc(342,185,scaleDotSize,scaleDotSize,-90,90); //row 9
    arc(342,221,scaleDotSize,scaleDotSize,-90,90);
    arc(359,168,scaleDotSize,scaleDotSize,-90,90); //row 10
    arc(359,204,scaleDotSize,scaleDotSize,-90,90);
    arc(359,240,scaleDotSize,scaleDotSize,-90,90);
    arc(376,185,scaleDotSize,scaleDotSize,-90,90); //row 11
    arc(376,221,scaleDotSize,scaleDotSize,-90,90);
    arc(393,204,scaleDotSize,scaleDotSize,-90,90); //row 12
    }

    // eyes
    noStroke();
    fill(255);
    ellipse(172,165,25,25); //whites
    fill(0);
    ellipse(172,165,21,21); //pupil

    // gills
    noFill();
    stroke(finR,finG,finB);
    strokeWeight(gillWeight);
    arc(179,192,69,69,-40,105);

    // mouth
    strokeWeight(1);
    arc(94,204,138,138,-50,-15);

    // gill fin
    strokeWeight(gillWeight);
    fill(finR,finG,finB);
    ellipse(240,228,67,20);
}


function mousePressed() {
    size = random(.5,1.2);
    shear = random(0,15); //horizontal stretch
    showWhiskers = random(0,1);
    finStyle = random(0,1);
    scaleStyle = random(0,1);
    scaleDot = random(0,1);
    scaleDotSize = random(0,30);
    // color variables
    bodyR = random(100,250);
    bodyG = random(100,250);
    bodyB = random(100,250);
    finR = bodyR - random(50,150);
    finG = bodyG - random(50,150);
    finB = bodyB - random(50,150);
    scaleR = bodyR + random(50,100);
    scaleG = bodyG + random(50,100);
    scaleB = bodyB + random(50,100);
    scaledotR = scaleR - random(30,50)
    scaledotG = scaleG - random(30,50)
    scaledotB = scaleB - random(30,50)

    gillWeight = random(1,5);
    whiskerAngle = random(0,90);
    whiskerLength = random(30,50);
    specimenNumber = random(0,9999);
    specimenNumber = round(specimenNumber); //rounds specimen# to whole number
}

real arowana look like this:

a closer look at the whiskers

initial sketches with ideas for variations

/////

some variations from the final code

I wanted to take a more scientific approach to the idea of generated variations, so I decided to focus my project on variations of an animal species. I chose the arowana because it’s one of my favorite animals, and because I wanted to try and capture its distinctive shape. Overall, I had a lot of fun with this project!

Jisoo Geum-Project-02-Variable-Face

jgeumP02face

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu
// Project-02
var eyeWidth = 35;
var eyeHeight = 70;
var faceWidth = 220;
var faceHeight = 220;
var mouthWidth = 10;
var mouthHeight = 10;
var bubbleOnex = 185;
var bubbleOney = 140;
var bubbleThreex = 290;
var bubbleThreey = 110;
var soapouterR = 252;
var soapouterB = 193;
var soapouterG = 204;
var soapinnerR = 252;
var soapinnerB = 207;
var soapinnerG = 204;




function setup() {
    createCanvas(640, 480);
    background(249, 240, 255);

}
 
function draw() {
     ellipseMode(CENTER);
    
    //face
    noStroke();
    fill(207,231,235);
    rect(121.859,189.318, faceWidth,  faceHeight, 50); //body or face
    ellipse (242.65,333.46, 281.586, 120.819); //arm

    //eyes
    fill(132,156,185);
    stroke (255);
    strokeWeight(9);
    ellipse(224.87,324.63,eyeWidth, eyeHeight); //left eye
    ellipse(286.56,324.63,eyeWidth, eyeHeight); //right eye

    //mouth
    noStroke();
    fill(243,141,154);
    ellipse(255.94, 376.31,mouthWidth,mouthHeight);

    //soap
    fill(soapouterR,soapouterB,soapouterG); // soap RBG 
    rect(383.44,269.56,52.33,90.693,20); //the outer shape
    fill(soapinnerR,soapinnerG,soapinnerB); 
    ellipse(410,315.11,20,55); //the inner shape

    //bubbles
    stroke(132,156,185);
    fill(255);
    ellipse(bubbleOnex,bubbleOney,22,22); //bubbleOne
    ellipse(232,150,18,18); //bubbleTwo
    ellipse(bubbleThreex,bubbleThreey,30,30); //bubbleThree
    ellipse(315,165,15,15); //bubbleFour

    //text
    noStroke();
    fill(132,156,185);
    textSize(48);
    textStyle(NORMAL);
    text ('Soap', 450, 200);


}
 
function mousePressed() {

    eyeWidth = random(20, 65);
    eyeHeight = random (20, 80);
    mouthWidth = random (10,50);
    bubbleOnex = random (80,185);
    bubbleOney = random (100,150);
    bubbleThreex = random (100,400);
    bubbleThreey = random (50,200);
    soapouterR = random (200,255);
    soapouterB = random (180,255);
    soapouterG = random (190,255);
    soapinnerR = random (200,255);
    soapinnerB = random (180,255);
    soapinnerG = random (190,255);

}

I began drawing various emotions in my sketchbook and illustrator. When I began coding, I realized that I wasn’t able to transcribe those images with my current abilities. I ended up simplifying the design. Overall, the project was enjoyable although it was more challenging.

Austin Treu – Project-02

atreu-proj02

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-02

var eyeSize, irisSize, faceW, faceH, 
    backR = 75, backG = 220, backB = 200,
    faceR = 255, faceG = 255, faceB = 255,
    eyeR = 0, eyeG = 255, eyeB = 255,
    mouthW, mouthH, mouthX, mouthY,
    earW, earH, earShape = 0;
 
function setup() {
    createCanvas(480, 640);
    eyeSize = width/10, irisSize = eyeSize - 10;
    faceW = width/2, faceH = height/2;
    mouthX = width/2, mouthY = height/2 + eyeSize;
    mouthW = width/6, mouthH = height/8;
    earW = width/20, earH = height/10;
}
 
function draw() {
    background(backR,backG,backB);

    //draw face
    fill(faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceW,  faceH);

    //calculate and draw eyes
    var eyeLX = width/2 - faceW * 0.25;
    var eyeRX = width/2 + faceW * 0.25;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height/2, irisSize, irisSize);
    ellipse(eyeRX, height/2, irisSize, irisSize);

    //draw mouth
    fill(255);
    arc(mouthX, mouthY, mouthW, mouthH, 0, PI, CHORD);

    //draw ears
    fill(faceR, faceG, faceB);
    if(earShape == 0){
        //circle ears
        ellipse(width/2-faceW/2-faceW/30, height/2, earW, earH);
        ellipse(width/2+faceW/2+faceW/30, height/2, earW, earH);
    }
    else if(earShape == 1){
        //triangle ears
        triangle(width/2-faceW/2, height/2-faceW/10, 
            width/2-faceW/2, height/2+faceW/10, 
            width/2-faceW/2-earW, height/2+earH);
        triangle(width/2+faceW/2, height/2-faceW/10, 
            width/2+faceW/2, height/2+faceW/10, 
            width/2+faceW/2+earW, height/2+earH);
    }
    else if(earShape == 2){
        //line ears
        line(width/2-faceW/2, height/2, 
            width/2-faceW/2-earW, height/2-earH);
        line(width/2+faceW/2, height/2, 
            width/2+faceW/2+earW, height/2-earH);
    }
    else{
        //do nothing - no ears
    }
}
 
function mousePressed() {
    //randomize face size
    faceW = random(width/4, width/2+width/4);
    faceH = random(height/4, height-height/8);

    //randomize eye sizes
    eyeSize = random(10, 30);
    irisSize = eyeSize - 10;

    //randomize background color
    backR = random(0, 255);
    backG = random(0, 255);
    backB = random(0, 255);

    //base face color off swapped back values
    faceR = backG;
    faceG = backB;
    faceB = backR;

    //base eye color off swapped back values
    eyeR = backB;
    eyeG = backR;
    eyeB = backG;

    //randomize mouth size 
    mouthW = faceW - random(20,100);
    mouthH = faceH/2 - random(0,30);

    //randomize ear size and shape
    earShape = int(random(0,4));
    earW = random(width/20, width/10);
    earH = random(height/20, height/5);
}

I decided to take an approach to this project looking at the faces as being more alien or robot than human, as it ultimately allowed me to add more interesting adjustments when it came to color and shapes. It provided me with some good practice in debugging the small things (e.g. semicolon in the wrong place… oops!).

Jessica Timczyk – Project 02

pigface

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 300;
var faceColorR = 241;
var faceColorG = 146;
var faceColorB = 188;
var eyeColorR = 126;
var eyeColorG = 242;
var eyeColorB = 230;
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
var mouthHeight = 480 / 2 + 40
var noseHeight = 25

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(226, 179, 239);

    // face color
    stroke(0);
    strokeWeight(2);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye variables
    var eyeLX = 640 / 2 - faceWidth * 0.25;
    var eyeRX = 640 / 2 + faceWidth * 0.25;

    // eyeball shapes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize * 3/4);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize * 3/4);

    // irises shape
    strokeWeight(.75);
    // the iris color will change but the variables are rearranged so that 
    // they are not the same color as the face
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
    ellipse(eyeRX, height / 2, eyeSize * 2/3, eyeSize * 2/3);

    // Pupil
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
    ellipse(eyeRX, height / 2, eyeSize * 1/3, eyeSize * 1/3);


    //eyebrow variables
    var eyebrowLX = eyeLX - 30;
    var eyebrowRX = eyeRX - 30;

    // left eyebrow shape
    noStroke();
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX + 30, height / 2 - 40);
    curveVertex(eyebrowLX + 50, height / 2 - 35);
    curveVertex(eyebrowLX + 50, height / 2 - 30);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    endShape();

    // right eyebrow shape
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 30, height / 2 - 40);
    curveVertex(eyebrowRX + 10, height / 2 - 35);
    curveVertex(eyebrowRX + 10, height / 2 - 30);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    endShape();

    // mouth shape
    fill(0);
    stroke(235, 65, 97);
    strokeWeight(4);
    arc(width / 2, faceHeight, 80, 80, 0, PI, CHORD);

    // restraining mouth height to stay below 2/3 of the way down 
    // the page as to not overlap with the eyes as they move
    if (faceHeight <= height * 2/3) {
        faceHeight = mouthHeight;
    }

    // Pig nose
    stroke(0);
    fill(227, 138, 190);
    ellipse(width / 2, faceHeight - noseHeight, 70, 60);

    // nostrils
    fill(0);
    ellipse(width / 2 - 10, faceHeight - noseHeight, 8, 15);
    ellipse(width / 2 + 10, faceHeight - noseHeight, 8, 15);

    // ears
    strokeWeight(3);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(eyeLX, faceHeight * 1/3, 90, 85);
    ellipse(eyeRX, faceHeight * 1/3, 90, 85);

    // cheaks
    // use eyeRX as x value so that the cheeks move with the eyes
    arc(eyeRX + 35, faceHeight + 10, 80, 80, PI, PI + HALF_PI, OPEN);
    arc(eyeLX - 35, faceHeight + 10, 80, 80, PI + HALF_PI, TWO_PI, OPEN);


}
 

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(150, 500);
    faceHeight = random(100, 400);
    eyeSize = random(30, 85);
    faceColorR = random(235, 244);
    faceColorG = random(54, 194);
    faceColorB = random(161, 224);
    eyebrowLX = random(eyeLX - 50, eyeLX - 10);
    eyebrowRX = random(eyeRX - 50, eyeLX - 10);
    mouthHeight = random(270, 330);
    noseHeight = random(40, 15);
    eyeColorR = random(126, 242);
    eyeColorG = random(126, 242);
    eyecolorB= random(126, 242);
}

It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.