Project-03-Dynamic-Drawing Section D

var angle = 0;
var x;
var y;
var w = 80;
var h = 80;
var xe;
function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(15); 
    
}

function draw() {
    background(204);
    var x = width/2;
    var y = height/2;
    var xe = width/2;
    var ye = height/2;
    

    angle = angle + 1; 
    if (mouseX <= width/2) {  // when mouse moves to left
        background(255); // black background
        // make square bigger
        w = w + 8;
        h = h + 8;

        // bigger white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*20, h*20);
        pop();
        //bigger white circle
        fill(255);
        ellipse(xe, ye, w*17); 
        // big black rectangle 
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*10, h*10);
        pop();
        // big white circle
        fill(255);
        ellipse(xe, ye, w*8);  
        // black rectangle
        push();   // this keeps whatever code that is inside push and pop "self contained" without affecting other code/ "undo"
        translate (x,y);
        rotate(-angle); 
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w*4, h*4);
        // draw black ellipse in center of square
        pop(); 
        fill(255);
        ellipse (xe, ye, w*3);  
         // square inside of ellipse that rotates the opposite direction 
        push();
        translate(x,y);  
        rotate(angle);
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w, h);
        pop();
        // small white circle that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle + 8; // used to be 50

        
    } else if (mouseX >= width/2) {  // when mouse moves to right
        background(0); // white background
        // make square bigger
        w = w - 8; 
        h = h - 8;
         // bigger black rectangle
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*20, h*20);
        pop();
        // bigger black circle
        fill(0);
        ellipse(xe, ye, w*17); 
        // big white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*10, h*10);
        pop();
        // really big black circle
        fill(0);
        ellipse(xe, ye, w*8);  
        // big white rectangle
        push();
        translate (x,y);  
        rotate(angle); 
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w*4, h*4);
        pop();
        // smaller black circle 
        fill(0);
        ellipse (xe, ye, w*3); 
        // white rectangle that rotates in opposite direction
        fill(255);        
        translate(x,y);  
        rotate(-angle);
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w, h);
        // small black circle with white outline that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        stroke(255);
        fill(0);
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle - 8;

    }
}