Month: September 2017

rmanagad-Project02-variablefaces-SectionE

rmanagad-variable

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project 02 - Section E

//body dimensions
var bodX = 241.2;
 	bodY = 500;
	bodW = 145.8;
	bodH = 218.7;
	curve1 = 15;
	curve2 = 15;
	curve3 = 15;
	curve4 = 15;

//eye dimensions
var eyeW = 25.5;
    eyeH = 8.1;
var eyeLX = 200.7;
var eyeRX = 283.9;
var eyeY = 454;
var nosecurve1 = 15;
	nosecurve2 = 15;
	nosecurve3 = 15;
	nosecurve4 = 15;

//nose dimensions
var noseW = 42;
var noseH = 34;
var noseX = 242.3;
var noseY = 486;
var noseW2 = 22;
	noseH2 = 13;
	noseX2 = 242;
	noseY2 = 502;

//ear dimensions
var earLX1 = 185.4;
	earLY1 = 393;
	earLX2 = 196.4;
	earLY2 = 374;
	earLX3 = 207.5;
var earRX1 = 273.6;
	earRX2 = 284.6;
	earRY2 = 374;
	earRX3 = 295.2;

//ground dimensions
var darkgroundW = 199.1;
    darkgroundH = 71.8;
    darkgroundX = 240.1;
	darkgroundY = 410.8;
var midgroundW = 136.6;
	midgroundH = 73.8;
var midgroundLX = 153.3;
var midgroundRX = 330.3;
	midgroundY = 399.2;
var lightgroundW = 138.9;
    lightgroundH = 53.235;
var lightgroundRX = 310.6;
var lightgroundLX = 174.1;
	lightgroundY = 373.7;

//colors
var darkgroundR = 74;
	var darkgroundG = 74;
	var darkgroundB = 63;
	var midgroundR = 121;
	var midgroundG = 122;
	var midgroundB = 97;
	var lightgroundR = 155;
	var lightgroundG = 154;
	var lightgroundB = 124;
	var bodycolorR = 234;
	var bodycolorG = 229;
	var bodycolorB = 209;
	var earcolorR = 239;
	var earcolorG = 119;
	var earcolorB = 99;


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

