project3-keuchuka

project 3

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-03

//variables for face
var eyeX = 314;
var righteyeY = 132;
var lefteyeY = 305;
var eyeWidth = 100;

var smileAngle1 = -50;
var smileAngle2 = smileAngle1 - 260;

//variables for bankground
var leftrectX = 128;
var rightrectX = 384;
var rectY = 0;
var rectWidth = 148;
var rectHeight = 480;



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

// constraining eye width, right eye and left eye Y and X axis positions, 

	var eyeWidth = constrain(mouseX/100, 20, 150);
	var conrighteyeY = constrain(righteyeY, 190, 220);
	var conlefteyeY = constrain(lefteyeY, 280, 300);
	var coneyeX = constrain(eyeX, 40, 600);
	var conmouseX = constrain(mouseX, 40, 450);

// base yellow background

	background(255, 233, 141);


// when mouse moves past first recteangle to the right, the eyes increase in size and the
// distance between them increases, but is constrained to not fall of the canvas

 	if (mouseX>256) {
 		eyeWidth = eyeWidth + mouseX/10;
 		righteyeY = conrighteyeY - mouseX/300;
 		lefteyeY = conlefteyeY + mouseX/300;
 		lefteyeY = conlefteyeY - mouseX/200;
 	}
 		
 // configures the smile arc angle runs freely wehn mouse is moving in between the two ends
 	if (256<mouseX<600) {
 		smileAngle1 = mouseX;

 	}

// fixes larger smile arc angle when mouse is on the right

 	if (mouseX>600) {
 		smileAngle1 = -50;
 	}
 	
 // fixes smaller smile arc angle when mouse is on the left

 	if (mouseX<130) {
 		smileAngle1 = 165;
 		smileAngle2 = 195;
 	}

 // when mouse moves past the rectangle to the left

 	if (mouseX<256) {
 		eyeWidth = eyeWidth - mouseX/100;
  		righteyeY = conrighteyeY + mouseX/200;
 		lefteyeY = conlefteyeY - mouseX/200;

 	}


// variables to change colors on face and rectangle
	
 	R=(480-mouseX)/3;
	G=(mouseY)/3;
	B=mouseY*(100,255);


//eye graphic configurations
	strokeWeight(10);
	stroke(R, G, B, 150);
	fill(R, G, B, 150); 

//left eye
 	ellipse(eyeX, lefteyeY, eyeWidth/2, eyeWidth/2);

//right eye
 	ellipse(eyeX, righteyeY, eyeWidth/2, eyeWidth/2);

//mouth graphic configurations
	angleMode(DEGREES)
	noFill();
	strokeWeight(25);

//mouth
	stroke(R, G, B, 150);
	arc(330, 240, 480, 480, smileAngle1, smileAngle2);

//rectangle graphic configurations
	strokeWeight(25);
	stroke(R, B, G, 100);
	fill(B, R, G, 150);

//rectangles
	rect(leftrectX, rectY, rectWidth, rectHeight);
	rect(rightrectX, rectY, rectWidth, rectHeight);

//eyes move 
 	eyeX = conmouseX;
 	smileAngle2 = smileAngle1 - 260;


}

I wanted to create an understandable narrative using primitive shapes, which led to me to using the arc command. With the set idea of turning a frown upside down, I then proceeded to vary different variables within the face itself as well as the background.