Project-03: Dynamic Drawing

My Project

//sets up RGB values for color change;
var colorR = 236;
var colorG = 47;
var colorB = 19;
var colorR2 = 22;
var colorG2 = 167;
var colorB2 = 233;
//sets up angle variable that moves center rectangle;
var angle = 1;
//sets up direction variable that determines which direction said rectangle rotates;
var dir = 1;

function setup() {
    createCanvas(650, 400);
    background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //creates a background that changes color dependant on which;
    //side of the canvas the mouse is on;
    background(colorR, colorG, colorB);
    //makes the rectangles based on the center of themselves; 
    rectMode(CENTER);
    //allows the rectangles to change color dependant on which;
    //side of the cnavas the mouse is on;
    fill(colorR2, colorG2, colorB2);
    //creates the 2 rectangles nearer to the perimeter of the canvas;
    //they are opposite each other in direction and location;
    //they increase in size when the mouse is on the right side and decrease when on the left;
    rect(constrain(mouseX, 50, 600), 50, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));
    rect(max(600 - mouseX, 50), 350, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));
    //I used existing RGB values to make the center rectangle have dynamic color change as well;
    fill(colorR, colorG2, colorB);
    //allows for the center rectangle to rotate;
    push();
    translate(325, 200);
    rotate(radians(angle));
    rect(0, 0, max(250-mouseX, 50), max(250-mouseX, 50));
    pop();
    angle = angle + (dir*1);
    //changes the color between color depending on which side the mouse is on;
    if ( ((colorR != 22) & (colorG != 167) 
        && (colorB != 233)) && mouseX > 325 ){
        colorR -= 1; 
        colorG += 1; 
        colorB += 1;
    }
    else if ( ((colorR != 236) & (colorG != 47) 
        && (colorB != 19)) && mouseX < 325 ){
        colorR += 1;
        colorG -= 1;
        colorB -= 1;
    }
    if ( ((colorR2 != 22) & (colorG2 != 167) 
        && (colorB2 != 233)) && mouseX < 325 ){
        colorR2 -= 1; 
        colorG2 += 1; 
        colorB2 += 1;
    }
    else if ( ((colorR2 != 236) & (colorG2 != 47) 
        && (colorB2 != 19)) && mouseX > 325 ){
        colorR2 += 1;
        colorG2 -= 1;
        colorB2 -= 1;
    }
    //changes the dir variable and thereby the direction of the center rectangle;
    //dependant on which side of the canvas the mouse is on;
    if (mouseX < 325){
        dir = -1;
    }
    else{
        dir = 1;
    }

}

I originally had something more complex but I changed it to something simpler. And I like how it is now.