function draw(){
	background (245, 245, 240)
	rectMode(CENTER);

	//lightground in the back
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(lightgroundLX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);
	rect(lightgroundRX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);

//if else statements were added to simulate the motion of the dog...
//popping its head above the ground.

	//ears
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	triangle(earLX1, earLY1, earLX2, earLY2, earLX3, earLY1);
	triangle(earRX1, earLY1, earRX2, earRY2, earRX3, earLY1);
	if (earLY1 > 220) {earLY1 = earLY1 - 1;
	} else {earLY1 = 221}; //it will continue to rise as long as it's placement is below its original.
	if (earLY2 > 201) {earLY2 = earLY2 - 1;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 1;
	} else {earRY2 = 202};

	//body
	noStroke ();
	fill (bodycolorR, bodycolorG, bodycolorB);
	rect (bodX, bodY, bodW, bodH, curve1, curve2, curve3, curve4);
	if (bodY > 328) {bodY = bodY - 1;
	} else {bodY = 328};

	//eyes
	noStroke();
	fill(0);
	rect (eyeLX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	rect (eyeRX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	if (eyeY > 281) {eyeY = eyeY - 1;
	} else {eyeY = 282};

	//nose
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	rect(noseX2, noseY2, noseW2, noseH2, curve1, curve2, curve3, curve4);
	if (noseY2 > 329) {noseY2 = noseY2 - 1;
	} else {noseY2 = 330};
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(noseX, noseY, noseW, noseH, curve1, curve2, curve3, curve4);
	if (noseY > 313) {noseY = noseY - 1;
	} else {noseY = 314};


	//midground
	noStroke();
	fill(midgroundR, midgroundG, midgroundB);
	rect(midgroundLX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);
	rect(midgroundRX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);

	//darkground in the front
	noStroke();
	fill(darkgroundR, darkgroundG, darkgroundB);
	rect(darkgroundX, darkgroundY, darkgroundW, darkgroundH, curve1, curve2, curve3, curve4);

	//invisible clipping layer
	noStroke();
	fill(245, 245, 240);
	rect(242.4, 542.7, 240.7, 194.5)
}

//random assignment of value are within the "mousePressed" function,
//randomizing the values between a given parameter 
//every time the mouse is clicked.

function mousePressed () {
	bodycolorR = random(210, 240);
	bodycolorG = random(210, 245);
	bodycolorB = random(200, 210);

	earLY1 = random(393, 393)
	earLY2 = random(374, 394);
	earLX1 = random(188, 190);
	earLX2 = random(193, 199);
	earLX3 = random(203, 210);
	earRY2 = random(374, 394);
	earRX1 = random(269, 276);
	earRX2 = random(280, 288);
	earRX3 = random(291, 299);
	if (earLY1 > 220) {earLY1 = earLY1 - 5;
	} else {earLY1 = 221}; 
	if (earLY2 > 201) {earLY2 = earLY2 - 5;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 5;
	} else {earRY2 = 202};
	// changed the speed of ears so they "flop" out at the top.

	eyeH = random(4, 16);
	eyeW = random(14, 24);
	eyeLX = random(195, 210);
	eyeRX = random(273, 288);
	eyeY = random(453, 453);
	if (eyeY > 281) {eyeY = eyeY - 15;
	} else {eyeY = 282};

	noseW = random(20, 45);
	noseH = random(20, 35);
	noseX = random(235, 248);
	noseY = random(486, 486);
	if (noseY > 313) {noseY = noseY - 15;
	} else {noseY = 314;}


	noseW2 = random(20, 24);
	noseH2 = random(12, 14);
	noseX2 = random(236, 246);
	noseY2 = random(502, 502);
	if (noseY2 > 330) {noseY2 = noseY2 - 15;
	} else {noseY2 = 330};

	bodW = random(130, 160);
	nosecurve1 = random(5, 25);
	nosecurve2 = random(15, 25);
	nosecurve3 = random(15, 25);
	nosecurve4 = random(15, 25);
	bodY = random(500, 500);
	if (bodY > 328) {bodY = bodY - 15;
	} else {bodY = 328}

	}





//have (variable) += dir * speed;
//if ((variable) = height/2) {dir = 0 * dir;
//	}

In approaching this project, I took into consideration the movement elements learned in class — how could I incorporate them into a program that randomly generated values? My first idea was to create a program that popped up an ID card, but I wanted more of a surprise element — this prompted a switch to an animal popping its head out of a hole, and I ultimately decided on keeping ambiguity behind the species as a “to-be-decided” depending on what the random function generates.

I primarily used Illustrator as aid in creating this program in order to obtain coordinate values, size values, and color values. To get the animal to animate, I used a motion technique (x = x – 1) in conjunction with conditional statements to restrict the animal from moving too high. Because I focused on keeping the body parts aligning correctly during the animation, I wasn’t able to play too much with variation in the random generation of y-coordinates — all end-animation y-coordinate-placements were the same as the original image, and I’d like to experiment later in modifying that value as well.

agusman-Project02-VariableFace

agusman-02-variableface

//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces

var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;

function setup() {
    createCanvas(400, 400);
    eyeColor1 = color(0)
    eyeColor2 = color(255, 200, 255);
}

function draw() {
    stroke(0.1)
    background(255, 255, 255);
    fill(255,255,255);

    //Head//
    from = color(255, 219, 0);
    to = color(182, 152, 0);
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, leftEye, leftEye);
    ellipse(eyeRX, height / 2, rightEye, rightEye);

    noStroke()
    from = color(255, 217, 0);
    to = color(253, 176, 0);
    for (var i = 0; i < faceWidth; i++) {
      fill(lerpColor(to, from, (i+1)/faceWidth));
      ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
  }
    //Draw eyes in the right order
    if (eyeVelX>0) {
      drawLeftEye();
      drawRightEye();
    } else {
      drawRightEye();
      drawLeftEye();
    }

    //mouth//
    arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);

}

    //Left Eye//
function drawLeftEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < leftEye; i++) {
      fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
      ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
  }
}
    //Right Eye//
function drawRightEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < rightEye; i++) {
        fill(lerpColor(to, from, (i+1)/rightEye));
        ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
  }
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(150, 200);
    faceHeight = random(150, 200);
    eyeSize = random(30, 50);
    rightEye = random(0, 40);
    leftEye = random(0, 40);
    mouthHeight = random(10,80)
    mouthWidth = random(20, 50)
    eyeColor1;
    eyeColor2;
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.

Looking-Outwards-02

https://www.quayola.com/sculpture-factory/

The Scultpure Factory; Quayola; 2016

The Sculpture Factory by Quayola is a showing of digital fabrication as different finishes of a 3D scanned sculpture are milled out in foam by a robot. By arranging the six unfinished trial sculptures for reference comparisons, Quayola creates a “hybrid vision – a slow process of discovery not focused on the original figure but on the infinite possibilities of how to reach it” (Quayola).

What I know about the algorithm Quayola uses for the robot is that its outcome is to refine overtime. The first sculpture, for example, uses the main, block shapes to punch out connected mountains of form, and smaller, more defined tools will detail the indentations on these mountains more, working with a large shape and finishing at the top also. The last mill moves linearly to erase the harsh steps of these mountains and create definition.

Hannah Kim- Looking Outwards- 02

The project I chose is called “Boil Up” by Robert Hodgin, 2013. The project is a group dynamics simulation work that aims to replicate the behaviors of frenzied fish in plankton rich waters. Hodgin managed to simulate these behaviors, such as flocking, predator and obstacle avoidance, and pursuit, using code in complex 3D models. Hodgin claims that the task was particularly difficult because he had to figure out how to organize the fish and keep them corralled, without feeling like he was imposing unnatural restrictions on their behavior. I can really see Hodgin’s realistic artistic sensibilities coming out in his algorithms, seeing that he went from working with mathematical shapes, to pushing realistic and complex 3D models. I really admire this about his work, and how he was able to manipulate code to simulate such a complex and specific action/behavior. Seeing the result is surreal, and I really feel as if I am in the middle of this crazy fish feeding session, watching the animals swim around me.

Here is a link to the video:

Shark cam from flight404 on Vimeo.

HaeWanPark-LookingOutwards-2

I AM By Sergio Albiac, 2016

I am Portraits by Sergio Albiac

“I am portrait” is a generative collage portrait project by Sergio Albiac. The main source of this project is personal data of one who is portrayed. With his generative custom computer code, Sergio transforms gathered data into a portrait which is an identity metaphor. The portrait which is depicted in the typographic illustration consists of all the personal data that tells stories about the person who is portrayed. He intended his generative computer code to become a medium to tell someone’s personal story and to represent his or her identity. He also developed his own generative techniques and sentiment analysis to have his own artistic style. His generative technique uses machine learning networks trained by only him in order to prevent imitating other artist’s style.

This artwork is incorporated with machine learning. It includes a system being trained from an artist who executes. What I think interesting is he only uses one person’s data at once and also trains machine learning networks alone. So, the portrait is made out of unique personal data within the uniquely trained machine learning networks. In my opinion, this artist understands that visual representation conveying personal meaning must be unique. It is pretty successful to illustrate someone’s unique identity within artist’s own expression and style.

cchau1 – Project02 – Variable Faces

sketch


var eyeSize = 35;
var whiteSize = 15;
var faceWidth = 200;
var faceHeight = 200;
var r, g, b
var noseX = 20
var noseY = 10
var whiteHeight = 100
var whiteWidth = 35
var pinkHeight = 120
var pinkWidth = 40
var bodyW = 200
var bodyH = 250

