Project 04: String Art

in this project, I tried to use different colors and combinations of strings to compose a gradually changing geometry that goes from edge to the center.

    var dx1;
    var dy1;
    var dx2;
    var dy2;
    var dx3;
    var dy3;
    var dx4;
    var dy4;
    var numLines = 50;
    var c;


function setup() {
    createCanvas(400, 300);
    background(0);
    
    //base set of lines #1
    /*line(width/4,0,0,height/3);
    line(0,height/3,width/2,height/3);*/

    /*line(1,300,2,1);
    line(2,1,200,150);
    line(200,150,398,299);
    line(398,299,399,1);*/

    dx1=(2-1)/numLines;
    dy1=(1-300)/numLines;
    dx2=(200-2)/numLines;
    dy2=(150-1)/numLines;
    dx3=(398-200)/numLines;
    dy3=(299-150)/numLines;
    dx4=(399-398)/numLines;
    dy4=(1-299)/numLines;

    //define the change of x, y variables
    /*dx1 = (0-width/4)/numLines;
    dy1 = (height/3-0)/numLines;
    dx2 = (width/2-0)/numLines;
    dy2 = (height/3-height/3)/numLines;*/
}
    
    //draw first set of strings
function draw() {

        var x1 = 1;
        var y1 = 300;
        var x2 = 2;
        var y2 = 1;
        var x3 = 200;
        var y3 = 150;
        var x4 = 398;
        var y4 = 299;

        stroke(0,255,0);
        //in a for loop, when a increases, x1+= a*dx1)
        //for(var e=0;e<=5;e+=1){
            //dx2=e*dx2;
            /*x1 += e*dx1;
            y1 += e*dy1;
            x2 += e*dx2;
            y2 += e*dy2;
            x3 += e*dx3;
            y3 += e*dy3;
            x4 += e*dx4;
            y4 += e*dy4;*/
        
            for (var i = 0; i <= numLines; i += 1) {
                line(x1, y1, x2, y2);
                line(x3,y3,x4,y4);
                x1 += dx1;
                y1 += dy1;
                x2 += dx2;
                y2 += dy2;
                x3 += dx3;
                y3 += dy3;
                x4 += dx4;
                y4 += dy4;
}
                
                string02();
                string03();
                string04();
                noLoop();
}
        //second set of strings
    function string02(){


        var x5 = 2;
        var y5 = 1;
        var x6 = 399;
        var y6 = 50;
        var x7 = 1;
        var y7 = 250;
        var x8 = 399;
        var y8 = 300;

        stroke(255);
       
            for (var e =0; e <= 20; e += 1) {
                line(x5, y5, x6, y6);
                line(x7,y7,x8,y8);
                x5 += dx1;
                y5 -= dy1;
                x6 += dx2;
                y6 -= dy2;
                x7 -= dx3;
                y7 += dy3;
                x8 -= dx4;
                y8 += dy4;
    }
    }

    //third set of strings
    function string03(){

        var x9 = 2;
        var y9 = 1;
        var x10 = 399;
        var y10 = 100;
        var x11 = 1;
        var y11 = 200;
        var x12 = 399;
        var y12 = 300;

        stroke(195,255,195);
       
            for (var l =0; l <= 25; l += 1) {
                line(x9, y9, x10, y10);
                line(x11,y11,x12,y12);
                x9 += dx1;
                y9 -= dy1;
                x10 += dx2;
                y10 -= dy2;
                x11 -= dx3;
                y11 += dy3;
                x12 -= dx4;
                y12 += dy4;
    }  
    }

    //fourth set of strings
    function string04(){

        var a = 2;
        var b = 1;
        var c = 399;
        var d = 200;
        var e = 1;
        var f = 100;
        var g = 399;
        var h = 300;

        stroke(90,255,90);
       
            for (var l =0; l <= 28; l += 1) {
                line(a, b, c, d);
                line(e,f,g,h);
                a += dx1;
                b -= dy1;
                c += dx2;
                d -= dy2;
                e -= dx3;
                f += dy3;
                g -= dx4;
                h += dy4;
    }  
    }
    //}
       //noLoop();



    //devide the lines
    //connect different parts on each line
    //define a function for different lines and variable