Category: Project-02-Variable-Face

Crystal-Xue-Project-02

sketch-105.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_02

var nosePointX = 380;
var nosePointY = 340;
var chinPointX = 372;
var chinPointY = 442;
var jawPointX = 240;
var jawPointY = 430;
var earPointX = 180;
var earPointY = 310;
var lighteningR1 = 255;
var lighteningG1 = 0;
var lighteningB1 = 0;
var lighteningR2 = 0;
var lighteningG2 = 0;
var lighteningB2 = 255;
var backgroundR = 113;
var backgroundG = 114;
var backgroundB = 208;
var count = 0;

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

function draw() {
	background(backgroundR, backgroundG, backgroundB);

    //hair
    fill(255);
    noStroke();
    ellipse(230,320,220,250);
    quad(120, 320, 190, 500, 300, 500, 310, 300);
    triangle(200, 500, 160, 500, 190, 470);

    //face
    stroke(255);
    strokeWeight(3);
    fill(20);
    beginShape();

    //forehead
    curveVertex(220, 335);       
    curveVertex(220, 330);       
    curveVertex(220, 300);      
    curveVertex(220, 270);        
    curveVertex(220, 245);       
	curveVertex(250, 240);
	curveVertex(300, 235);

    //browbone
	curveVertex(335, 262);

	//nose
	curveVertex(347, 278);
	curveVertex(348, 305);
	curveVertex(nosePointX, nosePointY);
	curveVertex(nosePointX - 15, nosePointY + 21);

    //mouth
	curveVertex(365, 373);
	curveVertex(372, 381);
    curveVertex(368, 391);
    curveVertex(372, 400);

    //chin
    curveVertex(368, 422);
    curveVertex(chinPointX, chinPointY);   
    curveVertex(chinPointX - 7, chinPointY + 16);
    curveVertex(345, 462);
    curveVertex(305, 458);

    //jaw
    curveVertex(jawPointX, jawPointY);       
    curveVertex(220, 370);

    //ear
    curveVertex(205, 375);
    curveVertex(earPointX, earPointY + 45);   
    curveVertex(170, 325);
    curveVertex(earPointX, earPointY);     
    curveVertex(199, 315); 
    curveVertex(earPointX + 35, earPointY + 25);            
    endShape(CLOSE);

    //lightening bolt
    stroke(lighteningR2, lighteningG2, lighteningB2);
    strokeWeight(5)
    line(302, 235, 286, 384);
    line(289, 448, 318, 318);
    push();
    noStroke();
    fill(lighteningR1, lighteningG1, lighteningB1);
    triangle(304, 235, 288, 384, 343, 270);
    quad(323, 308, 291, 448, 352, 310, 346, 273);
    pop();
}

function mousePressed() {
    nosePointX = random(375, 385);
    nosePointY = random(335, 345);
    chinPointX = random(368, 376);
    chinPointY = random(433, 450);
    jawPointX = random(235, 245);
    jawPointY = random(425, 450);
    earPointX = random(175, 185);
    earPointy = random(300, 320);
    backgroundR = random(100, 200);
    backgroundG = random(100, 200);
    backgroundB = random(100, 200);

    count+=1;
    if (count%3==0){
        lighteningR1 = 255;
        lighteningG1 = 0;
        lighteningB1 = 0;  
        lighteningR2 = 0;
        lighteningG2 = 0;
        lighteningB2 = 255;
    }
    
    if (count%3==1){
    	lighteningR1 = 217;
    	lighteningG1 = 190;
    	lighteningB1 = 77;
        lighteningR2 = 104;
        lighteningG2 = 52;
        lighteningB2 = 30;    	
    }

    if (count%3==2){
    	lighteningR1 = 146;
    	lighteningG1 = 206;
    	lighteningB1 = 234;
        lighteningR2 = 214;
        lighteningG2 = 149;
        lighteningB2 = 183;     	
    }
}

