jooheek-Project03-DynamicDrawing

sketch

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-03

var faceW = 300;
var faceH = 300;
var eyeW = 50;
var eyeH = 50;
var pupilW = 20;
var pupilH = 20;
var mouthW = 40;
var mouthH = 20;
var candyW = 70;
var candyH = 50;
var r = 255;
var g = 100;
var b = 171;

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

function draw() {
	background(55, 55, 175);
	noStroke();

	var mouthX = width/2;
	var mouthY = height/2 + faceH/4;
	
	//face
	fill(249, 225, 197);
	ellipse(width/2, height/2, faceW, faceH);

	//eye-white
	fill(255);
	ellipse(width/2 - faceW/4, height/2, eyeW, eyeH);

	fill(255);
	ellipse(width/2 + faceW/4, height/2, eyeW, eyeH);

	//mouth
	fill(204, 64, 64);
	ellipse(width/2, height/2 + faceH/4, mouthW, mouthH);

	//pupil-left
	push();
	translate(width/2 - faceW/4, height/2);//make point of rotation the middle of eye
	rotate(mouseX/100);
	fill(0);
	ellipse(10, 10, pupilW, pupilH);
	pop();

	//pupil-right
	push();
	translate(width/2 + faceW/4, height/2);
	rotate(mouseX/100);
	fill(0);
	ellipse(10, 10, pupilW, pupilH);
	pop();

	//candy
	fill(r, g, b);
	ellipse(mouseX, mouseY, 70, 50);

	fill(r, g, b);
	triangle(mouseX, mouseY, mouseX - 40, mouseY + 40, mouseX - 40, mouseY -40);

	fill(r, g, b);
	triangle(mouseX, mouseY, mouseX + 40, mouseY -40, mouseX + 40, mouseY + 40);


	//mouth gets bigger & color gets random as candy gets closer to the face
	if (mouseX > width/2-faceW/2 & mouseX < width/2+faceW/2 && mouseY > height/2 - faceH/2 && mouseY < height/2 + faceH/2) {
		mouthW = mouthW+1;
		mouthH = mouthH+1;
		r = random(0, 255);
		g = random(0, 255);
		b = random(0, 255);
	}

	//mouth resets when it reaches certain size
	if (mouthW > 200 & mouthH > 100) {
		mouthW = 40;
		mouthH = 20;
	}

	if (dist(mouseX, mouseY, width/2, height/2 + faceH/4) < 50) {
		faceW = 450;
		faceH = 450;
		eyeW = 100;
		eyeH = 100;
		pupilW = 50;
		pupilH = 50;
		mouthW = 200;
		mouthH = 100;
	}

	if (dist(mouseX, mouseY, width/2, height/2) > 225) {
		faceW = 300;
		faceH = 300;
		eyeW = 50;
		eyeH = 50;
		pupilW = 20;
		pupilH = 20;
		mouthW = 40;
		mouthH = 20;

	}
	
}

For this assignment, I started with the concept of a guy desperate for a piece of candy. Then, I worked out how to include interactive properties that were associated with mouseX and mouseY.