Category: Project-02-Variable-Face

Project 2 – Variable Face

variableface
var faceWidth = 200;
var faceHeight = 200;
var eyeDistance = 10;
var eyeWidth = 5;
var eyeHeight = 20;
var eyeHeightFORREAL = 20;
var pupilSize = 10;
var r = 150;
var g = 150;
var b = 150;
var mouthY = 50;
var mouthHeight = 30;
var mouthWidth = 30;
var PI = 3.1415;

function setup() {
    createCanvas(500, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	stroke(0);
	strokeWeight(2);

	background(255);
	fill(r, g, b);
	//noStroke();
	ellipse(width/2, height/2, faceWidth, faceHeight); //head
	
	fill(255);
	ellipse(width/2 - eyeDistance, height/2 - eyeHeight, eyeWidth, eyeHeightFORREAL); //eyes
	ellipse(width/2 + eyeDistance, height/2 - eyeHeight, eyeWidth, eyeHeightFORREAL);

	fill(0);
	ellipse(width/2 - eyeDistance, height/2 - eyeHeight, pupilSize);
	ellipse(width/2 + eyeDistance, height/2 - eyeHeight, pupilSize);

	fill(255);
	ellipse(width/2, mouthY, mouthWidth, mouthHeight); //teeth

	
	line(width/2, mouthY, width/2, mouthY - mouthHeight/2);

	fill(r - 80, g - 80, b - 80);
	arc(width/2, mouthY, mouthWidth, mouthHeight, 11*PI/6, 7*PI/6, CHORD); //bottom mouth part
	

}

function mousePressed(){
	faceWidth = random(200, 300);
	faceHeight = random(200, 400);
	eyeWidth = random(25, 70);
	eyeHeight = random(-10, 30);
	eyeHeightFORREAL = random(25,70);
	eyeDistance = random(eyeWidth, faceWidth/2 - eyeWidth);
	pupilSize = random(5, min(eyeWidth - 10, eyeHeightFORREAL - 10));
	mouthY = height/2 + random(30, 70);
	mouthHeight = random(20, 80);
	mouthWidth = random(20,80);
	r = random(125, 200);
	g = random(125, 200);
	b = random(125, 200);

	
	
}

Variable Face

variableface
var faceWidth = 300;
var faceHeight = 320;
var eyeSize = 60;
var faceC = 180
var eyeC = 255
var pC = 0
var maskC = 200
var eyebC = 50
var hairC = 255
function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
	var colorR = random(0, 255); //red
    var colorG = random(0, 255); //green
    var colorB = random(0, 255); //blue
    background(colorR, colorG, colorB)
    stroke(0)
    strokeWeight(1)
    fill(0,0,0)
    rect(25, 25, 590, 430)
    //hair back
    fill(hairC)
    noStroke()
    ellipse(width / 2, height / 2, faceWidth + 150, faceHeight + 150)
    //face
    stroke(0)
    fill(faceC)
    strokeWeight(1)
    ellipse(width / 2, height/ 2, faceWidth, faceHeight);
    var eyeL = width / 2 - faceWidth * .25
    var eyeR = width / 2 + faceWidth * .25
    //hair front
    fill(hairC)
    noStroke()
    ellipse(width / 2, height / 6, faceWidth/ 1.3, faceHeight / 3.1)
    fill(eyeC)
    stroke(0)
    ellipse(eyeL, height / 2, eyeSize, eyeSize); //eyeLeft
    ellipse(eyeR, height / 2, eyeSize, eyeSize); //eye Right
    var eyeP = 30
    fill(pC)
    ellipse(eyeL + eyeSize / 8, height / 2 + eyeSize / 5, eyeP, eyeP); //pupil L
    ellipse(eyeR + eyeSize / 8, height / 2 + eyeSize / 5, eyeP, eyeP); //pupil R
    //mask string
    noFill()
    stroke(hairC)
    strokeWeight(10)
    ellipse(eyeL - 60, height / 1.4, faceWidth / 3, faceHeight / 3)
    ellipse(eyeR + 50, height / 1.4, faceWidth / 3, faceHeight / 3)
    //mask
    fill(maskC)
    strokeWeight(1)
    rect(eyeL - 25, height/1.7, faceWidth / 1.5, faceHeight /3.5 ) //mask
    fill(0)
    line(eyeL - 25, height/1.7 + 10, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 10 ) // mask lines
    line(eyeL - 25, height/1.7 + 20, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 20 )
    line(eyeL - 25, height/1.7 + 30, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 30 )
    line(eyeL - 25, height/1.7 + 40, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 40 )
    line(eyeL - 25, height/1.7 + 50, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 50 )
    line(eyeL - 25, height/1.7 + 60, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 60 )
    line(eyeL - 25, height/1.7 + 70, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 70 )
    line(eyeL - 25, height/1.7 + 80, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 80 )
    //eyelash
    stroke(0)
    strokeWeight(5)
    line(eyeL- eyeSize/ 2, height/2, eyeL - eyeSize / 2 - 20, height/2.1)
    line(eyeR + eyeSize/ 2, height/2, eyeR + eyeSize / 2 + 20, height/2.1)
    line(eyeL - eyeSize/2, height/2.1, eyeL - eyeSize / 2 - 20, height/2.2)
    line(eyeR + eyeSize/2, height/2.1, eyeR + eyeSize / 2 + 20, height/2.2)
    //eyebrow
    noStroke()
    fill(eyebC)
    rect(eyeL - eyeSize / 2, height/3, eyeSize, eyeSize / 6)
    rect(eyeR - eyeSize / 2, height/3, eyeSize, eyeSize / 6)
}

