Jonathan Liang – Project 02 – Variable Face

sketch

// Simple beginning template for variable face.
var eyeSize = 30;
var eyeHeight = 2.5 * eyeSize;
var eyeWidth = 2 * eyeSize;
var faceWidth = 300;
var faceHeight = 300;
var canvasWidth = 640;
var canvasHeight = 480;
var pupilWidth = 10;
var pupilHeight = 15;
var mouthStroke = 3;
var llWall = canvasWidth / 2 - eyeSize - pupilWidth;
var lrWall = canvasWidth / 2 - eyeSize + pupilWidth;
var rlWall = canvasWidth / 2 + eyeSize - pupilWidth;
var rrWall = canvasWidth / 2 + eyeSize + pupilWidth;
var tlWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var blWall = canvasHeight / 2 - eyeSize * 3 + eyeSize;
var trWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var brlWall = canvasHeight / 2 - eyeSize * 3 +  eyeSize;
var mouthStart = 320;
var noseSize = eyeSize
var backgroundColor = 1;
var headColor = 1;




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

function draw() {
    switch(backgroundColor){
    	case 1:
    		background('pink');
    		break;
    	case 2:
    		background('lime');
    		break;
    	case 3:
    		background(71, 170, 215);
    		break;
    	case 4:
    		background('magenta');
    		break;
    	case 5:
    		background('cyan');
    		break;
    	case 6:
    		background('orange')
    		break;
    	case 7:
    		background(237,204, 248);
    		break;
    	case 8:
    		background('yellow');
    		break;
    	}

//head
    noStroke();
    switch(headColor){
    	case 1:
    		fill(71, 170, 215);
    		break;
    	case 2:
    		fill('yellow');
    		break;
    	case 3:
    		fill('lime');
    		break;
    	case 4:
    		fill('red');
    		break;
    	case 5:
    		fill('orange');
    		break;

    }
    strokeWeight(3);
    ellipse(canvasWidth / 2, canvasHeight / 2, faceWidth, faceHeight);
    

//white fills on face 
    noStroke();
    fill('white');
    ellipse(canvasWidth / 2, canvasHeight / 2 + eyeSize, faceWidth/1.25, faceHeight/1.25);

//eyes
    ellipse(canvasWidth / 2 - eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);
    ellipse(canvasWidth / 2 + eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);

//pupils
	var xrL = constrain(mouseX, llWall, lrWall);
	var xrR = constrain(mouseX, rlWall, rrWall);
	var yrL = constrain(mouseY, tlWall, blWall);
	var yrR = constrain(mouseY, trWall, brlWall);

    noStroke();
    fill('black');
    ellipse(xrL, yrL, pupilWidth, pupilHeight);
    ellipse(xrR, yrR, pupilWidth, pupilHeight);


//mouth
	noFill();
	stroke('black');
	strokeWeight(mouthStroke);
	line(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2, mouthStart);
	arc(canvasWidth / 2, mouthStart - faceWidth / 4, faceWidth * 0.65, faceWidth * 0.5, 0, PI, OPEN);

	
//left whiskers	
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight);
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
	line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);
	
//right whiskers
	line(canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6);
	line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
	line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);
	
//nose and highlight
    noStroke();
    fill('red');
    ellipse(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6, noseSize, noseSize);

    noStroke();
    fill('white');
    ellipse(canvasWidth / 2 - 1, canvasHeight / 2 - eyeSize * 1.63, pupilWidth, pupilWidth);    
    
}

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(10, 250);
    faceHeight = random(150, 250);
    eyeSize = random(10, 40);
    noseSize = random(10, 70);
    backgroundColor = int(random(1,8));
    headColor = int(random(1,5));
   

}

As a child, one of my favorite cartoons was Doraemon. I always wondered if there were more to the Doraemon family and if they were in different colors. I also took inspiration from a scene in Guardians of the Galaxy volume 2, I’m not gonna specify which scene.