Cathy Dong-Project-04-String Art

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 4-String Art
*/

var sqColor;
var backColor;

function setup() {
	createCanvas(400, 300);
	
}

function draw() {
	background(0);
	//change background color based on mouseY location
	if (mouseY < height / 2) {
		backColor = 'black';
	}
	else if (mouseY >= height / 2) {
		backColor = 'gray';
	}
	//turn background to white when mouse is pressed
	if (mouseIsPressed) {
		backColor = 'white';
	}
	noStroke();
	fill(backColor);
	rectMode(CORNER);
	rect(0, 0, width, height);

	//create a grid of rectangles
	//rectangle color changes based on mouseX
	for (var s = 20; s <= width; s += 30) {
		for (var t = 15; t <= height; t += 30) {
			if (mouseX < width / 2) {
				sqColor = 'gray';
			}
			else if (mouseX >= width / 2) {
				sqColor = 'black';
			}
			noStroke();
			fill(sqColor);
			rectMode(CENTER);
			rect(s, t, 20, 20);	
		}
		
	}
	//lines from mouse to top
	for (var n = 0; n <= width; n += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, n, 0);
	}

	//lines from mouse to bottom
	for (var p = 0; p <= width; p += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, p, height);
	}

	//lines from mouse to left
	for (var q = 0; q <= height; q += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, 0, q);
	}

	//lines from mouse to right
	for (var r = 0; r <= height; r+= 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, width, r);
	}

	//curve with lines from top to right (controled by mouseX)
	for (var i = 0; i <= mouseX; i += 3) {
		stroke(255);
		strokeWeight(.5);
		line(i, 0, width, i);
	}
	//curve with lines from right to bottom (controled by mouseY)
	for (var j = 0; j <= mouseY; j += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width, j, width - j, height);
	}
	//curve with lines from bottom to left (controled by mouseX)
	for (var k = 0; k <= mouseX; k += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width- k, height, 0, height - k)
	}
	//curve with lines from left to top (controled by mouseY)
	for (var m = 0; m <= mouseY; m += 3) {
		stroke(255);
		strokeWeight(.5);
		line(0, height - m, m, 0);
	}

	//draw foco point
	stroke(255);
	strokeWeight(2);
	push();
	line(mouseX / 8 * 7, mouseY, mouseX / 8 * 9, mouseY);
	line(mouseX, mouseY / 8 * 7, mouseX, mouseY / 8 * 9);
	pop();

}

In this project, I used loops to create curves with lines and rectangle grids. All lines changed based on mouse location. The background color also changed when mouse is clicked or moved.