Category: Project-02-Variable-Face

sketch

/*  Nadia Susanto
    Section B
    nsusanto@andrew.cmu.edu
    Project - 02 - Variable Face */

var mouthW = 70
var mouthH = 70
var bodyW = 205
var bodyY = 205
var greenColor = 104
var blueColor = 149
var armXL = 190
var armXR = 430
var armYL = 210
var eyeBW = 25 //black eye part width
var eyeBH = 60
var eyeWW = 20 //white eye part width
var eyeWH = 40

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

function draw() {
    background(100, 105, 200);
    fill(235, greenColor, blueColor);
    //body
    ellipse(310, 185, bodyW, bodyY);
    //arms
    ellipse(armXL, armYL, 50, 45);
    ellipse(armXR, armYL, 50, 45);
    //cheeks
    fill(235, 104, 149);
    ellipse(250, 175, 25, 15);
    ellipse(370, 175, 25, 15);
    //mouth
    fill(190, 3, 89);
    circle(310, 225, mouthW, mouthH);
    //legs
    fill(221, 3, 89);
    ellipse(235, 295, 40, 70);
    ellipse(385, 295, 40, 70);
    //eyes
    fill("black");
    ellipse(280, 130, eyeBW, eyeBH);
    ellipse(345, 130, eyeBW, eyeBH);
    fill("white")
    ellipse(345, 120, eyeWW, eyeWH);
    ellipse(280, 120, eyeWW, eyeWH);


}

function mousePressed() {
    bodyW = random(200, 270);
    bodyY = random(205, 230);
    greenColor = random(50, 255);
    blueColor = random(0, 255);
    armXL = random(190, 210);
    armXR = random(370, 430);
    armYL = random(140, 210);
    mouthW = random(0, 100);
    mouthH = random(0, 100);

}

This project was definitely a lot of fun to do as my inspiration to do Kirby came from Super Smash Bros. I used adobe illustrator to first sketch out the initial image of what I wanted to do. I animated Kirby to change colors, change how big his suction is, change his body size, and change his arm placements to make it look like he is dancing.

VariableFaces

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 20;
var earHeight = 100;
var bodyWidth = 100;

 
function setup() {
    createCanvas(640, 480);
    noStroke(0);
}
 
function draw() {
    background(205, 92, 92);
    // Head
    fill(250, 250, 250);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //body
    fill(250, 250 , 250);
    var bodyHeight = 200;
    ellipse(width/2, height/2+150, bodyWidth, bodyHeight);
    //Ear
    ellipse(width/2 + 25, height/2-100, earWidth, earHeight);
    ellipse(width/2 - 25, height/2-100, earWidth, earHeight);
    // Eyes
    fill(173, 216, 230);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //nose
    fill(255, 182, 193);
    triangle(310, 250, 330, 250, 320, 260);
}
 
function mousePressed() {
    // when mouse is pressed, variability occurs in eyesize, earsize, and headsize
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    earHeight = random(100, 200);
    bodyWidth = random(100, 300);

    if (faceWidth>=120||faceHeight>=170) {
    	eyeSize = random(20, 30);
    }  else {
    	eyeSize = random(10, 20);
    }
    if (faceWidth>=120||faceHeight>=170) {
    	earHeight = random(150, 250);
    }  else {
    	earHeight = random(100, 175);
    }

}

I spent quite a bit of time deciding what character to draw and I finally decided on a bunny. I enjoyed playing around with the random sizes for the bunny’s ears, eyes, and head shape.

Emma’s Variable Faces

/* 
Emma Nicklas-Morris
Section B
enicklas@andrew.cmu.edu
Variable Faces
*/

var faceShapeX = 280;
var faceShapeY = 330;
var hairLen = 300;
var mouthW = 120;
var mouthH = 80;
var noseX1 = 215;
var noseY1 = 255;
var noseX2 = 240;
var noseY2 = 205;
var noseX3 = 265;
var noseY3 = 255;
let colors = ['blue', 'black', 'green', 'brown', 'grey'];
let color = 'black';
var bodyX = 200;
var bodyY = 400;
let bodColor = "red";
let bodColors = ['orange', 'yellow', 'navy', 'purple', 'pink'];

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

