Margot Gersing – Project 03 – Dynamic Drawing

I really enjoyed combining different skill we have learned so far into this project. I started off using radial rotation which was fun to experiment with. I also utilized ‘easing’ which I think adds another level of interest to it.

Margot-dynamicdrawing

// Margot Gersing - Project 03 - Section E - mgersing@andrew.cmu.edu

// easing circle variables 
var cx = 100;
var cy = 100;
var diffx = 0;
var diffy = 0;
var targetX = 100;
var targetY = 100;

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

function draw(){
	background(1, 58, 111);

	// BACK RECTANGLES
	// rectangle's y position follows mouseY
	fill(186, 216, 227); //light blue
	rect(width / 2, mouseY, width, 300);

	// rectangle's x position follows mouseX
	fill(253, 145, 83); //orange
	rect(mouseX, height / 2, 100, height);

	// CIRCLE
	noFill();
	stroke(255);
	strokeWeight(10);

	// circle follows mouse with an ease of 0.1
	diffx = mouseX - cx;
    diffy = mouseY - cy;
    cx = cx + 0.1 * diffx;
    cy = cy + 0.1 * diffy;
    ellipse(cx, cy, 250, 250);

	noStroke();

	// if mouse is on the left side of screen fill outer rectangles with yellow
	if (mouseX < width / 2) {
		fill(255, 185, 65); //yellow
	}

	// if mouse is on the right side of screen fill outer rectangles with dark green
	if (mouseX > width / 2) {
		fill(22, 88, 51); //dark green
	}

	// OUTER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 180
	// size controlled by mouseX / 2 and mouseY / 2

	translate(width/2, height/2);
	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(180, 0, mouseX / 2, mouseY / 2);
		pop();
	}

	// if mouse is in the bottom part of screen fill inner rectangles with purple

	if (mouseY < height / 2) {
		fill(150, 71, 98); //purple
	}
	
	// if mouse is in the top part of screen fill inner rectangles with red
	if (mouseY > height / 2) {
		fill(255, 104, 62); //red
	}

	// INNER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 50
	// size controlled by mouseX / 3 and mouseY / 3

	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(50, 0, mouseX / 3, mouseY / 3);
		pop();
	}
}