Project 3-Many Squares

var x;
var y;
var r=0;
var g=0;
var b=0;
var xtrans=300;
var ytrans=225;

function setup() {
    createCanvas(600, 450);
    background(0);
}

function draw() {
    var dir=mouseX * 1.5;
    x=mouseX;
    y=mouseY;
    translate(xtrans, ytrans);
    r=mouseY; //makes color change with mouse movements
    g=255-mouseY;
    b=mouseX;
    fill(r, g, b);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0/400.0;
    rotate(radians(dir));
    rectMode(CENTER);
    var n = max(mouseX, 400);
    rect(x + m * 190.0/400.0, y + m * 190.0/400.0, m, m); //the two rectangles are opposites, one is big when the other is small
    rect(-(x + n * 190.0/400.0), -(y + n * 190.0/400.0), n, n); //both sizes of rectangles depend on mouse
    if (mouseIsPressed) { //moves the origin to mouseX and mouseY when mouse is pressed
        xtrans = mouseX;
        ytrans= mouseY;

    }
}