September 2016 – Page 26 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

mreyes-Project-02-Variable-Face

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Assignment-01

// size and color variables
var eyeSize = 20;
var puiplilSize = 10

var faceWidth = 75;
var faceHeight = 100;

var noseHeight = 100
var noseWidth = 50

var mouthWidth = 20
var mouthHeight = 20
 
var r = 147
var g = 100
var b = 179 // pastel color pallet

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke()
    background(182,242,211);
    // face 
    fill(r,g,b)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //blush 1 
    var blushX = width / 2 + faceWidth * 0.25 - faceWidth / 2;
    var blushY = height / 2 + faceHeight * 0.25 ; 
    fill(g,b,r) // reverse for complimentary color
    ellipse(blushX + faceWidth / 1.25, blushY, mouthWidth, mouthHeight)
    //eye 1
    ellipse(blushX + faceWidth / 1.25, height / 2, eyeSize, eyeSize)
    fill(50)
    ellipse(blushX + faceWidth / 1.25, height / 2, puiplilSize, puiplilSize)
    //nose 
    fill(r,g,b)
    var noseX = width / 2 + faceWidth * 0.25;
    var noseY = height / 2 + faceHeight * 0.25
    ellipse(noseX, noseY, noseWidth, noseHeight);
    // blush 2 
    fill(g,b,r)
    ellipse(blushX, blushY, mouthWidth, mouthHeight)
    //eye 2
    noStroke()
    var eyeX = width / 2 - faceWidth * 0.25;
    fill(g,b,r) 
    ellipse(eyeX, height / 2, eyeSize, eyeSize);
    fill(50)
    ellipse(eyeX, height / 2, puiplilSize, puiplilSize) // the eyes and blush are sepperate so the nose over laps in a non awkward way
    // nose definition
    noFill()
    strokeWeight(3)
    stroke(100);
    var noseX1 = width / 2 + faceWidth * 0.25 ;
    var noseY1 = height / 2 + faceHeight * 0.40;
    var noseX2 = width / 2 + faceWidth * 0.25 - noseWidth / 2;
    var noseY2 = height / 2 + faceHeight * 0.40;
    var noseX3 = noseX1 - 10
    var noseY3 = noseY1 - 10
    curve(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3, noseX1, noseY1)   
}

function mousePressed() {
  
    mouthWidth = (70,20)
    mouthHeight = (70,20)

    noseHeight = random(150,70)
    noseWidth = random(70,20)

    faceHeight = random(100,200);
    faceWidth = random(75,150);

    puiplilSize = random(5,15)
    
    eyeSize = random(10,30);
    
    r = random (147,255)
    g = random(100,200)
    b = random(179,255)


}

I didn’t do a preliminary sketch for this project and just fiddled around with different shapes. this turned out to be unfruitful as I ended up spending a lot of time on trying to make sure things were not awkward. The arch for the nose was on of the hardest parts as I wanted the ellipse for the nose to change drastically and I had to fiddle with the variables a lot to make sure the curve stayed on the face.

Looking Outwards -02

In June 2015, James George and Johnathan Minard produced an interactive documentary, CLOUDS, which is a really beautiful look at programming, creativity, and how these two entities bring together people from around the world in a very interesting way.

The picture below that was taken from the film caught my attention at first because it was pretty and reminded me of a rose. What made me click on it however, not knowing that CLOUDS was a documentary before I looked into it, was my curiosity at why they would name it “Clouds” when it doesn’t even remotely resemble them.

After seeing the trailer and other pictures from the documentary, though, I was floored by how amazing it seemed. I normally am not one to watch documentaries, but this would be a welcomed exception. The creators even took the people speaking and made them part of the artistic aspect in their pixelated appearance (as demonstrated in the video below). This documentary in particular also used multiple complicated algorithms to create the images that went with the interviewees, which can be seen in the link to the trailer below.

http://www.cloudsdocumentary.com/#trailer

Clouds: beta from Deepspeed media on Vimeo.

Jiyoung Ahn-Project-02-Variable-Face

ahnjiface




var eyeSize = 25;
var pupilSize = 15
var faceWidth = 200;
var faceHeight = 200;
var mouthHeight = 50; 
var mouthWidth = 60;
var earSize = 30;
var hair = 70;
var hairColor = '#dc8ac6';
var otherColors = ['#dc8ac6', '#8adc9f', '8aa9dc'];


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

}
 