I am inspired by David Bowie figure and pop art color palette. I also approached this project with a slightly different way. Experimenting with the side profile of David Bowie was a lot of fun.

Sarah Kang – Project 02 – Variable Face

ugly

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-02

var faceWidth = 180;
var earDim = 40;
var earhole = 20;
var eyebrows = 170;
var nostril = 7;
var hairlength = 30;
var hairR = 0;
var hairG = 0;
var hairB = 0;
var shirtR = 0;
var shirtG = 0;
var shirtB = 0;

function setup() {
	createCanvas(400, 400);
	background(255, 242, 246);
}

function draw() {
	noStroke();

	//body
	fill(shirtR, shirtB, shirtG);
	ellipse(200, 350, 100, 200);

	//ears
	fill('tan');
	ellipse(115, 200, earDim, earDim);
	ellipse(285, 200, earDim, earDim);
	fill(171, 133, 103);
	ellipse(115, 200, earhole, earhole);
	ellipse(285, 200, earhole, earhole);

	//face
	fill('tan');
	ellipse(200, 200, faceWidth, 180);

	//hair
	fill(hairR, hairG, hairB);
	rect(200, 100, 7, hairlength);

	//eyes 
	fill('white');
	ellipse(165, 200, 30, 15);
	ellipse(235, 200, 30, 15);
	fill('black');
	ellipse(165, 200, 15, 15);
	ellipse(235, 200, 15, 15);

	//nostrils
	ellipse(190, 220, nostril, nostril);
	ellipse(210, 220, nostril, nostril);

	//brows
	stroke(0);
	noFill();
	arc(165, eyebrows, 30, 10, PI, 0, OPEN);
	arc(235, eyebrows, 30, 10, PI, 0, OPEN);

	//mouth
	stroke(176, 60, 79);
	strokeWeight(2);
	arc(200, 240, 30, 30, 0, PI, CHORD);
}

function mousePressed(){
	faceWidth = random(180, 220);
	earDim = random(40, 100);
	earhole = random(40, 80);
	eyebrows = random(140, 180);
	hairlength = random(20, - 80);
	nostril = random(4, 14);
	hairR = random(0, 225);
	hairB = random(0, 225);
	hairG = random(0, 225);
	shirtR = random(0, 225);
	shirtB = random(0, 225);
	shirtG = random(0, 225);
}

I enjoyed playing around with different variables for my face. Adjusting the colors to only display certain shades that were still discernible was pretty difficult, so I decided to completely randomize the colors instead.

Carly Sacco – Project 02 – Variable Face


sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project - 02 

var eyeSize = 20
var leftLeg = 20
var rightLeg = 20
var mouthSize = 40

var armX = 365
var armY = -90

var backColor = 100

function setup() {
    createCanvas(640, 480);
}
function draw () {
    background(100, 100, backColor);
	
	//body
	fill(255, 255, 255);
	noStroke();
	//ellipse(325,300,150,150);
	//rect(250, 200,150, 60, 60);
	rect(250, 150, 150, 275, 90, 90, leftLeg, rightLeg);
	
	//eyes
	fill(0);
	ellipse(300, 200, 15, eyeSize);
    ellipse(350, 200, eyeSize, 15);	
	
	//mouth
	fill(0);
	ellipse(325, 250, mouthSize, mouthSize);
	
	//leftarm
	fill(255);
    rotate(PI / 3.0);
    rect(armX, armY, 40, 60, 90, 0, 90, 0);
	rect(armX + 55, armY - 160, 40, 60, 0, 90, 0, 90);
}
function mousePressed() {
	leftLeg = random(30, 90);
	rightLeg = random(90, 30);
	eyeSize = random(10, 45);
	mouthSize = random(40,80);
	armX = random(365, 380);
	armY = random(-80, -100);
	backColor = random(0, 300);
}

After I decided I wanted my variable face to represent a ghost, I thought of all the aspects of the ghost that could change. This lead to me create randomized variations of changes to the body, face, and arms.

