Kyle Leve-Project-03-Dynamic-Drawing

sketch

// Kyle Leve
// Section A
// kleve@andrew.cmu.edu
// Project-03-Dynamic-Drawing

var dirSq = 1;
var dirCir = 1;
var sqX = 150, sqY = 220;
var cirX = 400; cirY = 220;
var speed = 2;
var angleSq = 0;
var angleCir = 0;
var sqWidth = 130;
var sqHeight = 150;
var cirWidth = 150;
var cirHeight = 190;
var dirSqW = 1, dirSqH = 1, dirCirW = 1, dirCirH = 1;

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

function draw() {
	if (mouseX <= 100) { //change the background at different mouse locations
		background('red');
	}
	if (100 < mouseX & mouseX <= 200) {
		background('orange');
	}
	if (200 < mouseX & mouseX <= 300) {
		background('yellow');
	}
	if (300 < mouseX & mouseX <= 400) {
		background('green');
	}
	if (400 < mouseX & mouseX <= 500) {
		background('blue');
	}
	if (500 < mouseX & mouseX <= 600 || mouseX > 600) {
		background('purple');
	}

	fill(0); // black square around the blue square
	push();
	translate(sqX, sqY);
	rotate(radians(angleSq));
	rectMode(CENTER);
	rect(0, 0, sqWidth, sqHeight);
	pop();

	fill('blue'); //blue square
	push();
	translate(sqX, sqY);
	rotate(radians(angleSq)); //make the squares spin
	rectMode(CENTER);
	rect(0, 0, 100, 100);
	pop();
	angleSq = angleSq + 1;
	if (mouseY >= 300) { //change the spin direction of mouseY is greater than 300
		angleSq = angleSq - 2;
	}

	if (mouseX >= 300) { //makes the square go up and down and bounce off walls
		sqY += dirSq * speed;
	if (sqY > height - 100 || sqY < 0) {
		dirSq = -dirSq;
	}
	}

	if (mouseX < 300) { //makes the square go left and right and bounce off walls
		sqX += dirSq * speed;
	if (sqX > width - 100 || sqX < 0) {
		dirSq = -dirSq;
	}
	}

	sqWidth += dirSqW * speed; //makes the black square's width grow and shrink
	if (sqWidth > 300) {
		dirSqW = -dirSqW;
		sqWidth = 300;
	} else if (sqWidth < 100) {
		dirSqW = -dirSqW;
		sqWidth = 100;
	}

	sqHeight += dirSqH * speed; //makes the black square's height grow and shrink
	if (sqHeight > 300) {
		dirSqH = -dirSqH;
		sqHeight = 300;
	} else if (sqHeight < 100) {
		dirSqH = -dirSqH;
		sqHeight = 100;
	}

	fill(0); //black circle
	push();
	translate(cirX, cirY);
	rotate(radians(-angleCir)); //makes the black circle spin in the opposite direction from the square 
	ellipseMode(CENTER);
	ellipse(0, 0, cirWidth, cirHeight);
	pop();

	fill('red'); //red circle
	push();
	translate(cirX, cirY);
	rotate(radians(-angleCir)); //makes the red circle spin in the opposite direction from the blue square
	ellipseMode(CENTER);
	ellipse(0, 0, 120, 150);
	pop();
	angleCir = angleCir + 1;
	if (mouseY >= 300) { //changes spin direction
		angleCir = angleCir - 2;
	}

	if (mouseX >= 300) { //makes the circle go left and right when the square goes up and down
		cirX += dirCir * speed;
	if (cirX > width - 60 || cirX - 60 < 0) {
		dirCir = -dirCir;
	}
	}
	if (mouseX < 300) { //makes the cirle go up and down when the square goes left and right
		cirY += dirCir * speed;
	if (cirY > height - 75 || cirY - 75 < 0) {
		dirCir = -dirCir;
	}
	}

	cirWidth += dirCirW * speed; //makes the black circle's width grow and shrink
	if (cirWidth > 300) {
		dirCirW = -dirCirW;
		cirWidth = 300;
	} else if (cirWidth < 120) {
		dirCirW = -dirCirW;
		cirWidth = 120;
	}
	cirHeight += dirCirH * speed; //makes the black circle's height grow and shrink
	if (cirHeight > 300) {
		dirCirH = -dirCirH;
		cirHeight = 300;
	} else if (cirHeight < 150) {
		dirCirH = -dirCirH;
		cirHeight = 150;
	}

}

Doing the project I wanted to experiment with different movements rather than having a stationary picture. I decided to use a lot of the recent topics we learned such as rotation, motion, and variables to create two objects that behaved in contrary motion with each other. I found it very interesting to have to create one object and have the other object be based on how to first object was behaving.