function mouseClicked(){
    faceWidth = random(250, 450);
    faceHeight = random(270, 470);
    eyeSize = random(40, 80);
    eyeP = random(20, 40);
    faceC = color(random (0, 255), random(0, 255), random (0, 255))
    maskC = color(random (0, 255), random(0, 255), random (0, 255))
    eyeC = color(random (180, 255), random(180, 255), random (180, 255))
    pC = color(random (0, 255), random(0, 255), random (0, 255))
    eyebC = color(random (0, 255), random(0, 255), random (0, 255))
    hairC = color(random (0, 150), random(0, 150), random (0, 150))

}

For this project I decided I wanted a face with the mask. As I started coding I chose to make a female face that would change colors and sizes. The hard part was getting the mask to align correctly with each face same goes for the top of the hair. I wanted my faces to look like a cartoon would during Covid.

Variable Faces

The idea behind my code was to use randomization as well as variable-relations to create any number of faces on its own. The random variables include colors as well as the sizes of some aspects, like the eyes and face size. The eyes I made separately in order to create an abstract feel, along with the randomly changing background.

Abstract FacesDownload
//Variable Faces

    var strokeSize = 1;

    var faceWidth = 400;
    var faceHeight = 600;
    var faceColor = 135;

    var eyeColor = 30;
    var lEyeWidth = 100;
    var lEyeHeight = 100;
    var rEyeWidth = 100;
    var rEyeHeight = 100;
    var pupilColor = 135;

    var noseColor = 200;

    var mouthColor = 185;
    var mouthWidth = 180;
    var mouthHeight = 80;

    var backTri = 220;
    var backSquare = 220;
    var backCirc = 220
    var backEllipse = 220;
    var backRect = 220;


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