Fallon Creech-Project-02-Variable-Face


sketch

For this project, I tried making a panda that changed its facial expression when the mouse is clicked; to simulate this, I defined variables for most of the facial features and decided to limit the variances to certain features; those features include the eyes, cheeks, nose, and ears. 

//Fallon Creech
//Section A
//fcreech@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 375;
var faceHeight = 275;
var cheekSize = 20;
var noseWidth = 30;
var noseHeight = 20;
var noseColor = 0;
var patchSize = 50;
var earSize = 100;

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

function draw() {
    //ears
    noStroke();
    fill(0);
    var earLX = width / 2 - faceWidth * 0.40;
    var earRX = width / 2 + faceWidth * 0.40;
    ellipse(earLX, height / 2.5, earSize, earSize);
    ellipse(earRX, height / 2.5, earSize, earSize);

    //face
    fill(255);
    ellipse(width / 2, height / 1.75, faceWidth,  faceHeight);

    //black patches
    noStroke();
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 1.6, patchSize, patchSize);
    ellipse(eyeRX, height / 1.6, patchSize, patchSize);

    //eyes
    noStroke();
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 1.575, eyeSize, eyeSize);
    ellipse(eyeRX, height / 1.575, eyeSize, eyeSize);

    //nose
    fill(noseColor);
    ellipse(width / 2, height / 1.40, noseWidth, noseHeight);

    //cheeks
    fill(255, 200, 200);
    var cheekLX = width / 2 - faceWidth * 0.375;
    var cheekRX = width / 2 + faceWidth * 0.375;
    ellipse(cheekLX, height / 1.5, cheekSize, cheekSize);
    ellipse(cheekRX, height / 1.5, cheekSize, cheekSize);
}

function mousePressed() {
    eyeSize = random(10, 30);
    earSize = random(80, 120);
    cheekSize = random(5, 20);
    noseColor = random(0, 255);
}

Jacky Tian’s Project 02

sketch

// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 02

var earSize = 20
var hairColor = 0
var glassSize = 45
var pocketPosition = 450
var rgb1 = 250
var rgb2 = 250
var rgb3 = 250
var mouthSize = 30

function setup() {
    createCanvas(600, 600);
    background(180);
 
}

function draw() {   
//Background
    stroke(0);
    fill(rgb1, rgb2, rgb3);
    rect(80, 50, 80, 550);
    fill(rgb2, rgb1, rgb3);
    rect(110, 80, 140, 520);
    fill(rgb3, rgb1, rgb2);
    rect(300, 100, 200, 500);
    fill(rgb1, rgb3, rgb2);
    rect(160, 170, 300, 430);
    fill(rgb2, rgb3, rgb1);
    rect(400, 200, 200, 400);

//Neck
    noStroke();
    fill(230,214,169);
    quad(240, 310, 235, 370, 320, 370, 315, 310);

//Ears
    stroke(240,224,179);
    fill(240,224,179);
 
    rect(195, 240, earSize, 40, 10);
    rect(340, 240, earSize, 40, 10);

//Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    
    beginShape();
    vertex(210, 270); 
    vertex(210, 310);  
    vertex(250, 335);  
    vertex(310, 335); 
    vertex(340, 310); 
    vertex(340, 225);   
    vertex(215, 225); 
    endShape();

//Hair
    stroke(0);
    fill(hairColor);
    strokeWeight(4);

    beginShape();
    vertex(190, 220);
    vertex(205, 150);
    vertex(270, 125);
    vertex(338, 150);
    vertex(360, 218);
    vertex(342, 235);
    vertex(330, 235);
    vertex(290, 225);
    vertex(250, 235);
    vertex(217, 230);
    vertex(210, 230);
    endShape();

//Glasses
    stroke(225, 215, 0);
    strokeWeight(3);
    fill(255);
    rect(220, 240, glassSize, glassSize, 15);
    rect(288, 240, glassSize, glassSize, 15);
    line(265, 250, 288, 250);

//Nose
    stroke(0);
    strokeWeight(2);
    line(275, 280, 270, 300);
    line(270, 300, 275, 300);

//Mouth
    noStroke();
    fill(290,214,159);
    ellipse(290, 320, mouthSize, 10);

//Jacket
    stroke(0, 0, 0);
    fill(0, 0, 0);
    strokeWeight(4);
    beginShape();
    vertex(150, 365);
    vertex(90, 480);
    vertex(90, 600);
    vertex(430, 600);
    vertex(490, 480);
    vertex(410, 365);
    endShape();  

//Pocket
    stroke(255,165,0);
    rect(190, pocketPosition, 50, 60);

}