function draw() {
    background(255,188,72);

    //face
    fill(248,203,170);
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye
    fill(250);
    var eyeLX = width / 2 - faceWidth * 0.21;
    var eyeRX = width / 2 + faceWidth * 0.21;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

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

    //ear
    fill(248,203,170);
    var earLX = width / 2 - faceWidth * 0.53;
    var earRX = width / 2 + faceWidth * 0.53;
    ellipse(earLX, height / 2, earSize, earSize);
    ellipse(earRX, height / 2, earSize, earSize);

    //mouth
    fill(255,0,0);
    ellipse(width / 2, height / 2+40, mouthWidth,  mouthHeight);

    //hair
    fill(hairColor);
    ellipse(width / 2, height / 3, hair);
    ellipse(width / 2+60, height / 3+15, hair);
    ellipse(width / 2-60, height / 3+15, hair);
    ellipse(width / 2+100, height / 3+65, hair);
    ellipse(width / 2-100, height / 3+65, hair);


}

function mousePressed() {
    
    eyeSize = random(15, 30);
    pupilSize = random(5, 20);
    earSize = random(20, 40);
    mouthWidth = random(30, 70);
    mouthHeight = random(10, 50);
    hairColor = random(otherColors);
}

I tried to draw a face by using circles only.

Jess Medenbach – Face Variables

“A manic day”

//Jessica Medenbach
//Assignment Project 02;Variables Faces 

var noseCurve2=200;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(17,216,162);
    fill(189,255,108);
    ellipse(width / 2, height / 2, 250,200);
    beginShape();
//mouth
curveVertex(width/2,  height/2);

curveVertex(281,  291);
curveVertex(268,  290);
curveVertex(221,  200);
curveVertex(232, 300);
curveVertex(232, 300);
endShape();
fill(255);

//eyes
var pupil1=10;
var pupil2=10;
var eyewhite1=30;
var eyewhite2=30;
var pupil1=random(10,30);
var pupil2=random(10,30);
var eyewhite1=random(30,50);
var eyewhite2=random(30,50);


ellipse(width/2,height/2, eyewhite1, eyewhite1);
ellipse(width/3+30,height/3+30, eyewhite2, eyewhite2);
fill(0);
ellipse(width/2,height/2, pupil1, pupil1);
ellipse(width/3+30,height/3+30, pupil2, pupil2);

//hat
fill(0);
 rect(300, 90, 30, 50);
 rect(290, 120, 50, 20);

}

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.
  
}

Diana Connolly – Project 2

For this project, I took elements from my self portrait last week and changed it from a female face to a general male face form. I wanted to play around with the shape of the head, shape of the hair, smile, and hair style — as well as skin and hair colors. I was able to get the system to choose from specific colors, as opposed to any random color.

sketch

var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 250;
var noseWidth = 20;
var noseHeight = 20;
var mouthHeight = 80;
var skinTone = ["#dc9a7a"];
var hairTone = ["#5a372a"];
var hairStyleType = 'drawMowhawk';

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

function draw() {
    background(187,245,180);
    
    //Face
    noStroke();
    ellipseMode(CENTER);
	fill(skinTone);  
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //Ears
    noStroke();
    ellipse(width/2+faceWidth/2, height/2, 40, 50);
    ellipse(width/2-faceWidth/2, height/2, 40, 50);
    
    //Eyes
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;
    fill(0);
    ellipse(eyeLX, height / 2 + faceHeight*.01,  eyeSize, eyeSize*1.5);
    ellipse(eyeRX, height / 2 + faceHeight*.01,  eyeSize, eyeSize*1.5);

    hairStyle();

    //Nose
    var noseX = width/2;
    var noseY = height/2 + faceHeight/11;
    noStroke();
    fill(205, 138, 107);
    ellipse(noseX, noseY, noseWidth, noseHeight);

    //Brows
    fill(hairTone);
	quad(eyeRX - faceWidth/8, height/2 - faceHeight/10, eyeRX + faceWidth/10, height/2 - faceHeight/10, eyeRX + faceWidth/18, height/2 - faceHeight/7, eyeRX - faceWidth/8, height/2 - faceHeight/7);
	quad(eyeLX - faceWidth/8, height/2 - faceHeight/10, eyeLX + faceWidth/10, height/2 - faceHeight/10, eyeLX + faceWidth/10, height/2 - faceHeight/7, eyeLX - faceWidth/18, height/2 - faceHeight/7);

    //Mouth
    fill(159, 67, 55);
	arc(width/2, height/2 + faceHeight/5, 40, mouthHeight, TWO_PI, PI, OPEN);
    
    }