function draw() {
//randomizes the color of the background square
    var colorRA = random(0, 255);
    var colorGA = random(0, 255);
    var colorBA = random(0, 225);
//randomizes the color of the background triangle
    var colorRB = random(0, 255);
    var colorGB = random(0, 255);
    var colorBB = random(0, 225);
//randomizes the color of the background circle
    var colorRC = random(0, 255);
    var colorGC = random(0, 255);
    var colorBC = random(0, 225);
//randomizes the color of the background ellipse
    var colorRD = random(0, 255);
    var colorGD = random(0, 255);
    var colorBD = random(0, 225);
//randomizes the color of the background rectangle
    var colorRE = random(0, 255);
    var colorGE = random(0, 255);
    var colorBE = random(0, 225);
//randomizes the color of the background
    var colorRF = random(0, 255);
    var colorGF = random(0, 255);
    var colorBF = random(0, 225);

//creates a random background color
    background(colorRF, colorGF, colorBF);

    noStroke();
    frameRate(3);   //slows looping speed
    fill(colorRA, colorGA, colorBA);
    square(width - 300, 0, 300);    //background square
    fill(colorRB, colorGB, colorBB);
    triangle(0, 0, 100, 200, 400, 100);   //background triangle
    fill(colorRC, colorGC, colorBC);
    circle(width - 100, height - 100, 250);   //background circle
    fill(colorRE, colorGE, colorBE);
    rect(0, height * .3, width, .4 * height);   //background rectangle
    fill(colorRD, colorGD, colorBD);
    ellipse(.25 * width, height - 80, 225, 400);    //background ellipse


    strokeWeight(strokeSize);
    stroke(0);    //makes the strokes black

//creates the face with a random strokeWeight
    fill(faceColor);
    ellipse(width / 2, height /2 , faceWidth, faceHeight);


//creates the left eye
    fill(eyeColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, lEyeWidth, lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, rEyeWidth, rEyeHeight);
//creates the right eye
    fill(pupilColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * lEyeWidth, .3 * lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * rEyeWidth, .3 * rEyeHeight);

//creates the nose
    fill(noseColor);
    beginShape();
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 - .05 * faceWidth, height / 2 + .1 * faceHeight);
    curveVertex(width / 2 - .1 * faceWidth, height / 2 + .15 * faceHeight);
    curveVertex(width / 2, height / 2 + .2 * faceHeight);
    curveVertex(width / 2, height / 2 + .22 * faceHeight);
    endShape();

//creates the mouth
    fill(mouthColor);
    arc(width / 2, height / 2 + faceHeight * .3, faceWidth * .2, faceHeight * .2, 0, PI, CHORD);

}

//creates the randomization when mouse is clicked
function mouseClicked() {
    strokeSize = random(1, 5);    //randomizes the stroke size of the face

    faceWidth = random(250,400);    //randomizes face width
    faceHeight = random(250, 600);    //randomizes face height
//randomizes the color of the face
    faceColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomization of eye sizes and colors
    eyeColor = color(random(0, 255), random(0, 255), random(0, 255));
    lEyeWidth = random(20, .3 * faceWidth);
    lEyeHeight = random(20, .3 * faceHeight);
    rEyeWidth = random(20, .3 * faceWidth);
    rEyeHeight = random(20, .3 * faceHeight);
    pupilColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes nose color
    noseColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes mouth color
    mouthColor = color(random(0, 255), random(0, 255), random(0, 255));
}

Project-02-Variable-Face

My process for this project was to start with a basic face that has many changing variables, such as the eyes both independently changing from each other and same with the pupils. The background idea came from the chaotic energy given by the changing of the variable faces.

facesDownload
//Anthony Prestigiacomo aprestig section:C

var eyeheightr=60;    //right eye height
var eyewidthr=60;    //right eye width
var eyeheightl=60;    //left eye height
var eyewidthl=60;    //left eye width
var facewidth=300;    //face width
var faceheight=400;    //face height
var eyel=200;    //left eye x value
var eyer=280;    //right eye x value
var pupl=200;    //left pupil x value
var pupr=280;    //right pupil y value
var pupheightl=25;    //left pupil height
var pupheightr=25;    //right pupil height
var pupsizel=25;    //left pupil width
var pupsizer=25;    //right pupil width
var facecolor=150;    //face color
var eyecolor=222;    //eye color
var pupilcolor=80;    //pupil color
var nosecolor=100;    //nose color
var nosewidth=80;    //nose width
var noseheight=60;    //nose height
var nostcolor=50;    //nostril color
var nost=20;    //nostril width
var nosthl=20;    //left nostril height
var nosthr=20;    //right nostril height
var mheight=40;    //mouth height
var mwidth=40;    //mouth width
var mcolor=25;    //mouth color

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

