Catherine Coyle – Project 04 – String Art

cathstringart

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// section C
// Project-04-String Art

var rightY = 0;
var leftY;
var colorV = 0;
var bgColor = 0;

function setup() {
	createCanvas(400, 300);
	leftY = height;
}

function draw() {
	background(200);
	// background gradient done w lines
	// the line gets smaller and lighter each round making a gradient
	for(var thickness = height*2; thickness > 1; thickness = thickness*.8) {
		strokeWeight(thickness);
		stroke(bgColor/2, bgColor/2, bgColor);
		line(0, height, width, height);
		bgColor += 20;
	}	
	strokeWeight(.5);
	// corner curves
	for(var topX = 0; topX < width; topX += 4) {
		// as one side of the line increases the other decreases making a curve
		// here are curves near the four corners
		stroke(colorV, 255-colorV, 150);
		line(width, leftY, width-topX, 0);
		line(topX, height, width, width-rightY);
		rightY += 4;
		line(topX, 0, 0, leftY);
		line(0, leftY, height-topX, height);
		leftY -= 4;
		// the color is continuously changing to make a gradient
		colorV += 2.5;
	}
	// yellow middle lines
	strokeWeight(1);
	stroke(253, 255, 137);
	for(var midX = 0; midX < width/2 - 50; midX += 8) {
		line(width/2 - 50, height/2 - 50 + midX, width/2 + 50 -midX, height/2 - 50);
		line(width/2 + 50, height/2 + 50 - midX, width/2 - 50 +midX, height/2 + 50);
	}
	noLoop();
}

I thought this was a really fun project! I didn’t do any sketches this time, instead I just experimented with different numbers to figure out how to make a curve and then added the curves in the middle. Additionally, I thought it would be cool to have a gradient background so I did this by using lines in a for-loop to follow the rest of the theme of the project.