Project 03 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-03

var y = 0;
var spacing = 15;
var r = 7.5;

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

function draw() {
	noCursor();

	//background color change based on position of mouseX and mouseY
	colorR = map(mouseY, 0, height, 180, 255);
	colorB = map(mouseX, 0, width, 180, 255);
	colorG = map(mouseX, 0, width, 160, 235);
	background(colorR, colorG, colorB);

	//strokewegith depends on the position of mouseY
	m = map(mouseY, 0, height, 1, 5)
	strokeWeight(m);
	stroke(255);

	//array curves with mid points that react to position of mouseX and mouseY
	if (mouseX >= width/2) {
		for (var i = 0; i < 640; i+= spacing) {
			positionX = map(mouseX, 0, width/2, 0, 1);
			positionY = map(mouseY, 0, height, 0, 1);
			noFill();
			beginShape();
			curveVertex(i,  0);
			curveVertex(i,  0);
			curveVertex(positionX*i, height*positionY);
			curveVertex(i, height);
			curveVertex(i, height);
			endShape();
		}
	}

	//array of curves stay straight when mouseX is on left half of canvas
	if (mouseX < width/2) {
		for (var i = 0; i < 640; i+= spacing) {
			line(i, 0, i, height);
		}
	}

	//array of circles
	for (var x = 0; x < width + r; x+= spacing) {
		for (var y = 0; y < height + r; y+= spacing) {
			noStroke();
			//the amount of circles which changes size depends on mouseX
			var n = map(mouseX, 0, width, 1, 8);
			//aray of circles which changes color based on its distance from the Cursor
			if (dist(mouseX, mouseY, x, y) < n*r) {
				fill(random(0, 255), random(0, 255), 200);
				r = 12
			}
			else {
				fill(150);
				r = 7.5
			}
			ellipse(x, y, r, r);
		}
	}
}

I wanted to create a grid base, interactive graphic that depends heavily on the position of mouseX and mouseY. The array of circles’s sizes and color depend on the distance between position of the cursor and the center point of each circle. The background color also changes based on mouseX and mouseY as well as the array of lines in the background in which the mid point changes value based on location of the cursor as well.