```
//Max Stockdale, Section D
var R = 50; //color
var G = 100;
var B = 255;
var angle = 0;
var xs = 15; //scale
var ys = 20;
var circlesize = 80;
function setup() {
createCanvas(600, 450);
rectMode(CENTER);
}
function draw() {
if (mouseX < (width / 2) & mouseY < (height / 2)){ //background changes color in different quadrants
background(251,215,90);
} else if (mouseX < (width / 2) & mouseY > (height / 2)){
background(156,158,251);
} else if (mouseX > (width / 2) & mouseY < (height / 2)){
background(198,149,198);
} else {
background(36,110,237);
}
noStroke();
var m = max(min(mouseX, 600), 0); //maintaing size of ellipses
var size = m * 300 / 600;
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2); //ellipses
ellipse(width / 2, height / 2, size, size);
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);
fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);
fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
fill(R + mouseY / 2, G + mouseY, B + mouseX / 2);
ellipse(550, 225, size * 0.1 , size * 0.1);
fill(R + mouseY /2, G + mouseY, B + mouseX /2);
ellipse(30, 225, size * 0.1, size * 0.1);
fill(255);
rect(mouseX, mouseY, 50, 50); //x,y position square 1
//side circle_1
translate(-150, + 100);
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);//ellipses
ellipse(width / 2, height / 2, size, size);
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);
fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);
fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
fill(255);
rect(mouseX , mouseY, 50, 50); //x, y position square 2
//side circle_2
translate(+300, -200);
//ellipse 1
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);
ellipse(width / 2, height / 2, size, size);
//ellipse 2
fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);
//ellipse 3
fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);
//ellipse 4
fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
fill(255);
rect(mouseX, mouseY, 50, 50); //x,y position square 3
fill(36,110,237); //spinning square(blue)
push();
translate(-75,+175);
rotate(radians(angle));
rectMode(CENTER);
rect(0,0,50,50);
pop();
angle += 5;
fill(251,215,90); //spinning square(yellow)
push();
translate(+375,+475);
rotate(radians(angle));
rectMode(CENTER);
rect(0,0,50,50);
pop();
angle += 5;
angle = angle + 0.5;
xs = width - (0.5 * mouseX); //scale based on x
ys = height - (0.5 * mouseY); //scale based on y
}
```

For this project, I wanted to play around with the scale of circles and the gradient of the colors. I also wanted to include a background that changes color based on the mouse position, with spinning squares on the corners.