# Catherine Coyle – Project 04 – String Art

``````// 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.