Project 3- Dynamic Drawing

function setup() {
    createCanvas(600, 450);
    background(230, 230, 250);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER)
}
var xa = 300 //coordinates for rectangles a, b, and c
var ya = 225
var xb = 215
var yb = 140
var xc = 500
var yc = 425

function draw() {
    background(230, 230, 250);
    var m = max(min(mouseX, 600), 0); //constrain mouseX in canvas
    var size = dist(xa,ya,mouseX,mouseY) //size changes with distance between mouse and center
    var fillR = (dist(300,225,mouseX,mouseY)*0.3) //color changes with distance between mouse and center
    var fillG = (dist(300,225,mouseX,mouseY)*0.4)
    var fillB = (dist(300,225,mouseX,mouseY)*0.6)
    fill(fillR, fillG, fillB) //paint sqaure
    strokeWeight(5) 
    stroke(25, 25, 112)
    rect(xa,ya,size/1.5,size/1.5) //draws the rectangles
    rect(xb,yb,size/3,size/3) 
    rect(xc,yc,size/0.75,size/0.75) 

    push();
    translate(300,225) //move origin to center
    rotate(radians(mouseX)) //rotate according to position of mouseX
    ellipse(50,50,30,30) //draws the ellipses
    ellipse(-50,-50,30,30)
    ellipse(50,-50,30,30)
    ellipse(-50,50,30,30)
    ellipse(100,100,30,30)
    ellipse(-100,-100,30,30)
    ellipse(100,-100,30,30)
    ellipse(-100,100,30,30)
    ellipse(100,0,30,30)
    ellipse(-100,0,30,30)
    ellipse(0,100,30,30)
    ellipse(0,-100,30,30)
    ellipse(150,150,30,30)
    ellipse(-150,-150,30,30)
    ellipse(150,-150,30,30)
    ellipse(-150,150,30,30)
    ellipse(150,0,30,30)
    ellipse(-150,0,30,30)
    ellipse(0,150,30,30)
    ellipse(0,-150,30,30)
    pop();

    fill(255) //writes the text in black
    text("): This project is so hard  :( SOS", mouseX, mouseY)

}