function hairStyle() {
    if (hairStyleType == 'drawPuffyHair') {
        drawPuffyHair();
    }
    else if(hairStyleType == 'drawMowhawk') {
        drawMowhawk();
    }
    else if(hairStyleType == 'drawBald') {
        drawBald();
    }
}

function drawPuffyHair() {
    //Puffy Hair
    fill(hairTone);
    ellipse(width/2-faceWidth/3, height/2-faceHeight/3, faceWidth/3, faceHeight/4);
    ellipse(width/2-faceWidth/5, height/2-faceHeight/2, faceWidth/3, faceHeight/4);
    ellipse(width/2, height/2-faceHeight/1.8, faceWidth/3, faceHeight/4);
    ellipse(width/2, height/2 - faceHeight/3, faceWidth/2, faceHeight/4);
    ellipse(width/2+faceWidth/5, height/2-faceHeight/2, faceWidth/3, faceHeight/4);
    ellipse(width/2+faceWidth/3, height/2-faceHeight/3, faceWidth/3, faceHeight/4);
}

function drawMowhawk() {
    //Mowhawk
    fill(hairTone);
    quad(width/2, height/2 - faceHeight/2.5, width/2 + 20, height/2 - faceHeight/2.05, width/2, height/2 - faceHeight/1.1, width/2 - 20, height/2 - faceHeight/2.05);
}

function drawBald() {
    //Bald
    noFill();
    stroke(255, 255, 255, 95);
    strokeWeight(15);
    arc(width/2 + faceWidth/2 - 90, (height/2 - faceHeight/2) + 65, 80, 80, PI+PI/2, 7.2*PI/4);
}


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(200, 250);
    faceHeight = random(200, 300);
    noseWidth = random(10, 30);
    noseHeight = random(10, 15);
    mouthHeight = random(10, 80);
    skinTone = random(["#dc9a7a", "#f3bea1", "#a66a49"]);
    hairTone = random(["#5a372a", "#bb852f", "#1e0a03"]);
    hairStyleType = random(['drawPuffyHair', 'drawMowhawk', 'drawBald']);
}

SiminLi Project 2

siminliproject02

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 02
var eyeSize = 20;
var faceWidth = 222;
var faceHeight = 260;
var a = 180;
var b = 160; //coordinates of drop 2
var k = 8; //size of drop 2
var i = 0;
var c = 175;
var d = 163;//coordinates of drop 1
var m = 18; //size of drop 1
var j = 0;
var noseHeight = 40;
var rd = 171;
var gn = 31;
var bl = 31;// RGB of lip color

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(193,222,239); //blue
    noStroke();
    
    fill(248,213,178); // arm
    triangle(0, 300, 0, 0, 550 ,0)
    
    fill(240,174,164); //mosquito bite
    ellipse( 150, 120, 30,  50); 
    fill(249,223,213 ); 
    ellipse( 150, 120, 6,  6); 

    fill(240,174,164); //mosquito bite
    ellipse( 300, 70, 40,  20); 
    fill(249,223,213 ); 
    ellipse( 299, 70, 6,  6); 

var noseY = height / 2 - noseHeight; //y of nose bridge point
var noseX = width / 2 - faceWidth * 0.5 - noseHeight * 0.3; //x ofnose tip
var nosey = height / 2 - faceHeight / 3; //y of nose tip
    fill(254,242,195 ); 
    triangle(noseX,nosey, width / 2, height / 2 - faceHeight / 2, width / 2, noseY);//nose
    
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face 

var eyeRX = width / 2 + faceWidth * 0.25; //positions the mouth
   
    fill(0) ; // eye liner
    arc(eyeRX, height / 2 - 30 , eyeSize + 17, eyeSize + 17,PI ,TWO_PI,CHORD);
    noStroke();
    fill(252,253,255)   ; // eye whites
    ellipse(eyeRX, height / 2 - 30, eyeSize, eyeSize);
    fill(0) ; // pupil
    arc(eyeRX, height / 2 - 30, eyeSize - 15, eyeSize - 15, QUARTER_PI,TWO_PI,PIE);
    