function mousePressed() {
    
    earSize = random(15, 30);
    hairColor = random(0, 220);
    glassSize = random(35, 55);
    pocketPosition = random(425, 475);
    rgb1 = random(0, 250);
    rgb2 = random(0, 250);
    rgb3 = random(0, 250);
    mouthSize = random(20, 50)
}

I used my portrait for project 1 as the base file. The three factors for variations I looked into were size, position and color. Based on the three factors, I created variables that can change the sizes of my nose, glasses, and mouth; alter the color of my hair and the background; reposition the pocket on my sweatshirt.

Margot Gersing – Project 02 – Variable Face

I enjoyed taking my self portrait and adapting it for this project. I did make some changes but I tried to keep the same style. It was also super helpful to learn how to use the curveVector(). It took me a while to figure it out but now that I know how to use it, I know it will come in really handy.

margot-project-02


// Margot Gersing - Project 02 - mgersing@andrew.cmu.edu - Section E
var eyeWidth = 30;
var eyeHeight = 30;
var faceWidth = 300;
var faceHeight = 300;
var noseHeight = 200;
var faceColor = 162;
var noseColor = 178;
var eyeColor = 66;
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(202, 211, 227);

    // face
    fill(246, faceColor, 136);
    noStroke();
    ellipse(240, 300, faceWidth,  faceHeight);

    // eyes
    // lids
    noFill();
    strokeWeight(4);
    strokeJoin(ROUND);
    stroke(243, 103, 71);
    beginShape();
    curveVertex(130, 270);
    curveVertex(130, 270);
    curveVertex(150, 250);
    curveVertex(180, 250);
    curveVertex(200, 270);
    curveVertex(200, 270);
    endShape();

    beginShape();
    curveVertex(280, 270);
    curveVertex(280, 270);
    curveVertex(300, 250);
    curveVertex(330, 250);
    curveVertex(350, 270);
    curveVertex(350, 270);
    endShape();

    // eyelash
    strokeWeight(4);
    line(130, 270, 123, 267);
    line(135, 260, 128, 256);
    line(350, 270, 357, 267);
    line(345, 260, 352, 256);

    // iris
    fill(29, eyeColor, 163);
    noStroke();
    ellipse(165, 265, eyeWidth, eyeHeight);
    ellipse(315, 265, eyeWidth, eyeHeight);

    // nose
    fill(255, noseColor, 55);
    triangle(240, noseHeight, 220, 330, 260, 330);

    // mouth
    noFill();
    strokeWeight(6);
    strokeJoin(ROUND);
    stroke(243, 103, 71);
    line(210, 390, 270, 390);
    beginShape();
    curveVertex(210, 390);
    curveVertex(210, 390);
    curveVertex(230, 375);
    curveVertex(250, 375);
    curveVertex(270, 390);
    curveVertex(270, 390);
    endShape();
}
 
function mousePressed() {
    faceWidth = random(270, 450);
    faceHeight = random(250, 450);
    eyeWidth = random(20, 40);
    eyeHeight = random(20, 40);
    noseHeight = random(200, 300);
    faceColor = random(120, 200);
    noseColor = random(160, 200);
    eyeColor = random(30, 110);
    
}

Erin Lim – Project 02 – Variable Face

