Project-03: Dynamic Drawing

var balanceX = 0;			//set center seesaw position in the x direction
var balanceY = 0;			//set center seesaw position in the y direction
var balanceAngle = 0;		//set the angle of the seesaw based on the mouseX position
var ballSquish = 0;			//sets how tall the ball is based on the velocity of the mouse			
var ballStretch = 0;		//sets how wide the ball is based on the velocity of the mouse
var leftBallY = -63;		//sets the vertical position of the left ball
var rightBallY = -63;		//sets the vertical position of the left ball
var pink1 = 255;			//sets original r value for left ball
var	pink2 = 151;			//sets original g value for left ball
var pink3 = 202;			//sets original b value for left ball
var orange1 = 249;			//sets original r value for left ball
var orange2 = 176;			//sets original g value for left ball
var orange3 = 32;			//sets original b value for left ball

function setup() {
    createCanvas(600, 450);
    background(255)
    rectMode(CENTER);
    frameRate(20);
}

function draw() {
	//set color of the sky
	background(160, 218, 223);

	//draw cloud 1
	fill(255);
	noStroke();
	beginShape();
	curveVertex(288,111);
	curveVertex(261,118);
	curveVertex(254,135);
	curveVertex(237,142);
	curveVertex(217,146);
	curveVertex(210,166);
	curveVertex(225,183);
	curveVertex(243,186);
	curveVertex(260,188);
	curveVertex(269,197);
	curveVertex(285,197);
	curveVertex(304,197);
	curveVertex(311,186);
	curveVertex(328,192);
	curveVertex(345,183);
	curveVertex(380,181);
	curveVertex(383,161);
	curveVertex(377,144);
	curveVertex(353,144);
	curveVertex(347,127);
	curveVertex(323,115);
	curveVertex(307,127);
	endShape();

	//draw cloud 2
	beginShape();
	curveVertex(495,20);
	curveVertex(451,29);
	curveVertex(449,46);
	curveVertex(431,60);
	curveVertex(409,61);
	curveVertex(408,101);
	curveVertex(480,123);
	curveVertex(501,111);
	curveVertex(515,106);
	curveVertex(547,122);
	curveVertex(559,100);
	curveVertex(567,73);
	curveVertex(586,62);
	curveVertex(566,43);
	curveVertex(525,53);
	endShape();

	//draw cloud 3
	beginShape();
	curveVertex(86,48);
	curveVertex(42,36);
	curveVertex(37,78);
	curveVertex(35,97);
	curveVertex(73,119);
	curveVertex(110,89);
	curveVertex(168,91);
	curveVertex(169,59);
	curveVertex(129,37);
	endShape();

	fill(255, 245, 103);	//set color of seesaw base
	noStroke();
	triangle(306, 324, 234, 432, 378, 432);		//draw seesaw base
	
	fill(187, 211, 48);		//set ground color to green
	rect(300, 441, 600, 18)		//draw grass
	
	translate(306, 324);	//move the origin to the center of the seesaw
	//the seesaw will rotate with the horizontal position of the mouse
	if (mouseX < width) {
		rotate(radians(45 * (mouseX - 300)/600));
	}
	fill(255, 245, 103);
	rect(balanceX, balanceY, 551, 18);							//draw seesaw
	
	fill(pink1, pink2, pink3);										//set left ball initial color to pink
	ellipse(-234, leftBallY, 108 - ballSquish, 108 + ballStretch);	//draw left ball
	
	fill(orange1, orange2, orange3);											//set right ball initial color to orange
	ellipse(216, rightBallY, 108 + ballSquish, 108 - ballStretch);		//draw right ball

	ballSquish = (mouseY - pmouseY)*2							//change the height of each ball to vary with mouse velocity
	ballStretch = (mouseX - pmouseX)*2							//change the width of each ball to vary with mouse velocity

	//when the left ball bounces, its color will change to dark orange
	if (leftBallY + 108 + ballSquish >= 48){
		pink1 = 242
		pink2 = 122
		pink3 = 5
	}
	else {
		pink1 = 255
		pink2 = 151
		pink3 = 202
	}
	//when the right ball bounces, its color will change to dark pink
	if (rightBallY + 108 + ballSquish >= 48){
		orange1 = 220
		orange2 = 51
		orange3 = 134
	}
	else {
		orange1 = 249
		orange2 = 176
		orange3 = 32

	}

}