function setup() {
    createCanvas(480,640);
    angleMode(CENTER)
    smooth()
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    noStroke();
    background(165,216,255);

//bunny ears
    noStroke()
    ellipseMode(RADIUS);
    fill(250,249,250);
    ellipse(290,180,whiteWidth,whiteHeight);

    ellipseMode(CENTER);
    fill(255,225,242);
    ellipse(290,180,pinkWidth,pinkHeight);

    ellipseMode(RADIUS);
    fill(250,249,250);
    ellipse(180,180,whiteWidth,whiteHeight);

    ellipseMode(CENTER);
    fill(255,225,242);
    ellipse(180,180,pinkWidth,pinkHeight);

//head
    fill(250,249,250);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2.5 - faceWidth * 0.25;
    var eyeRX = width / 2.5 + faceWidth * 0.25;

    fill(r,g,b); //applied r,g,b random color variables to eyes
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    fill(255); //white eye shine
    ellipse(eyeLX-9, height / 2 -10, eyeSize/1.5, eyeSize/1.5);
    ellipse(eyeRX-9, height / 2 -10, eyeSize/1.5, eyeSize/1.5);

    fill(255,186,223); //nose
    ellipse((width/2)-50, height/2,noseX,noseY);

//body
    fill(250,249,250);
    ellipse(width/2,height-100,bodyW,bodyH);

//flower
    translate(300,265);
    noStroke()
   for (var i = 0; i < 10; i ++) {
     fill(r,g,b);
     ellipse(0, 10, 20, 60);
     rotate(PI/5)
}

}

function mousePressed() {
    var d = dist(mouseX, mouseY, 20,60);
    if (d < 500) {
      r = random(255);
      g = random(255);
      b = random(255);
    }
    faceWidth = random(170, 250);
    faceHeight = random(15, 250);
    eyeSize = random(20,60);
    whiteHeight = random(80,140);
    whiteWidth = random(20,50);
    pinkHeight = random(90,150);
    pinkWidth = random(20,40);
    bodyW = random(200,250);
    bodyH = random(250,300);

  }

I initially planned to have only the face, eyes, and ear length to change but decided to also add a random color-changing function which was applied to the eyes and additional flower function. As I was deciding the range for the random width/height for the head, I thought to myself that in nature, there are many beautiful mathematical proportions that have allowed species to thrive but in our imagination and in cartoons, these proportions can be as hilarious or wacky as we desire!

Sheenu-Project-02-Variable Face

sketch
This was a very fun and interesting project. I wanted to create an “Emoji” looking picture that completely changes every time you click the screen. I thought the outline and the shadow were going to be hard to make, but it was actually very easy since I was using variables. This is the first time I used text in one of my projects. I really liked how it turned out and I am glad that I learned “random” in P5.js. I learned a while ago how to use Random in Adobe AS2 and it is a lot harder and more complicated. 

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Assignment-02-A
var faceW = 300;
var faceH = 300;
var faceR =255;
var faceG =207;
var faceB =35;
var eye1=70;
var eyex= 180;
var eye2=40;
var eyex2=180;
var eyeh=240;
var mouthw=200
var mouthh=150
function setup() {
    createCanvas(480, 640);
}