function draw() {
  strokeWeight(0);
  frameRate(5);
  //background colors
  var R=color(random(0,255),random(0,255),random(0,255));
  var G=color(random(0,255),random(0,255),random(0,255));
  var B=color(random(0,255),random(0,255),random(0,255));
//rectangle 1 colors
  var Rr=color(random(100,200),random(0,10),random(0,10));
  var Gg=color(random(60,220),random(0,0),random(0,25));
  var Bb=color(random(1,205),random(0,10),random(0,10));
//rectangle 2 colors
  var Rr2=color(random(0,10),random(10,250),random(0,10));
  var Gg2=color(random(0,20),random(100,230),random(0,5));
  var Bb2=color(random(1,25),random(180,210),random(0,10));
//rectangle 3 colors
  var Rr3=color(random(0,10),random(20,25),random(0,210));
  var Gg3=color(random(0,20),random(10,23),random(0,255));
  var Bb3=color(random(1,25),random(10,20),random(180,210));
  background(R,G,B);
  fill(Rr,Gg,Bb);
  rect(0,0,200,100);    //rectangle 1
  fill(Rr2,Gg2,Bb2);
  rect(70,380,200,300);   //recatngle 2
  fill(Rr3,Gg3,Bb3);
  rect(200,200,300,200);    //rectangle 3
  fill(facecolor);
  ellipse(width/2,height/2,facewidth,faceheight);    //head
  fill(eyecolor);
  ellipse(eyer,230,eyewidthr,eyeheightr);    //right eye
  ellipse(eyel,230,eyewidthl,eyeheightl);    //left eye
  fill(pupilcolor);
  ellipse(pupl,230,pupheightl,pupsizel);    //left pupil
  ellipse(pupr,230,pupheightr,pupsizer);    //right pupil
  fill(nosecolor);
  ellipse(width/2, height/2,nosewidth,noseheight);    //nose
  fill(nostcolor);
  ellipse((width/2)-20, height/2, nost,nosthl);    //left nostril
  ellipse((width/2)+20, height/2, nost,nosthr);    //right nostril
  fill(mcolor);
  arc(width/2, height/1.6, mwidth,mheight, 0, PI, CHORD);    //mouth
}

function mouseClicked() {
    facewidth = random(200, 400);
    faceheight = random(200, 600);
    eyewidthr = random(40,80);
    eyeheightr = random(40, 80);
    eyewidthl = random(40, 80);
    eyeheightl = random(40,80);
    pupheightl = random(10,40);
    pupheightr = random(10,40);
    pupsizel = random(10,40);
    pupsizer = random(10,40);
    nosewidth = random(60,120);
    facecolor = color(random(0,255),random(0,255),random(0,255));
    eyecolor = color(random(0,255),random(0,255),random(0,255));
    pupilcolor = color(random(0,255),random(0,255),random(0,255));
    nosecolor = color(random(0,255),random(0,255),random(0,255));
    nostcolor = color(random(0,255),random(0,255),random(0,255));
    noseheight = random(55,75);
    nosthl = random(15,30);
    nosthr = random(15,30);
    mheight = random(30,50);
    mwidth = random(10,100);
    mcolor = color(random(0,255),random(0,255),random(0,255));
}

Project 2- Variable Faces

For this week’s project, I started off by creating a rough sketch on photoshop so I can refer back to the points when I code the image. My goal for myself this week with the project was to create something that was fun and colorful, which I thought fit perfectly with the changing features.

