Project 3 Dynamic Drawing

//Aarnav Patel
//Section D

var side;
var midX = 0;		//the coordinates of the middle squares (what the other squares are proportional to)
var midY = 0; 
var rotation = 0;
var color1 = 255;
var color2 = 0;


function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    side = width / 32;	

}

function draw() {

	//change my origin to the middle of the canvas to better organize my rectangles
	translate(width / 2, height / 2);
	background(0);
	noStroke();
	colorMode(RGB);

	//side rectangles are proportionally equidistant from the middle square (based on x value)
	xdiff = min(mouseX / 2, (width / 2) - side);
	ydiff = min(mouseY / 2, (height / 2) - side);
	

	//Red Rectangles (TOP ROW)
	fill(color1, 0, color2, 100);
	push();							//Create its own coordinate system (for rotation)
	translate(midX, midY - ydiff);	//MID square coordinate place
	rotate(radians(rotation));	
	rectMode(CENTER);				//means that the x and y value below are the CENTER of the rectangle
	rect(0, 0, side, side);
	pop();							//reset coordinate sytem for next rectangle

	push();
	translate(midX - xdiff, midY - ydiff);	//LEFT square coordinate place
	rotate(radians(rotation));
	rectMode(CENTER);
	rect(0, 0, side, side);
	pop();

	push();
	translate(midX + xdiff, midY - ydiff);		//RIGHT square coordinate place
	rotate(radians(rotation));
	rectMode(CENTER);
	rect(0, 0, side, side);
	pop();

	//blue rectangles (BOTTOM ROW)
	fill(color2, 0, color1, 100);
	push();
	translate(midX, midY + ydiff);		//MID square coordinate place
	rotate(radians(rotation));
	rectMode(CENTER);
	rect(0, 0, side, side);
	pop();

	push();
	translate(midX - xdiff, midY + ydiff);		//LEFT square coordinate place
	rotate(radians(rotation));
	rectMode(CENTER);
	rect(0, 0, side, side);
	pop();

	push();
	translate(midX + xdiff, midY + ydiff);		//RIGHT square coordinate place
	rotate(radians(rotation));
	rectMode(CENTER);
	rect(0, 0, side, side);
	pop();

	rotation = rotation + 1;	//Increment rotation so squares always spinning

	
	if (mouseIsPressed) {	//if user holds mouse, it changes color (switches blue and red values of each row)
		if (color1 != 0) {
			color1 -= 1;
			color2 += 1;
		} else {
			color1 += 1;
			color2 -= 1;
		}


		if (side >= width) {	//if rectangles get too big for the canvas, it resets back to initial side length
			side = width / 32;
			color1 = 255;
			color2 = 0;
		} else {
			side = side * 1.01;
		}
	}

	

}