In my process of making this face, I learned a lot about using variables to code. I also experimented a lot with “else” and “if” to produce what I want to happen.

Erin Lim – Project 02

var eyeSize = 30;
var faceWidth = 260;
var faceHeight = 320;
var noseX = 275;
var noseY = 270;
var noseSize = 15;
var faceX = 300;
var faceY = 265;
var eyecolor = 255;
var pupilcolor = 0;
var lefteyeX = 250;
var eyeY = 200;
var righteyeX = 350;
var leftpupilX = 250;
var rightpupilX = 350;
var pupilY = 200;
var pupilWidth = 10;
var pupilHeight = 10;
var browHeight = 160;
var leftbrowX = 220;
var rightbrowX = 330;
var browY = 160;
var leftbrowWidth = 270;
var rightbrowWidth = 380;
var earHeight = 45;
var earY = 250;
var leftearX = 150;
var rightearX = 450;
var mouthX = 300;
var mouthY = 350;
var mouthSize = 45;
var r = 255;
var g = 241;
var b = 209;

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

function draw() {
  background(227, 103, 84);
  noStroke(0);

    fill(255, 241, 209); //face Q: HOW DO I USE VARIABLES FOR THIS?
    ellipse(faceX, faceY, faceWidth, faceHeight);

    fill(eyecolor, eyecolor, eyecolor); //left eye
    ellipse(lefteyeX, eyeY, eyeSize, eyeSize);

    fill(eyecolor, eyecolor, eyecolor); //right eye
    ellipse(righteyeX, eyeY, eyeSize, eyeSize);

    fill(pupilcolor, pupilcolor, pupilcolor); //right pupil
    ellipse(rightpupilX, pupilY, pupilWidth, pupilHeight);
    if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
        fill(255, 0, 0);
      } else if (mouseX > width*0.66) {
        fill(0, 255, 0);
      } else {
        fill(0, 0, 255);
      }

    fill(pupilcolor, pupilcolor, pupilcolor); //left pupil
    ellipse(leftpupilX, pupilY, pupilWidth, pupilHeight);
    if (mouseX < width*0.33) { // HOW DO I CHANGE FACE COLOR?
        fill(255, 0, 0);
      } else if (mouseX > width*0.66) {
        fill(0, 255, 0);
      } else {
        fill(0, 0, 255);
      }

    circle(mouthX, mouthY, mouthSize); // mouth


    stroke(0, 0, 0); // left eyebrow
    line(220, 160, 270, 160);

    stroke(0, 0, 0); // right eyebrow
    line(330, 160, 380, 160);

    fill(255, 241, 209); // left ear
    circle(150, 250, 45);

    fill(255, 241, 209); // right ear
    circle(450, 250, 45);

    fill(0);  // nose
    ellipse(275, 270, 15, 15);
    ellipse(275 + 20, 270, 15, 15);
}

function mousePressed() {

  faceWidth = random(260, 300);
  faceHeight = random(320, 400);
  eyeSize = random(10, 50);
  noseX = random(275, 300);
  noseY = random(270, 300);
  leftbrowWidth = random(270, 300);
  rightbrowWidth = random(380, 400);
}

Minjae Jeong-Project 02-Variable Face

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-02-Variable-Face

var backgroundR = 181;
var backgroundG = 100;
var backgroundB = 227;
var faceR = 116;
var faceG = 209;
var faceB = 157;
var faceW = 300;
var faceH = 250;
var eyeW = 100;
var eyeH = 130;
var pupilW = 50;
var pupilH = 50;
var mouthW = 200;
var mouthH = 120;

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

