Project 04 – String Art

/* eliana fleischer
    efleisch
    section e */ 

//GLOBAL VARIABLES
// these global variables will be used to be able to change the values while drawing different string arts
    
var dx1;
var dx2;
var dy1;
var dy2;

var dx3;
var dy3;
var dx4;
var dy4;

var numLines1 = 50;
var numLines2 = 15;

var ax1 = 50;
var ax2 = 150;
var ay1 = 50;
var ay2 = 300; 

var bx1 = 300;
var bx2 = 350;
var by1 = 300;
var by2 = 100;


function setup() {
    createCanvas(400, 300);
    background(124,158,129);
}

function draw() {

    push(); // push will create the bold deges of the lines
    stroke(0);
    strokeWeight(4);

    ax1 = floor(random(15,200)); // randomize x values for the two lines
    ax2 = floor(random(15,200));
    bx1 = floor(random(200,385));
    bx2 = floor(random(200,385));

    ay1 = floor(random(15,150)); // randomize the y values for the two anchor lines
    ay2 = floor(random(150,285));
    by1 = floor(random(150,285));
    by2 = floor(random(15,150));

    line(ax1, ay1, ax2, ay2); // anchor line A 
    line(bx1, by1, bx2, by2); // anchor line B


    dx1 = (ax2-ax1)/numLines2; // creates dx and dy for the lines created divided by numLines
    dx2 = (bx2-bx1)/numLines2;
    dy1 = (ay2-ay1)/numLines2;
    dy2 = (by2-by1)/numLines2;


    var x1 = ax1; // set the starting points of the string art lines to the anchor line values
    var y1 = ay1;
    var x2 = bx1;
    var y2 = by1;

    line(15,15, 385, 15); // upper anchor line
    line(15,285,385,285); // lower anchor line

    var x3 = 15; // creates the initial changing x values
    var x4 = 385; 
    var x5 = 15;
    var x6 = 385;

    dx3 = (385-15)/numLines1; // dx for the lines going to the left
    dx4 = (15 - 385)/numLines1; // dx for the lines going to the right


    pop();


    for (var i = 0; i <= numLines1; i +=1){ // for loop making the background lines
        stroke(243,204,113); // orange lines
        line(15,15, x3, 285); // lines going to left

        stroke(247,255,118); // yellow lines
        line(385,15,x4,285); // lines going to the right

        stroke(236,180,236); //purple lines
        line(15,285,x5,15); //lines from the bottom going left

        stroke(236,180,180); // pink lines
        line(385,285,x6,15); // lines from the bottom going right


        x3 += dx3; // changes the x values by the set dx
        x4 += dx4;
        x5 += dx3;
        x6 += dx4
    }

    stroke(29,5,95);
    strokeWeight(3)
    for (var i = 0; i <= numLines2; i+=1){
        line(x1, y1, x2, y2); // uses the randomly generated points to start lines
        x1 += dx1; // chnages the values by the set dxs and dys 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    noLoop();
}