Project 4 – String Art

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(50);
    strokeWeight(0.01);
    stroke(255);
    line(50, 150, 200, 250);
    line(50, 150, 200, 50);
    line(200, 50, 350, 150);
    line(350, 150, 200, 250);
    line(50, 150, 350, 150);
    line(200, 50, 200, 250);

    //line(50, 50, 150, 300);
    //line(300, 300, 350, 100);
    dx1 = (200-50)/(1.05*numLines); // top left line X
    dy1 = (150-50)/(1.05*numLines); // "" Y
    dx2 = (350-200)/(1.05*numLines); // top right line X
    dy2 = (150-50)/(1.05*numLines); // "" Y
    dx3 = (350-200)/(1.05*numLines); //bottom right line X
    dy3 = (250-150)/(1.05*numLines); // "" Y
    dx4 = (200-50)/(1.05*numLines); //bottom left line X
    dy4 = (250-150)/(1.05*numLines); // "" Y


}

function draw() {

    strokeWeight(0.3); 
    stroke(0, 255, 0); //Quadrant 1 Y Changing (Green)
    var x1 = 50;
    var y1 = 150;
    var x2 = 200;
    var y2 = 50;

    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        y2 += dy2;
    }

    stroke(255, 0, 0);//Quadrant 2 Y Changing (Red)
    var x3 = 350; 
    var y3 = 150;
    var x2 = 200;
    var y2 = 50;
    
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x2, y2);
        y2 += dy2;
    }

    stroke(255, 0, 0); //Quadrant 3 Y Changing (Red)
    var x3 = 350; 
    var y3 = 150;
    var x4 = 200;
    var y4 = 250;

    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        y4 -= dy4;
    }

    stroke(random(255), random(255), random(255)); //Quadrant 4 Y Changing (Random);
    var x1 = 50; 
    var y1 = 150;
    var x4 = 200;
    var y4 = 250;
   
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x4, y4);
        y4 -= dy4;
    }

    stroke(77, 77, 255); //Quadrant 1 X Changing (Blue)
    var x2 = 200; 
    var y2 = 50;
    var x1 = 50;
    var y1 = 150;

    for (var i = 0; i <= numLines; i += 1) {
        line(x2, y2, x1, y1);
        x1 += dx1;
    }

    stroke(80, 200, 120);
    var x2 = 200; //Quadrant 2 X Changing (Green)
    var y2 = 50;
    var x3 = 350;
    var y3 = 150;

    for (var i = 0; i <= numLines; i += 1) {
        line(x2, y2, x3, y3);
        x3 -= dx3;
    }

    stroke(0, 0, 255); //Quadrant 3 X Changing (Blue)
    var x4 = 200; 
    var y4 = 250;
    var x3 = 350;
    var y3 = 150;

    for (var i = 0; i <= numLines; i += 1) {
        line(x4, y4, x3, y3);
        x3 -= dx3;
    }

    stroke(random(255), random(255), random(255)); //Quadrant 4 X Changing (Random Color)
    var x4 = 200; 
    var y4 = 250;
    var x1 = 50;
    var y1 = 150;
    

    for (var i = 0; i <= numLines; i += 1) {
        line(x4, y4, x1, y1);
        x1 += dx1;
    }



    noLoop();
}