Vicky Zhou – Project 04 – String Art

/* Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project 04 -String Art*/

var x; //first x cord
var y; //first y cord
var x2; //second x cord
var y2; //second y cord
var dir =1; //direction of lines

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

function draw() {
for (var i = 0; i <= 1; i += 0.05){
//creates upper right hand corner
push();
stroke(255);
strokeWeight(0.02);
x = lerp(0, width, i);
y = 0;
y2 = lerp(0, height, i);
x2 = width;
line(x, y, x2, y2);
pop();

//creates lower left hand corner
push();
stroke(255);
strokeWeight(0.02);
x = 0;
y = lerp(0, height, i);
x2 = lerp(0, width, i);
y2 = height;
line(x, y, x2, y2);
pop();

}

//creates upper left hand corner in light yellow
for(var i = 0; i <= width; i += 0.05){
stroke(246, 236, 196);
push();
strokeWeight(0.5);
x = lerp(width/2, height, i);
y = 0;
x2 = 0;
y2 = lerp(height, width/2, i);
line(x, y, x2, y2);
pop();
}

//creates upper right hand corner in blue
for(var i = 0; i <= width; i += 0.05){
stroke('BLUE');
push();
strokeWeight(1);
x = lerp(width/2, height, i);
y = 0;
x2 = 0;
y2 = lerp(height, width/2, i);
line(x, y, x2, y2);
pop();
}

//creates lower right hand corner in white
for(var i =0; i <= height; i += 0.05){
stroke(255);
push();
strokeWeight(0.5);
x = width;
y = lerp(0, width/2, i);
x2 = lerp(width/2, 0, i);
y2 = height;
line(x2, y2, x, y);
pop();
}

//creates lower right hand corner in green
for(var i =0; i <= height; i += 0.05){
stroke('YELLOW');
push();
strokeWeight(1);
x = width;
y = lerp(0, width/2, i);
x2 = lerp(width/2, 0, i);
y2 = height;
line(x2, y2, x, y);
pop();
}

//creates top right red
for(var i = 0; i <= width; i += 0.02){
stroke('RED');
strokeWeight(0.02);
x = 0;
y = lerp(width/3, width*(2/3), i);
x2 = lerp(width/3, width*(2/3), i);
y2 = 300;
line(x, y*mouseY, x2, y2);
}

}

Making this was a lot of fun and very interesting because of the ability to play with different line weights, and the different spacing with the lerp function. However, it got frustrating at times when I wanted to “flip” or “reflect” the exact bottom or top because sometimes I would have trouble remembering what x-cord and y-cord points would stay static and which ones would change. Overall, this project is cool because it provides for really dynamic and trippy motion graphic opportunities.