function draw() {
    background("lightblue");

    // Body
	fill(bodColor);
	ellipse(width/2, height - 50, bodyX, bodyY);

	// Face shape
	strokeWeight(0);
	fill('#E0AC69');
	ellipse(width / 2, width / 2, faceShapeX, faceShapeY);
	var eyeLX = width / 2 - faceShapeX * 0.25;
    var eyeRX = width / 2 + faceShapeX * 0.25;

	// Mouth
	fill('#E77471');
	strokeWeight(1);
	arc(width / 2, height/2, mouthW, mouthH, 0, PI); 

	// Nose 
	fill('#C58917');
	strokeWeight(0);
	triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY1); 

	// White of eyes
	strokeWeight(2);
	fill('white');
	ellipse(eyeLX, height/4, 50, 25);  
	ellipse(eyeRX, height/4, 50, 25);

	// Pupils
	fill(color);
	ellipse(eyeLX, height/4, 20, 20);  
	ellipse(eyeRX, height/4, 20, 20);

	// Hair
	strokeWeight(0);
	arc(300, 155, 250, 230, PI + QUARTER_PI, TWO_PI + QUARTER_PI); 
	arc(260, 200, 340, 290, PI, PI + HALF_PI, OPEN);
	rect(360, 180, 65, hairLen);
	rect(80, 140, 45, hairLen + 40);

}

function mousePressed() {
	faceShapeX = random(230, 300);
	faceShapeY = random(320, 370);
	hairLen = random(100, 500);
	mouthW = random(10, 100);
	mouthH = random(10, 50);
	noseX1 = random(210, 220);
    noseY1 = random(250,260);
    noseX2 = random(235, 245);
    noseY2 = random(200, 210);
    noseX3 = random(260, 270);
    color = random(colors);
    bodColor = random(bodColors);
    bodyX = random(200, 300);
}

My process was to start with a hard coded face and then define variables and change them slightly. I think my final product is pretty good for someone who struggles with making illustrations AND faces. I struggled with trying to figure out how to change the hair more drastically as the facial shape changes than just changing the hair length.

sketch

// Sewon Park
// sewonp
// Section B

var eyeSize = 8;
var faceWidth = 220;
var faceHeight = 230;
var bodyc = 192;
var earc = 192;
var umbrellac = 150;


 
function setup() {
    createCanvas(600, 480);
}
 
function draw() {
    background(0);
    fill(bodyc,200,200)
    ellipse(width / 2, height / 2, faceWidth,faceHeight) // body (Gray)
    var eyeLX = width / 2 - faceWidth * 0.25;
    
    fill(255,255,255)
    var eyeRX = width / 2 + faceWidth * 0.25; 
    ellipse(eyeLX,height/2.8,eyeSize,eyeSize); // left eye
    ellipse(eyeRX,height/2.8,eyeSize,eyeSize); // right eye
    
    fill(0,0,0)
    ellipse(eyeLX,height/2.8,eyeSize/2,eyeSize/2); // left pupil
    ellipse(eyeRX,height/2.8,eyeSize/2,eyeSize/2); // right pupil
    
    fill(0,0,0)
    ellipse(width/2,height/2.6,eyeSize+1,eyeSize-3) //nose
    line(width/2,height/2.6,width/1.8,height/2.65)
    line(width/2,height/2.6,width/1.8,height/2.55)
    line(width/2,height/2.6,width/2.2,height/2.65)
    line(width/2,height/2.6,width/2.2,height/2.55) //whiskers

    fill(umbrellac,100,50)
    triangle(width/2,0,width/2.3,30,width/1.7,30)
    rect(200,30,10,140)
    arc(width/2,30,200,40,PI,0) // umbrella
    
    fill(255,250,250)
    ellipse(width/2,height/1.65,faceWidth/1.3,faceHeight/1.6) // body (White)

    fill(180,180,180)
    arc(width/2,height/2+5,eyeSize,eyeSize,0,PI) 
    arc(width/2.2,height/2+5,eyeSize,eyeSize,0,PI)
    arc(width/1.85,height/2+5,eyeSize,eyeSize,0,PI) //stomach patterns

    fill(earc,earc,255)
    triangle(width/2.5,height/3.4,width/2.4,height/6,width/2.3,height/3.4) //left ear
    triangle(width/1.8,height/3.4,width/1.7,height/6,width/1.68,height/3.4) //right ear

}
 
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, 240); //face width changing
    faceHeight = random(230, 270); //face height changing
    eyeSize = random(5, 15); // eye size changing
    bodyc = random(100,300) //body color changing
    earc = random(100,300) //ear color changing
    umbrellac = random(0,150) // umbrella color changing 
    }

For this project, I wanted to experiment with my spirit animal Totoro. I wanted its body and umbrella to stand out, so I made the colors change with every click. Because Totoro has a leaf umbrella, I set the colors to change around green and brown.