var mouthWidth = width / 2 - faceWidth * 0.25; //positions the mouth
    stroke(rd,gn,bl);
    strokeWeight(15.0);
    fill(228,95,136 )   ; //mouth
    ellipse(mouthWidth,height / 2 + 15,faceHeight / 4,faceWidth / 4);

    noStroke();          //blood drop 1
    fill(225,39,39);
    beginShape();
    curveVertex(c,  d);
    curveVertex(c + (1 / 2) * m,  d + m * 2);
    curveVertex(c + (3 / 4) * m,  d + m * 3);
    curveVertex(c,  d + 4 * m);
    curveVertex(c - (3 / 4) * m,  d + m * 3);
    curveVertex(c - (1 / 2) * m,  d + m * 2);
    endShape(CLOSE);
    d = d + 2.5; 
    j ++;  // so drop can return to origin
    if ( d > 420)
    { d = d - j * 2.5; 
        j = 0; }

    noStroke(); //(dark) blood drop 2
    fill(138,24,24);
    beginShape();
    curveVertex(a,  b);
    curveVertex(a + (1 / 2) * k,  b + k * 2);
    curveVertex(a + (3 / 4) * k,  b + k * 3);
    curveVertex(a,  b + 4 * k);
    curveVertex(a - (3 / 4) * k,  b + k * 3);
    curveVertex(a - (1 / 2) * k,  b + k * 2);
    curveVertex(a,  b);
    endShape(CLOSE);
    b = b + 2.9; 
    i ++; // so drop can return to origin
    if ( b > 420)
    { b = b - i * 2.9; 
        i = 0; }

    fill(0);
    text("this mosquito is hungry for blood..", 410, 465);
}
 
function mousePressed() {

    faceWidth = random(200, 300); //changes the shape of the face 
    faceHeight = random(200, 300);
    eyeSize = random( 12, 60); 
    noseHeight = random(30, faceHeight / 2 ); 
    rd = random(0, 255);
    gn = random(0, 255);
    bl = random(0, 255);
}

This project turned out very different from what I originally planned. I wanted to make a person with a nosebleed and when I got to making the nose, the pointy quality of it inspired me to make a mosquito sucking blood. I am very happy with my decision.

ntroutma- Project- 02- Variable Face

ntroutma-a02


//Nicholas Troutman
//15.104 section C
//ntroutma@andrew.cmu.edu
//Assignment-02
//16.09009


//formatting
	var varX = 120
	var varY = 80

	var varLoop = 1;

function setup()
{
    createCanvas (640, 480);
    background ("#80B6D1");
}

