string art
// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;
var numLines=20;
function setup() {
createCanvas(400,300);
background(224,255,255);
dy1 = 150 / numLines;
dx2 = 200 / numLines;
dy3 = -150 / numLines;
dx4 = -200 / numLines;
da1 = 200 / numLines;
ds2 = -150 / numLines;
ds3 = 150 / numLines;
da4 = -200 /numLines;
}
function draw() {
var x1 = 200;
var y1 = 0;
var x2 = 200;
var y2 = 150;
var x3 = 200;
var y3 = 300;
var x4 = 200;
var y4 = 150;
var a1 = 0;
var s1 = 0;
var a2 = 0;
var s2 = 150;
var a3 = 400;
var s3 = 150;
var a4 = 400;
var s4 = 300;
//right up string section, section 1
stroke(127,255,0);
for (var i = 0; i <= numLines; i += 1 ) {
line(x1,y1,x2,y2);
y1 += dy1;
x2 += dx2;
}
//left down string section, section 2
stroke(75,0,130);
for (var i = 0; i <= numLines; i += 1) {
line(x3,y3,x4,y4);
y3 += dy3;
x4 += dx4;
}
//right up corner
stroke(255,192,203);
for (var a = 0; a <= numLines; a += 1) {
line(a1,s1,a2,s2);
a1 += da1;
s2 += ds2;
}
//left down corner
stroke(255,99,71);
for (var a = 0; a <= numLines; a += 1) {
line(a3,s3,a4,s4);
s3 += ds3;
a4 += da4;
}
noLoop();
}
While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.