Project 04 – String Art

sketch

//Gia Marino
//gnmarino
//section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50; //how many lines drawn between line 1 and line 2

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

function draw() {


    //draw bottom left string art - line 1: (0, 0) (0, 300) line 2: (0, 300) (400, 300)

    drawStringArt(0, 0, 0, height, 0, height, width, height);

    //draw bottom right string art - line 1: (0, 300) (400, 300) line 2: (400, 300) (400, 0)

    drawStringArt(0, height, width, height, width, height, width, 0);

    //draw top right string art - line 2: (400, 300, 400, 0, 400, 0, 0, 0)

    drawStringArt(width, height, width, 0, width, 0, 0, 0);

    //draw top left string art - line 2: (400, 0, 0, 0, 0, 0, 0, 300)

    drawStringArt(width, 0, 0, 0, 0, 0, 0, height);
    
    noLoop();
}

    //function that creates string art shape
function drawStringArt(ix1, iy1, ix2, iy2, ix3, iy3, ix4, iy4) {

    line(ix1, iy1, ix2, iy2); //line 1 
    line(ix3, iy3, ix4, iy4); //line 2 

    dx1 = (ix2-ix1)/numLines; //change in x variables in line 1
    dy1 = (iy2-iy1)/numLines; //change in y variables in line 1
    dx2 = (ix4-ix3)/numLines; //change in x variables in line 2
    dy2 = (iy4-iy3)/numLines; //change in y variables in line 2  

    //repeats drawing lines to make string art
    //starts at the beginning of line 1 and line 2 
    //finishes shape at the end of line 1 and line 2

    for (var i = 0; i <= numLines; i += 1) {

        line(ix1, iy1, ix3, iy3);
        ix1 += dx1;
        iy1 += dy1;
        ix3 += dx2;
        iy3 += dy2;
    }  
}

I feel like the most difficult part of this project was understanding the math and then understanding how the code works. This was necessary for me to create code that was more readable and now it is very easy to add onto.