function draw() 
{

//formatting

	stroke (0);
	strokeWeight (1);


//facial varibles
 	var varFH = random(100, 120); //face height
	var varFW = random(100, 120); //face width
	var varCH = varFH + random(20, 30); // chin length
	var varCW = varFW - random(20, 40); //chin width
	var varNH = random(20, 40); //nose length
	var varNW = random(10, 18); //nose width
	var varMW = random(10, 30); //mouth width
	var varMH1 = random(2, 8); var varMH2 = random(3, 6); var varMH3 = random(2, 8);//mouth height
	var varEW = random(20, 25); //eye width
	var varEH = random(8, 15); //eye height
	var varEC1 = random(50, 250); var varEC2 = random(50, 250); var varEC3 = (50, 250);//eye color
	var varBL1 = random(0, 4); var varBL2 = random(1, 6); var varBL3 = random(0, 8); //left eyebrow
	var varBR1 = random(0, 4); var varBR2 = random(1, 6); var varBR3 = random(0, 8); //right eyebrow


//facial shape
	fill("#FAFCFC");
	//noFill();
	beginShape ();
		curveVertex (varX + .33 * varFW, varY + .1 * varFH);
		curveVertex (varX, varY);
		curveVertex (varX - .33 * varFW, varY + .1 * varFH);
		curveVertex (varX - .48 * varFW, varY + .33 * varFH);
		curveVertex (varX - .5 * varFW, varY + .66 * varFH);
		curveVertex (varX - .5 * varCW, varY + varFH);
		curveVertex (varX, varY + varCH);
		curveVertex (varX + .5 * varCW, varY + varFH);
		curveVertex (varX + .5 * varFW, varY + .66 * varFH);
		curveVertex (varX + .48 * varFW, varY + .33 * varFH);
		curveVertex (varX + .33 * varFW, varY + .1 * varFH);
		curveVertex (varX, varY);
		curveVertex (varX - .33 * varFW, varY + .1 * varFH);
		endShape();

//nose
	noFill();
	beginShape();
		curveVertex (varX, varY + .5 * varFH);
		curveVertex (varX, varY + .5 * varFH);
		curveVertex (varX - .5 * varNW, varY + .5 * varFH + .8 * varNH);
		curveVertex (varX, varY + .5 * varFH + varNH);
		curveVertex (varX + .5 * varNW, varY + .5 * varFH + .8 * varNH);
		curveVertex (varX, varY + .5 * varFH);
		//curveVertex (varX, varY + .5 * varFH);
		endShape();
//mouth
	noFill();
	beginShape();
		curveVertex (varX - .5 * varMW, varY + .85 * varCH - varMH1);
		curveVertex (varX - .5 * varMW, varY + .85 * varCH - varMH1);
		curveVertex (varX, varY + .85 * varCH - varMH2);
		curveVertex (varX + .5 * varMW, varY + .85 * varCH - varMH3);
		curveVertex (varX + .5 * varMW, varY + .85 * varCH - varMH3);
		endShape();

//eyes
	noFill(); 
	beginShape(); //right eye
		curveVertex (varX + .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW + .5 * varEW, varY + .45 * varFH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + varEH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + varEH);
		endShape();


	beginShape(); //left eye
		curveVertex (varX - .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW - .5 * varEW, varY + .45 * varFH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + varEH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + varEH);
		endShape();

	fill (varEC1, varEC2, varEC3);
	ellipse (varX - .1* varFW - .5 * varEW, varY + .45 * varFH + .5* varEH,
	         .66 * varEH, .66 * varEH); //right iris

	ellipse (varX + .1* varFW + .5 * varEW, varY + .45 * varFH + .5* varEH,
	         .66 * varEH, .66 * varEH); //left iris


//face 1 eyebrows
	noFill();
	beginShape(); //right eyebrow
		curveVertex (varX + .1 * varFW, varY + .4 * varFH - varBR1);
		curveVertex (varX + .1 * varFW, varY + .4 * varFH - varBR1);
		curveVertex (varX + .1 * varFW + .5 * varEW, varY + .4 * varFH - varBR2);
		curveVertex (varX + .1 * varFW + varEW, varY + .4 * varFH - varBR3);
		curveVertex (varX + .1 * varFW + varEW, varY + .4 * varFH - varBR3);
		endShape();

	beginShape(); //left eyebrow
		curveVertex (varX - .1 * varFW, varY + .4 * varFH - varBL1);
		curveVertex (varX - .1 * varFW, varY + .4 * varFH - varBL1);
		curveVertex (varX - .1 * varFW - .5 * varEW, varY + .4 * varFH - varBL2);
		curveVertex (varX - .1 * varFW - varEW, varY + .4 * varFH - varBL3);
		curveVertex (varX - .1 * varFW - varEW, varY + .4 * varFH - varBL3);
		endShape();



//loop function
	if (varLoop < 3) {
		varX = varX + 200;
		varLoop ++; 
		loop();
	}
	else if (varLoop < 4) {
		varX = 120;
		varY = varY + 200;
		varLoop ++;
		loop();
	}
	else if (varLoop > 5, varLoop < 6) {
		varX = varX + 200; 
		varLoop ++;
		loop();
	}
	else {
		noLoop();
	}

	
}

After a few quick image searches of chernoff faces, I found that most of them were very cartooned and perhaps unrealistic in their varied aspects. That’s fine, now I just need to create my own crude cartoon sketches.
I began with the head shape knowing that I needed something other than an ellipse. After some trial and much error I was able to create a crude but not obscene outline using an origin point at the top of the head and relating my variables to it. This allowed me to vary the height and width of the face at multiple points without potential of misalignment.
Facial features were created in the same way, with reference to the origin point. variable domains were tweaked so that there was no possibility of them intersecting or being placed outside the face. *I found it helpful to allow the function to loop during this, so that I could see all possible outcomes of the line.*
I now have a legion of slightly critical chernoff faces.

fullsizerender

fullsizerender-2

Shannon Case – Looking Outwards 02

The project I admire is called “The Johnny Cash Project”, a continuous work of generative art by Aaron Koblin. In the project, users can submit their own drawings of frames for the “Ain’t No Grave” music video by Johnny Cash. Users can draw any frame they want to, and submit it to the website. They are able to then choose between all the submitted frames and create a version of the video that they customize. The project is to pay tribute to Cash through connecting fans around the world. I really like this project because it connects people all over the world to work on a common collaborative project. I think that this is uniting for the world, and also a fitting tribute to Cash as he lives on through the work. I like that it is generated by humans, all working together to create a unique and customizable product.

Below are some images of frames from the video, as well as a link to a video about the project, and the actual project webpage.

cash-frame

Video about project: http://www.aaronkoblin.com/project/johnny-cash-project/