my photoshop sketch
chris variable project
var eyewhite=15
var eyeblack=10
var hairheight=300
var hairwidth=250
var cheek=30
var lips=20
var glasseswidth=55
var glassesheight=40

function setup() {
    createCanvas(640,480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(220,255,254);
	noStroke();
	fill(68,27,85); //dark purple
	ellipse(325,300,hairwidth, hairheight); //hair right
	ellipse(290,260,hairwidth, hairheight); //hair left
	fill(42,15,53);//dark shadow purple
	ellipse(313,300,160,220); //shadow hair
	noFill();
	stroke(248,50,143);
	ellipse(245,330,cheek);//left earring
	ellipse(385,330,cheek);//right earring
	noStroke();
	fill(242,183,169); //neck culture
	rect(290,350,50,74); //neck
	fill(255,208,197); //light peach
	ellipse(313,260,160,185); //top circle head
	triangle(241,301,385,301,315,391); //chin
	fill(248,50,143); //pink
	rect(146,410,335,150,50);//shirt
	fill(68,27,85); //dark purple
	ellipse(257,200,138,150); //bang1
	ellipse(354,215,114,118); //bang2
	fill(255);
	ellipse(285,285,eyewhite);//left white eye
	ellipse(340,285,eyewhite);//right white eye
	fill(0);
	ellipse(289,285,eyeblack);//left black eye
	ellipse(344,285,eyeblack);//right black eye
	fill(255,172,152);
	ellipse(314,310,20);//nose
	ellipse(260,310,cheek);//left cheek
	ellipse(370,310,cheek);//right cheek
	fill(248,50,143);//pink
	ellipse(311,345,lips);
	ellipse(319,345,lips);
	noFill();
	stroke(116,251,218); //turquoise
	strokeWeight(2);
	rect(250,266,glasseswidth,glassesheight,10); //glasses
	rect(320,266,glasseswidth,glassesheight,10); //glasses
}

function mousePressed(){
    eyewhite = random(15,45);
    eyeblack = random(10,25);
    hairheight = random(300,500);
    hairwidth = random(250,450);
    cheek = random(30,50);
    lips = random(5,30);
    glassesheight = random(30,50);
    glasseswidth = random(50,65);
}

Project 2 – Variable Faces

alienface
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 160;
var eyeSize = 65; 
var eyeWidth = 70;
var eyeHeight = 100;
var eyeTwinkleX = 23;
var eyeTwinkleY = 18;
var tongueSize = 36;
var B = 100;
var crownTipY = 140;


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

function draw() {
	//background color
	background(color(B));

	//alien head shape
	strokeWeight(0);
	fill(171,190,188);
	beginShape();
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width * (3/4), height/2 - (faceHeight - 40));
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	strokeWeight(0);
	beginShape();
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex((width/4) * 3, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	//crown
	strokeWeight(0);
	fill(214,178,69);
	triangle(376,crownTipY,350,200,318,184);
	triangle(343,185,343,crownTipY - 20,305,181);
	triangle(307,crownTipY - 25,295,178,325,186);

	strokeWeight(0);
	fill(171,190,188);
	quad(353,197,295,171,276,190,342,230);


	//mouth - stagnant
	fill(0);
	stroke(0);
	ellipse(240,395,43,10);

	//tongue
	fill(0,135,53);
	quad(251,396,228,396,230,401,248,404);
	beginShape();
	curveVertex(230,401);
	curveVertex(248,401);
	curveVertex(width/1.98, height/2 + 2.6 * tongueSize);
	curveVertex(width/2, height/2 + 2.6 * tongueSize);
	endShape(CLOSE);

	//right eye
	translate(width/1, height/90);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,295,eyeWidth,eyeHeight);

	//left eye
	translate(width/4.8,height/2.95);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,95,eyeWidth,eyeHeight);

	//left eye twinkle
	fill(255);
	ellipse(191,127,eyeTwinkleX,eyeTwinkleY);

	//right eye twinkle
	fill(255);
	ellipse(119,height/14 - 57.5,eyeTwinkleX,eyeTwinkleY);
}

