zhuoyinl-Project-03

my-sketch.js

//Zhuoying Lin
//section A
//zhuoyinl@andrew.cmu.edu
//project03


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

function draw() {
	background('lightPink');

	//box
	fill(255-(0.1*mouseX));
	noStroke();
	rect(0, 400-(0.75*mouseX), 0.125*mouseX, 0.125*mouseX);
	rect(mouseX, 0, 0.125*mouseX, 0.125*mouseX);
	rect(560-mouseX, 400, 0.125*mouseX, 0.125*mouseX);
	rect(560, 0.75*mouseX, 0.125*mouseX, 0.125*mouseX);

	//circles
	push();
	fill(255-(0.5*mouseX));
	noStroke();
	translate(320, 240);
	rotate((millis())/(mouseX*10));
	ellipse(-50, 0, 100, 100);
	fill(0+(0.5*mouseX));
	ellipse(50, 0, 100, 100);
	pop();

}

I tried to make some uniformed variables that changing with mouse movement and form a pattern. Here is my solution.