Project-04: String Art

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.

Leave a Reply