P03: Dynamic Drawing – Erin Fuller

I based my initial design off of the idea of the rotational translation we learned in our lab session. Using the mouse position you can change: the background color, sizes of the level one and level two circles, the distance of circles from the center, and the rotation of the level two circles around the level one circles.

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 03

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

function draw(){
    colorMode(HSB);
	backH = mouseX/width*360; // background hue change depending on mouseX
	backS = mouseY/width*360; // background saturation change depending on mouseY
    var c = color(backH, backS, 70); 
    background(c);

	var eS = mouseX/10 // inner circle size change depending on mouseX
	var eO = mouseX/45 // outer circle size change depending on mouseX

	translate(width/2, height/2);
	for (var num = 0; num < 8; num++) {
		push();
		rotate(TWO_PI * num / 6);
		translate(mouseX/2, 0); // pushes larger circles out based on X postion
		ellipse(0, 0, eS, eS); // inner circles
		for (var j = 0; j < 15; j++) {
			push();
			var spin = mouseX/width * TWO_PI // causes smaller circles to go around the big circle
			rotate(spin * j / 9); 
			ellipse(40, 0, eO, eO); // outer circles
			pop();
		}		
		translate()
		pop();
	}
}