Category Project-03-Dynamic-Drawing

var bgR = 255;
var bgG = 0;
var bgB = 127.5;
var rad = 20;

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 540), 100);
    changes(m);
    //rotates rectangle according to mouseX position
    push();
    translate(width/2,height/2);
    rotate(radians((mouseX/2)%180));
    rect(0, 0, 50,50);
    pop();
    //creates two ellipses whose size/color/position are based on mouseX position
    fill(bgR, bgG, bgB);
    ellipse(m, 100,rad, rad);
    ellipse(width-m, 380, rad, rad);
}

function changes(x){
	var unit = 255/600.00
	//color changes based on mouseX and mouseY
	bgR = 255-unit*mouseY;
	bgB = 0 + unit*mouseX;
	if (x <= 300) {
		bgG = 127.5+unit*mouseY;
	}else {
		bgG = 127.5-unit*mouseY;
	}
	//radius of ellipses changes based on mouseX position
	rad = mouseX/8;
}