function draw() {
    background(backgroundR/2, backgroundG/2, backgroundB/2);
    noStroke();
    //face
    fill(faceR,faceB,faceB);
    ellipse(240, 300, faceW,  faceH);
    //eyes & pupils
    fill(255, 224, 224);
    ellipse(120 ,280, eyeW/2 + 30, eyeH/2);
    ellipse(320, 280, eyeW/2 + 30, eyeH/2);
    fill(0);
    ellipse(120, 280, pupilW, pupilH);
    ellipse(320, 280, pupilW, pupilH);
    //mouth
    fill(255);
    arc(240, 340, mouthW, mouthH, 0, PI);

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    backgroundR = random(150, 200);
    backgroundG = random(50, 150);
    backgroundB = random(180, 255);
    faceR = random(100, 140);
    faceG = random(200, 240);
    faceB = random(170, 190);
    faceW = random(300, 400);
    faceH = random(225, 275);
    eyeW = random(60, 100);
    eyeH = random(80, 120);
    pupilW = random(20, 50);
    pupilH = random(20, 50);
    mouthW = random(160,200);
    mouthH = random(70, 150);
}

Happy weekend

Project – 02 – Variable Face

sketch


function setup () {
  createCanvas(600, 600);
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
}
function draw() {
  background(255 - r, 255 - g, 255 - b);
  fill(r, g, b);
  noStroke(0);
  ellipse(300, 300, headW, headH);
  ellipse(cheekLX, cheekY, headW / 2, headH / 2);
  ellipse(cheekRX, cheekY, headW / 2, headH / 2);

  fill(240);
  ellipse(eyeLX, eyeY, headW / 5, headH / 5);
  ellipse(eyeRX, eyeY, headW / 5, headH / 5);
  fill(230 - r, 230 - b, 230 - g);
  ellipse(eyeLX + (headW / 40), eyeY + (headH / 40), 30, 30);
  ellipse(eyeRX - (headW / 40), eyeY + (headH / 40), 30, 30);
  fill(r - 100, g - 100, b - 100);
  bezier(cheekLX, cheekY, cheekLX + headW / 4, cheekY + headH / 4, cheekRX - headW / 4, cheekY + headH / 4, cheekRX, cheekY);

  fill(r - 30, g - 30, b - 30);
  ellipse(300, 300, noseW, noseH);
  ellipse(300 - (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
  ellipse(300 + (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
}

function mousePressed() {
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
}

Sarah Choi Project-02-Variable-Face

project-02-variable-face

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Assignment-02-A

var noseSize = 20;
var nostrilHeight = 180;
var nostrilWidth = 120;
var eyes = 20

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

function draw() {
    background(250, 157, 157);

    //nose
    stroke(253, 212, 212);
    ellipse(width / 2, height / 2, nostrilHeight,  nostrilWidth);
    stroke(255);
    var nostrilL = width / 2 - nostrilHeight * 0.25;
    var nostrilR = width / 2 + nostrilHeight * 0.25;
    ellipse(nostrilL, height / 2, noseSize, noseSize);
    ellipse(nostrilR, height / 2, noseSize, noseSize);

    //eyes
    noFill();
    strokeWeight(5);
    var eyesL = width / 2 - nostrilHeight * 0.3;
    var eyesR = width / 2 + nostrilHeight * 0.3;
    arc(eyesL, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    arc(eyesR, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    
    //legs
    var legsL = width / 3.5;
    var legsR = width /1.5;
    arc(legsL, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsR, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    var legsLB = width / 3
    var legsRB = width / 1.4
    arc(legsLB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsRB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);

    //tail
    bezier(125, 200, 130, 160, 180, 180, 110, 190);
    bezier(125, 200, 125, 220, 190, 170, 150, 190);
    bezier(150, 190, 110, 220, 160, 220, 160, 210);
}

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.
    nostrilHeight = random(100, 200);
    nostrilWidth = random(75, 150);
    noseSize = random(5, 30);
    eyesL = random(10, 30);
    eyesR = random(10, 30);
    legsL = random(10, 30);
    legsR = random(10, 40);
}

I played around from the template, and I started getting more ideas. I wanted to create an animal and the first thing I thought of was a pig. This is an outline of prominent features of pigs I wanted to portray.