function mousePressed() {
	//random assignment of drawing with mouse clicks
	clear(); //reshaping of head instead of adding onto the original shape
	background(0);
	faceWidth = random(200,350);
	faceHeight = random(160,200);
	eyeWidth = random(50,100);
	eyeHeight = random(100,120);
	tongueSize = random(34,42);
	B = random(0,170);
	crownTipY = random(70,160);
	eyeTwinkleX = random(15,23);
	eyeTwinkleY = random(10,18);
}

I was inspired by the alien emoji to create these variable faces. I love aliens 🙂

Project 2-Changing Faces

changing_facesDownload
var eyeSize=40;
var faceWidth=250;
var faceHeight=300;
var browHeight=270
var smile=5
var pie=0
var pupil=18
var lidSize=5

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

function draw() {
    background(165, 222, 214);
    strokeWeight(1);
    noFill()
    ellipse(width/2, height/2, faceWidth, faceHeight);
    strokeWeight(2);
    fill(255);
    var eyeL=width/2-faceWidth*0.25
    var eyeR=width/2+faceWidth*0.25
    ellipse(eyeL, height/2, eyeSize); //eyes
    ellipse(eyeR, height/2, eyeSize);
    fill(0);
    ellipse(eyeL, height/2, pupil); //pupils
    ellipse(eyeR, height/2, pupil);
    fill(118, 186, 177);
    arc(eyeL, height/2, eyeSize + lidSize, eyeSize, 9.4, 2*PI); //eyelids
    arc(eyeR, height/2, eyeSize + lidSize, eyeSize, 9.5, 2*PI);
    noFill();
    strokeWeight(4);
    eyeL=width/2-faceWidth*0.35
    eyeR=width/2+faceWidth*0.35
    line(eyeL, 270, 200, browHeight); //brows
    line(eyeR, 270, 275, browHeight)
    arc(width/2, 375, 100, smile, 0, pie*PI);//mouth
}

function mousePressed() {
    browHeight=(random(240, 300) | 0);
    console.log(browHeight);
    smile=random(3, 75);
    pupil=random(10, 30);
    pie=random(0,1);
    eyeSize=random(40, 60);
    lidSize=(0, 6)
}

I decided to make the various expressions of someone who would get punched in the face at a bar.

Project-02-Variable-Face

Alien generator!

I wanted to do something a little less straightforward than a human face so I decided to do alien faces, with variable star background behind as well. I also played around with how to do the mouse click function and using noLoop and loop to assign all random variables in the main program instead of assigning variables in the mousePressed function.

AlienFace

var centerX = 240;
var centerY = 320;

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

function draw() {
background(0);
noStroke();
var maincolorR = random(0, 255);
var maincolorG = random(0, 255);
var maincolorB = random(0, 255);
var headWidth = random(50,460);
var headHeight = random(50, 460);
var earWidth = random(10,70);
var earHeight = random(10,70);
//space backrgound
    fill(250);
	var starSize = random(4,7);
	for (let i = 0; i < 40; i++){
        ellipse(random(0,480), random(0,640), starSize, starSize);
	}
	for (let i = 0; i < 60; i++){
        ellipse(random(0,480), random(0,640), starSize-2, starSize-2);
	}
//neck
    //filling with primary color
        fill(maincolorR,maincolorG,maincolorB);
        var widthNeck = random(30, headWidth);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
    //adding dark tone over for depth
        fill(0,0,0,50);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
//ears
    //left ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
    //right ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
//body
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,640,random((widthNeck+30),480),random(80,200));
//antenna
    //left antenna
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
    //right antenna
        fill(maincolorR,maincolorG,maincolorB);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