function draw() {
	//Background
	noStroke();
	background(27,165,207);
	//Shadow
	fill(0, 115, 181);
	ellipse(250, 340, faceW, faceH)
	//Outline
	fill(255);
	ellipse(width/2, height/2, faceW+10, faceH+10)
	//Face
	//Actual face
	fill(faceR, faceG, faceB);
	ellipse(width/2, height/2, faceW, faceH)
	//Eyes
	fill(255);
	ellipse(eyex, eyeh, eye1, eye1)
	ellipse(eyex+120, eyeh, eye1, eye1)
	//Pupil
	fill(0);
	ellipse(eyex2, eyeh, eye2, eye2)
	ellipse(eyex2+120, eyeh, eye2, eye2)
	//Mouth
	fill(255,104,62);
	ellipse(240, 370, mouthw, mouthh)
	//TextBox
	fill(255);
	rectMode(CENTER);
	rect(width/2, 565, 350, 130,20)
	fill(faceR,faceG,faceB)
	textSize(50);
    text("WHOA!", 155, 580);
}
	function mousePressed(){ 
	//When you click anywhere, you can change stuff
	faceW = random(250, 350);
	faceH = random(250, 350);
	faceR =random(0, 255);
	faceG =random(0, 255);
    faceB =random(0, 255);
	eye1=random(1,150);
	eyex= random(170,190);
	eye2=random(1,70);
	eyex2=random(170,190);
	eyeh=240;
	mouthw=random(100,300);
	mouthh=random(50,200);
}

katieche – looking outwards 02

HE_Mesh


After looking through some of the creators’ works and researching definitions, I felt still confused by the concept of generative art. However, of all the creators I looked at, the work of Frederik Vanhoutte caught my attention. He created amazing HE_mesh works, purely as a hobby which I respect. HE_Mesh* is a Java library for making polygonal mesh creations. It contains no display functionality of its own, but it’s meant to be used with processing. Vanhoutte describes the program as an “after-hours hobby” and is more of a toy than worth production strength. You can see a few of his works below.

kyungak-Project-02-Variable-Face

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Assignment-02-Variable-Faces

var facewidth = 260;
var faceheight = 240;
var outerLx = 275;
var outerY = 200;
var eyesize = 40;
var outerRx = 370;
var pupilsize = 7
var nosewidth = 80;
var noseheight = 40;
var nostrilwidth = 5;
var nostrilheight = 10;
var mouthtip = 340;
var mouthheight = 290;
var mouthleft = 310;
var mouthright = 330;
var pupilcolor = 0;

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

function draw() {
    background(198,192,214);
//ears
    fill(228,162,194);

//face
    fill(245,216,230);
    strokeWeight(3);
    stroke(228,162,194);
    ellipse(320,240,facewidth,faceheight);

//eyes
    fill(255);
    stroke(0);
    ellipse(outerLx,outerY,eyesize,eyesize); //left outerpart of eye
    ellipse(outerRx,outerY,eyesize,eyesize); //right outerrpart of eye

    fill(pupilcolor);
    ellipse(outerLx,outerY,pupilsize,pupilsize); //left pupil
    ellipse(outerRx,outerY,pupilsize,pupilsize); //right pupil

//nose
    fill(234,217,225);
    ellipse(320,250,nosewidth,noseheight); //outerpart of nose

    fill(151,139,145);
    ellipse(300,250,nostrilwidth,nostrilheight); //left nostril
    ellipse(340,250,nostrilwidth,nostrilheight); //right nostril

//mouth
    fill(151,139,145); 
    triangle(mouthleft,mouthheight,width/2,mouthtip,mouthright,mouthheight); 
}

function mousePressed() {
    //when the user clicks, the variables are randomly reassigned
    //within the given ranges
    facewidth = random(250,350);
    faceheight = random(230,350);
    outerLx = random(250,275);
    outerY = random(170,200);
    pupilsize = random(5,25);
    nosewidth = random(50,150);
    noseheight = random(30,70);
    nostrilwidth = random(3,10);
    nostrilheight = random(5,15);
    mouthtip = random(300,347);
    mouthleft = random(250,315);
    mouthright = random(325,390);
    mouthheight = random(300,320);
    pupilcolor = random(0,255);
}

As someone who is just learning about this program, learning and experimenting with the “mousePressed” function was interesting. Although I encountered a few problems here and there, I was able to overcome them and learn from the mistakes. I have also attached my notebook sketch of how the face originally looked. Although the result doesn’t synchronize with the sketch, I believe I will be able to make more intricate designs as I learn to utilize more features on javascript.

