//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 04
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 300;
function setup() {
createCanvas(400, 300);
}
function draw() {
background(0);
//generate lines on BOTTOM LEFT (1st curve) (green)
for (var step1 = 0; step1 <= 1; step1 += .02) {
x2 = lerp(0, 400, step1);
y1 = lerp(0, 300, step1);
stroke(124, 252, 0);
line(x1, y1, x2, y2);
}
//generate lines on TOP LEFT (2st curve) (green)
for (var step2 = 0; step2 <= 1; step2 += .02){
x2 = lerp(0, 400, 1 - step2);
y1 = lerp(0, 300, step2);
stroke(124, 252, 0);
line(x1, y1, x2, height - y2);
}
//generate lines on BOTTOM LEFT (3nd curve) (red)
for (var step3 = 0; step3 <= 1; step3 += .03) {
x2 = lerp(0, 400, 2 * step3);
y1 = lerp(0, 300, step3);
stroke(255, 0, 0);
line(x1, y1, x2, y2);
}
//generate lines on TOP LEFT (4rd curve) (red)
for (var step4 = 0; step4 <= 1; step4 += .03){
x2 = lerp(0, 400, 2 * (1 - step4));
y1 = lerp(0, 300, step4);
stroke(255, 0, 0);
line(x1, y1, x2, height - y2);
}
//generate lines on BOTTOM LEFT (5th curve) (blue)
for (var step5 = 0; step5 <= 1; step5 += .04) {
x2 = lerp(0, 400, 4 * step5);
y1 = lerp(0, 300, step5);
stroke(0, 204, 204);
line(x1, y1, x2, y2);
}
//generate lines on TOP LEFT (6th curve) (blue)
for (var step6 = 0; step6 <= 1; step6 += .04){
x2 = lerp(0, 400, 4 * (1 - step6));
y1 = lerp(0, 300, step6);
stroke(0, 204, 204);
line(x1, y1, x2, height - y2);
}
}
For my string art, I wanted to create something asymmetrical because a lot of string art I usually see are not. So I decided to make “layers” of curves from the same sides (bottom left, and top left) and give a different color for each layer. Colors are supposed to represent the basic values of red, green, and blue.