//face
	fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,centerY,headWidth,headHeight);
//nose 
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
    fill(0,0,0,50);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
//eyes
    //left eye
	    fill(0,0,0);
	    ellipse(centerX-random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
	//right eye
        ellipse(centerX+random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
//mouth
    ellipse(centerX, centerY+(headHeight/3), random(20,headWidth/6), random(5, headHeight/9));
//number
    fill(250);
    text('specimen number:',145,50);
    text(round(random(0,50000)), 260, 50);
noLoop();
}

function mouseReleased() {
  loop();
}

Project 2 – Variable Face

sketch
//Joseph Kim
//Section D
var eyeWidth = 45;
var eyeHeight = 40;
var faceWidth = 200;
var faceHeight = 260;
var mouthWidth = 60;
var mouthHeight = 30;
let eColor = 180;
//eyes
let fColor = 80;
//face
let bgColor = 0;
//background
let mColor = 120;
//mouth
let earColor = 40;
//ear
let hColor = 20;
//hair
let bColor = 0;
//eyebrow
let iColor = 0;
//iris

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(bgColor);
    noStroke();
    fill(fColor);
    rect((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), faceWidth, faceHeight / 2);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    //face

    fill(eColor);
    var eyeLX = width / 2 - faceWidth * 0.25; 
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD); 
    arc(eyeRX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD);
    //eyeball

    fill(earColor);
    var earLX = (width - faceWidth) / 2;
    var earRX = width - ((width - faceWidth) / 2);
    arc(earLX, height / 2, 30, 30, PI / 2, radians(270), CHORD);
    arc(earRX, height / 2, 30, 30, radians(270), PI / 2, CHORD);
    //ears

    stroke(bColor);
    strokeWeight(5);
    strokeCap(SQUARE);
    var eyebrowLX = width / 2 - faceWidth * 0.35;
    var eyebrowRX = width / 2 + faceWidth * 0.35;
    line(eyebrowLX, (height / 2) - faceHeight / 6, eyebrowLX + (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    line(eyebrowRX, (height / 2) - faceHeight / 6, eyebrowRX - (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    //eyebrow
    
    fill(iColor);
    noStroke();
    circle((width / 2) - (faceWidth * 0.25), height / 2, 10);
    circle((width / 2) + (faceWidth * 0.25), height / 2, 10);
    //iris
    
    noStroke();
    fill(hColor);
    arc((width - faceWidth) / 2, ((height - faceHeight) / 2), faceWidth, 90, 0, PI / 2, PIE);
    arc(width - ((width - faceWidth) / 2), ((height - faceHeight) / 2), faceWidth, 90, PI / 2, PI, PIE);
    //hair

    noStroke();
    fill(mColor);
    arc((width / 2), (height / 2) + (faceHeight / 4), mouthWidth, mouthHeight, 0, PI);
    //mouth

}

    function mousePressed() {

    faceWidth = random(120, 300);
    faceHeight = random(200, 400);
    eyeWidth = random(20, 70);
    eyeHeight = random(40, 70);
    mouthWidth = random(10, 100);
    mouthHeight = random(10, 80);
    mouthColor = random(30, 200);
    eColor = color(random(255), random(255), random(255));
    fColor = color(random(255), random(255), random(255));
    bgColor = color(random(255), random(255), random(255));
    mColor = color(random(255), random(255), random(255));
    earColor = color(random(255), random(255), random(255));
    hColor = color(random(255), random(255), random(255));
    bColor = color(random(255), random(255), random(255));
    iColor = color(random(255), random(255), random(255));
    


    
}

I first began with the sample code provided on the website. Then, I began customizing the shapes, and added facial features that I thought would be interesting. I found that using variables instead of specific coordinate points are actually easier to work with because I don’t have to be attentive of decimal points. A good part of my process was from trial and error, learning from mistakes. In order to add more visual interest, I had to do some research on how to apply variable color.