jamieh-Project-04-String-Art

Clicking the top and bottom grey bars changes the amount of lines and position of the lines.
Clicking the canvas flips the colours of the two different sets of lines.
Moving from quadrant to quadrant changes the line weights.

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 4
*/

var ratio;
var centreX;
var centreY;
var lines;
var t;


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

    ratio = 30;				//changes position of control points
    centreX = width/2;
    centreY = height/2;
    lines = 10;				//changes how how many divisions there are on the curve 
    						//which generates the white and blue lines 
}

function draw() {
	background(0);

	for (var i = 0; i <= lines; i++) {
	  t = i / lines;

	  //curve 1 from top L corner to mouse
	  c1x = curvePoint(mouseX, 0, mouseX, width/ratio*2, t);
	  c1y = curvePoint(mouseY, 0, mouseY, height/ratio*6, t);

	  //curve 2 from bottom L corner to mouse
	  c2x = curvePoint(mouseX, 0, width/ratio*6, width, t);
	  c2y = curvePoint(mouseY, height, mouseY, height/ratio*2, t);

	  //curve 3 from top R corner to mouse
	  c3x = curvePoint(width/ratio*2, width, mouseX, mouseX, t);
	  c3y = curvePoint(mouseY, 0, height/ratio*2, mouseY, t);

	  //curve 4 from bottom R corner to mouse
	  c4x = curvePoint(mouseX, width, width/ratio*6, 0, t);
	  c4y = curvePoint(mouseY, height, mouseY, height/ratio*6, t);

	  strokeWeight(1);
	  if(mouseX < centreX & mouseY < centreY){				//top L
			strokeWeight(0.15);
		} else if(mouseX > centreX & mouseY < centreY){	//top R
		  	strokeWeight(0.60);
		} else if(mouseX < centreX & mouseY > centreY){	//bottom L
		  	strokeWeight(0.30);
		} else {											//bottom R
		  	strokeWeight(0.90);
		}

	  if(mouseIsPressed){
		//white lines become blue
	  	stroke(204, 230, 255);
		  	line(c1x, c1y, c2x, c2y);
			line(c1x, c1y, c3x, c3y);
			line(c1x, c1y, c4x, c4y);
			line(c2x, c2y, c1x, c1y);
			line(c2x, c2y, c3x, c3y);
			line(c2x, c2y, c4x, c4y);
			line(c3x, c3y, c1x, c1y);
			line(c3x, c3y, c2x, c2y);
			line(c3x, c3y, c4x, c4y);

		//blue lines become white
		stroke("WHITE");
		  	line(c1x, c1y, c4y, c4x);
			line(c2x, c2y, c1y, c1x);
			line(c3x, c3y, c2y, c2x);
			line(c4x, c4y, c3y, c3x);

	  } else{
	  	//lines have different grey scales
	  	stroke(75);
			line(c1x, c1y, c2x, c2y);
			line(c1x, c1y, c3x, c3y);
			line(c1x, c1y, c4x, c4y);
		stroke(150);	  
			line(c2x, c2y, c1x, c1y);
			line(c2x, c2y, c3x, c3y);
			line(c2x, c2y, c4x, c4y);
		stroke(255);
			line(c3x, c3y, c1x, c1y);
			line(c3x, c3y, c2x, c2y);
			line(c3x, c3y, c4x, c4y);
		//blue lines
		stroke(0, 119, 230);
		  	line(c1x, c1y, c2y, c2x);
			line(c2x, c2y, c3y, c3x);
			line(c3x, c3y, c4y, c4x);
			line(c4x, c4y, c1y, c1x);
	  }
	}

		//the four rectangles here are for ease of seeing where to mouse click
		noStroke();
		fill(200, 200);
		rect(0, 0, width/2, 20);				
		rect(0, height-20, width/2, 20);		
		
		fill(200, 100);
		rect(width/2, 0, width, 20);
		rect(width/2, height-20, width, 20);

		stroke("RED");
		strokeWeight(1);
		//Up arrow
		line(width/4, 0, width/4, 20);	
		line(width/4-10, 10, width/4, 0);
		line(width/4+10, 10, width/4, 0);
		//Right arrow
		line(width/4*3-10, 10, width/4*3+10, 10);
		line(width/4*3, 0, width/4*3+10, 10);
		line(width/4*3+10, 10, width/4*3, 20);
		
		
		if(mouseIsPressed & mouseY < 20 && mouseX < width/2 && lines < 60){			//if click on top L bar
			lines += 1;																	//amt of lines increases to 59
		} else if(mouseIsPressed & mouseY > 280 && mouseX < width/2 && lines > 1){		//if click on bottom L bar
			lines -= 1;																	//amt of lines decreases to 1
		}

		if(mouseIsPressed & mouseY < 20 && mouseX > width/2){							//if click on top R bar
			ratio -= 1;																	//lines shift right
		} else if(mouseIsPressed & mouseY > 280 && mouseX > width/2){					//if click on bottom R bar
			ratio += 1;																	//lines shift left
		}
}

The hardest part was trying not to repeat code, which I had trouble with in the for loop to achieve the effect of what happens when mouse is pressed.