Project 4: String Art

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5; 
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var lines = 120; //for the left & right strings 
var lines2 = 100; //for the top-> bottom & left -> right strings
var lines3 = 20; //for center strings

function setup() {
    createCanvas(400, 300);
    background(220);
   
    //left blue+green strings
    line(0, 0, 0, 300); //initial line
    line(0, 300, 400, 0); //ending line
    dx1 = (0-0)/lines;
    dy1 = (300-0)/lines;
    dx2 = (400-0)/lines;
    dy2 = (0-300)/lines;

    //right blue+red strings
    line(0, 300, 400, 0); //initial line
    line(400, 0, 400, 300); //ending line
    dx3 = 400/lines;
    dy3 = -300/lines;
    dx4 = 0/lines;
    dy4 = 300/lines;

    //top -> bottom strings 
    line(0, 0, 400, 0); //initial line
    line(0, 300, 400, 300); //ending line
    dx5 = 400/lines2;
    dy5 = 0/lines2;
    dx6 = 400/lines2;
    dy6 = 0/lines2;

    //left -> right strings 
    line(0, 0, 0, 300); //initial line
    line(400, 0, 400, 300); //ending line
    dx7 = 0/lines2;
    dy7 = 300/lines2;
    dx8 = 0/lines2;
    dy8 = 300/lines2;

    //center piece
    dx9 = 100/lines3;
    dy9 = 150/lines3;
    dx10 = 100/lines3;
    dy10 = 150/lines3;
    
}

function draw() {

    //left -> right strings initial points
    var x7 = 0;
    var y7 = 0;
    var x8 = 400;
    var y8 = 300;

    //draw left -> right strings 
    for (var i = 0; i <= lines2; i += 1) {
        stroke(255, 95, 90); //red
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 -= dx8;
        y8 -= dy8;
    }


    //top -> bottom strings initial points
    var x5 = 0;
    var y5 = 0;
    var x6 = 400;
    var y6 = 300;

    //draw top -> bottom strings 
    for (var i = 0; i <= lines2; i += 1) {
        stroke(255, 105, 0); //orange
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 -= dx6;
        y6 -= dy6;
    }

    //left blue+green strings initial points
    var x1 = 0; 
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    //draw blue+green strings
    for (var i = 0; i <= lines; i+= 1) { 
        stroke(0, random(50, 160), random(100, 200)); //pick random color from green & blue
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //right blue+red strings initial points
    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 0;

    //draw blue+red strings
    for (var i = 0; i <= lines; i+= 1) { 
        stroke(random(80, 150), 0, random(100, 200)); //pick random color from red & blue
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    //center piece initial points
    var x9 = 100;
    var y9 = 150;
    var x10 = 300;
    var y10 = 150;

    //draw center piece
    for (var i = 0; i <= lines3; i += 1) {
        stroke(225, 210, 225); //white
        line(x9, y9, x10, y10);
        x9 += dx9;
        y9 += dy9;
        x10 -= dx10;
        y10 -= dy10;

    }

    noLoop();
}