Project 3

var d = 40;
var d2 = 30;
var rotateV = 1;
var rotateR = 2;
var rotateR2 = -1;
var rotateB = 0;
var rotateL = 1; 
var r = 100;
var g = 100;
var b = 100;
 
 
function setup() {
    createCanvas(600, 450);
    text("Xinran Yu, Seciton A");
}
 
function draw() {
    background(0);
    fill(255, 255, 0)

    //background rotating green circles 
    fill(188, 225, 40, 220);
    push();
    translate(500, 350);
    rotate(radians(rotateB));     //1
    ellipse(60, 60, d2+20, d2+20);
    rotateB += 0.6;
    rotate(radians(rotateB));     //2
    ellipse(60, 60, d2+15, d2+15);
    rotateB += 0.5;
    rotate(radians(rotateB));      //3
    ellipse(60, 60, d2+10, d2+10);
    rotateB += 0.3;
    rotate(radians(rotateB));      //4
    ellipse(60, 60, d2+5, d2+5);
    rotateB += 0.2;
    rotate(radians(rotateB));      //5
    ellipse(60, 60, d2, d2);
    rotateB += 0.1; 
    pop()

    //background lines
    push();
    translate(100, 100);
    stroke(43, 255, 248, 50);
    strokeWeight(1);
    for (var rotateL = 30; rotateL<360; rotateL++) {
        rotate(radians(rotateL));
        line(0, 0, 90, 90); 
    }
    pop();


    //rotating squares
    fill(221, 4, 137, 200);
    noStroke();
    push();
    translate(mouseX, mouseY);
    rotate(radians(rotateR));
    rotateR = rotateR - 3;
    rect(-10, 0, 100, 100);

    rotate(radians(rotateR2));
    rotateR2 = rotateR2 + 2;
    rect(0, 10, 60, 60);
    pop();

    // rotating circles,changing color due to mouseX & mouseY
    fill(126, 198, 231);
    ellipse(mouseX, mouseY, 50, 50);  // center circle
    push();
    translate(mouseX, mouseY);

    if (mouseX <= width/2 & mouseY <= height/2) {
        r = 218; //yellow
        g = 177;
        b = 79;
    } else if (mouseX < width/2 & mouseY > height/2) {
        r = 205; //orange
        g = 110;
        b = 74;
    } else if (mouseX > width/2 & mouseY < height/2) {
        r = 224; //pink
        g = 128;
        b = 231;
    } else if (mouseX > width/2 & mouseY > height/2) {
        r = 135; //red
        g = 30;
        b = 12;
    }
    fill(r, g, b);
    rotate(radians(rotateV));
    rotateV = rotateV + 2;

    //change circle's raduis
    //distance to canvas center increases, rotating radius & d increases
    var x1 = dist(mouseX, mouseY, width/2, height/2);
    d = dist(mouseX, mouseY, width/2, height/2)/3;
    d = constrain(d, 10, 100);
    ellipse(x1, x1, d, d);
    ellipse(-x1, -x1, d, d);
    ellipse(-x1, x1, d, d);
    ellipse(x1, -x1, d, d);
    ellipse(0, x1*1.5, d, d);
    ellipse(0, -x1*1.5, d, d); 
    ellipse(x1*1.5, 0, d, d);
    ellipse(-x1*1.5, 0, d, d);
    pop();   

}