mmiller5_Project-2

sketch

var faceWidth = 225;
var faceHeight = 225;
var faceType = 1;
var earSize = 50;
var earType = 1;
var earStroke = 10;
var faceR = 225;
var faceG = 184;
var faceB = 153;
var eyeSize = 30;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
var eyeStroke = 1;
var mouthSize = 40;
var mouthType = 1;
var types = [1,2,3]; // faces, ears, and mouths have 3 different versions which will get randomly chosen
 
function setup() {
    createCanvas(480, 640);
    rectMode(CENTER);
}
 
function draw() {
    background(255-faceR, 255-faceG, 255-faceB); //background color is inverse color of face
    fill(faceR, faceG, faceB);


    //Ear types
    strokeWeight(earStroke);
    stroke(faceR - 10, faceG - 10, faceB - 30);
    if(earType == 2){
	ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
	ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
    }
    if(earType == 3){
	triangle(width/2 - faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 - faceWidth/2, height/2 - faceHeight/2 - earSize/2);
	triangle(width/2 + faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 + faceWidth/2, height/2 - faceHeight/2 - earSize/2);
    }

    
    //Face types
    strokeWeight(5);
    if(faceType == 1){
	ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 2){
	rect(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 3){
	triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }

    //Eye Sockets
    strokeWeight(0);
    fill(faceR - 30, faceG - 30, faceB - 50);
    ellipse(width/2 - faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    ellipse(width/2 + faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    
    //Eyes will follow mouse (kinda)
    strokeWeight(eyeStroke);
    stroke(eyeR/5, eyeG/5, eyeB/3);
    fill(eyeR, eyeG, eyeB);
    var eyeXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/15, width/2 - faceWidth/6 + eyeSize/15);
    var eyeY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/15, height/2 - faceHeight/6 + eyeSize/15);
    var eyeXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/15, width/2 + faceWidth/6 + eyeSize/15);
    ellipse(eyeXL, eyeY, eyeSize, eyeSize);
    ellipse(eyeXR, eyeY, eyeSize, eyeSize);

    //Pupils will follow mouse (kinda)
    fill(0);
    strokeWeight(0);
    var pupilXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/4, width/2 - faceWidth/6 + eyeSize/4);
    var pupilY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/4, height/2 - faceHeight/6 + eyeSize/4);
    var pupilXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/4, width/2 + faceWidth/6 + eyeSize/4);
    ellipse(pupilXL, pupilY, eyeSize/2, eyeSize/2);
    ellipse(pupilXR, pupilY, eyeSize/2, eyeSize/2);
    
    //Mouth
    fill(eyeR/3, eyeG/5, eyeB/5);
    if(mouthType == 1){
	strokeWeight(mouthSize/10);
	line(width/2 - mouthSize/2, height/2 + faceHeight/6, width/2 + mouthSize/2, height/2 + faceHeight/6);
    }
    if(mouthType == 2){
	strokeWeight(mouthSize/5);
	point(width/2, height/2 + faceHeight/6);
    }

}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    faceType = random(types);
    
    earSize = random(75, 125);
    earType = random(types);
    earStroke = random(5, 20);
    //Skin colors are setup so as to mostly resemble realistic skin tones
    faceR = random(70,255);
    faceG = random(faceR/4, faceR);
    faceB = random(faceR/4, faceG);
    
    eyeSize = random(20, 35);
    eyeR = random(0, 255);
    eyeB = random(0, 255);
    eyeG = random(0, 255);
    eyeStroke = random(1, 4);
    
    mouthSize = random(30, 60);
    mouthType = random(types);
    }

I really wanted to focus on creating different types of features rather than just adjusting the same feature by changing variables, and so I found out about using arrays from which the program makes a selection to decide which version of a feature to use, if any.  I wanted to make it even more interactive, so I tried to make the eyes follow the mouse (it kinda worked, but I know there’s a different way to do it that I’ll probably try later).