Project Website: http://www.thejohnnycashproject.com/#

Shannon Case- Project 02- Variable Face

scase-project-02

// Shannon Case
// Section D
// scase@andrew.cmu.edu
// Project 02

//set variables
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 15;
var mouthY = 15;

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

function draw() {
    background(255,8,127); // makes the background hot pink

    //faceshape
    fill(238,90,200); //makes the face purple
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //creates the face
    
    //sets eye variables
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //eyes
    ellipseMode(RADIUS); 
    fill(255);  // Set fill to white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); 
    ellipseMode(CENTER); 
    fill(127,255,12); //makes pupils lime green
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);

    ellipseMode(RADIUS);  
    fill(255);  // Set fill to white
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
    ellipseMode(CENTER); 
    fill(127,255,12); // lime green color 
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //mouth
    fill(151,255,255); //fill the mouth blue
    ellipse((width/2)+10,(height/2)+30, mouthX, mouthY); //adds a mouth

    //eyebrows
    fill(255);
    rect(eyeLX-15, eyeLX-95, 30, 5); // left eyebrow
    rect(eyeRX-15, eyeRX-150, 30, 5); //right eyebrow

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(80, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 25);
    mouthX = random(1,20);
    mouthY = random(1,20);
}

For this project I started with the simple template given. I wanted to create a face that showed a surprised emotion, as it is surprising when the face changes with each click. I chose to show this with wide open eyes, an open mouth, and raised eyebrows, one slightly above the other. I chose to give the background and face fun colors to make a more interesting shape. The hardest part of this assignment for me was keeping the shapes on the face, as sometimes they tended to fly out into random places.

Isabella Hong-Project-02

ijhong02

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-02

// eye color and placement  
var I = 25;

// pupils 
var p = 15;

//eye color 
var eyeColorR = 255;
var eyeColorG = 255; 
var eyeColorB = 255;

//skin color 
var skinColorR = 255;
var skinColorG = 229;
var skinColorB = 180;

//nose color 
var nColorR = 255;
var nColorG = 229; 
var nColorB = 180;

//mouth size 
var m = 12;

//surprise lines thickness
var sl = 10;

  

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

function draw() {
	background(255);

	//face 
		noStroke();
		fill(skinColorR, skinColorG, skinColorB);
		ellipse(width / 2, height / 2.3, 200, 250);  
	
	//eyes
		noStroke();
		fill(eyeColorR, eyeColorG, eyeColorB);
		var ILX = width / 2 - 200 * 0.25; 
		var IRX = width / 2 + 250 * 0.25;
		ellipse(ILX - 40, height / 2.5, I, I + 10);
		ellipse(IRX - 80, height / 2.5, I, I + 10);

	//pupils 
		noStroke(); 
		fill(0);
		ellipse(ILX - 40, height / 2.5, p - 5, p + 5);
		ellipse(IRX - 80, height / 2.5, p - 5, p + 5);

	//nose
		stroke(255);
		strokeWeight(5);
		fill(nColorR, nColorG, nColorB);
		triangle(260, 260, 202, 240, 260, 200);

	//mouth
		noStroke();
		fill(231, 84, 128);
		ellipse(270, 280, m, m);


	//surprise lines 
		stroke(173, 216, 230);
		strokeWeight(sl);
		line(100, 100, 150, 150);
		line(550, 100, 450, 150);
		line(325, 60, 325, 5);
		line(460, 240, 580, 240);
		line(212, 100, 150, 15);

}	

function mousePressed(){
	//skin color changing
	skinColorR = random(250, 255);
	skinColorG = random(220, 255);
	skinColorB = random(180, 255);

	//eye color changing
	eyeColorR = random(0, 255);
	eyeColorG = random(0, 255);
	eyeColorB = random(0, 255);

	//eye size changing
	I = random(35, 70);

	//pupil size changing
	p = random(20, 30);

	//nose color changing
	nColorR = random(0, 255);
	nColorG = random(0, 255);
	nColorB = random(0, 255);

	//mouth size changing
	m = random(12, 60);

	//surprise lines thickness changing 
	sl = random(10, 25);
}

For Project 02, I decided to convey the emotion of surprise by assigning variables to various facial features and having them change to random colors and increase in size. I used the range 0-255 for all RGB colors to increase the unpredictability of what one would see after clicking upon the image.

The most difficult aspect of this project was making sure that I used all the variables correctly and my code was easily readable. Keeping my code organized was essential in order to ensure that I was changing the elements I intended to.