Katherine Hua – Project 02 – Variable Face

sketch

/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/

var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;



 
function setup() {
    createCanvas(480, 640);
    background(backgroundColorR, backgroundColorG, backgroundColorB);
}
 
function draw() {

	//background
	background(backgroundColorR, backgroundColorG, backgroundColorB);
	
	ellipse(x, 80, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 160, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 240, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 320, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 400, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 480, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	ellipse(x, 560, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	//y
 	ellipse(y, 80, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 160, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 240, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 320, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 400, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 480, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	ellipse(y, 560, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	//z
 	ellipse(z, 80, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 160, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 240, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 320, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 400, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 480, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	ellipse(z, 560, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	//a
 	ellipse(a, 80, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 160, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 240, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 320, 50, 50);
  	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 400, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 480, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	ellipse(a, 560, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	//b
 	ellipse(b, 80, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 160, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 240, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 320, 50, 50);
  	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 400, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 480, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
 	ellipse(b, 560, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	//c
 	ellipse(c, 80, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 160, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 240, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 320, 50, 50);
  	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 400, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 480, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
 	ellipse(c, 560, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	//d
 	ellipse(d, 80, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 160, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 240, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 320, 50, 50);
  	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 400, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 480, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
 	ellipse(d, 560, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	//e
	ellipse(e, 80, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 160, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 240, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 320, 50, 50);
  	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 400, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 480, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
 	ellipse(e, 560, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	//f
	ellipse(f, 80, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 160, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 240, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 320, 50, 50);
  	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 400, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 480, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
 	ellipse(f, 560, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}

    //character shape
    strokeWeight(5);
    point(0, 640);
    point(40, 440);
    point(70,320);
    point(150, 160);
    point(300, 160);
    point(380, 300);
    point(420, 440);
    point(480, 640);
    strokeWeight(5);
    fill(250-skin, 223-skin, 198-skin);
    beginShape();
    curveVertex(0, 640);
    curveVertex(0, 640);
    curveVertex(40, 440);
    curveVertex(70, 320);
    curveVertex(150, 160);
    curveVertex(300, 160);
    curveVertex(380, 300);
    curveVertex(420, 440);
    curveVertex(480, 640);
    curveVertex(480, 640);
    endShape();
    beginShape();
    curveVertex(120, 500);
    curveVertex(120, 500);
    curveVertex(170, 560);
    curveVertex(210, 565);
    curveVertex(170, 440);
    curveVertex(150, 400);
    curveVertex(150, 440);
    endShape();
    beginShape();
    curveVertex(360, 500);
    curveVertex(360, 500);
    curveVertex(310, 560);
    curveVertex(270, 565);
    curveVertex(310, 440);
    curveVertex(330, 400);
    curveVertex(330, 440);
    endShape();

//hair
    if (hair < 1) {
    	fill(0, 0, 0)
   		arc(230, 280, 300, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 2) {
   		fill(0, 0, 0)
   		arc(230, 280, 350, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   		fill(0,0,0);
   		rect(52, 275, 50, 125, 5);
   		rect(358, 275, 50, 125 ,5);
   	}
   	else if (hair < 3) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(120, 120, 75, 75);
   		ellipse(340, 120, 75, 75);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 4) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(57, 280, 80, 50);
   		ellipse(403, 280, 80, 50);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}

 //brows
 	if (brows < 1) {
 		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
    	arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
 	}
 	else if (brows < 2) {
		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI, PI+HALF_PI);
    	arc(270, 275, 30, 30, PI+HALF_PI, 0);
 	}
    else if (brows < 3) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+HALF_PI, 0);
    	arc(270, 275, 30, 30, PI, PI+HALF_PI);
    }
    else if (brows < 4) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    	arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    }


    //eyes
    //whites
    fill(255);
    ellipse(180, 300, eyeWidth, eyeHeight);
    ellipse(270, 300, eyeWidth, eyeHeight);
    //pupil
    fill(0);
    ellipse(180, 300, pupilWidth, pupilHeight);
    ellipse(270, 300, pupilWidth, pupilHeight);


    //lips
    if (lips < 1) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    }
    else if (lips < 2) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	fill(0);
    	ellipse(225, 307, 20, 5);
    }
    else if (lips < 3) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
   		ellipse(225, 300, 40, 15);
   		fill(0);
    	ellipse(225, 307, 20, 5);
   		noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}
   	else if (lips < 4) {
   		fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}

   	//cheeks
   	fill(cheekColorR, cheekColorG, cheekColorB);
   	noStroke();
   	ellipse(140, 320, 40, 20);
   	ellipse(320, 320, 40, 20);

   	stroke(0,0,0);
}

function mousePressed() {
	backgroundColorR = random(200, 255);
	backgroundColorG = random(137, 255);
	backgroundColorB = random(175, 255);
	eyeWidth = random (30, 40);
	eyeHeight = random(15, 30);
	pupilWidth = random(1,7);
	pupilHeight = random(1,7);
	skin = random(1, 150);
	lips = random(4);
	hair = random(4);
	brows = random(4);
	cheekColorR = random(220, 255);
	cheekColorG = random(180, 255);
	cheekColorB = random(139, 255);
}



This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.

Sketch of my character design

 

Leave a Reply