Project 3: Dynamic drawing

// Yash Mittal
// Section D
 
var r = 100;
var g = 60;
var b = 150;
var angle = 30;
var sizeX = 70;
var sizeY = 70;

function setup() {
    createCanvas(600, 450);

}

function draw() {

    background (r + mouseX, g + mouseY / 2, b + 10);

    frameRate(50);

    push(); //rectangle 1
    fill (r + mouseX - mouseY, g + mouseX, b + mouseY);
    translate (width / 2, height / 2);
    rotate (radians(angle));
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 2
    fill (r + mouseX / 3 - mouseY / 2, g + mouseX + 50, b + mouseY - 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    angle += 2;
    pop();
    
    push(); //rectangle 3
    fill (r - mouseX + mouseY * 2, g - mouseX + 10, b + mouseY / 2 + 100);
    translate (width / 2, height / 2);
    rotate (radians(angle) + 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 4 
    fill (r - mouseY - mouseX * 4, g - mouseX + 40, b + mouseX / 5 + 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 10);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();

    push(); // rectangle 5 
    fill (r - mouseY + 40 - mouseX * 7, g + mouseX / 2 + 200, b + mouseX + mouseY - 200);
    translate (width / 2, height / 2);
    rotate (radians(angle) - 30);
    rectMode(CENTER);
    rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
    pop();
    
    noStroke();

    var m = max(min ( mouseX, 600 ), 0 ); 
    var size = m * 350 / 600;

    fill(r + mouseY / 4, g - mouseY / 2, b + mouseY); // bigger circle fill
    ellipse (width / 2, height / 2, size); // bigger circle 

    fill(r - mouseY /2 + mouseY, g + mouseY / 4, b + mouseX); // smaller circle fill
    ellipse (width / 2, height / 2, size - 50); // smaller circle 


    var size1 = m * 350 / 600; // size for movaeble circle

    var w = constrain (mouseX, width / 2 - 1, width / 2 + 1); // x constrain
    var z = constrain (mouseY, 200, 250); // y constrain

    fill(r + mouseX, g - mouseY * 4, b + 20); // moveable circle fill 
    ellipse (w, z, size1 - 100); // moveable circle 
    

}