Project 04 – String Art

//First line art
var dx1;
var dy1;
var dx2;
var dy2;

//Second line art
var dx3;
var dy3;
var dx4;
var dy4;

//Third line art
var dx5;
var dy5;
var dx6;
var dy6;

//Fourth line art
var dx8;
var dy8;
var dx9;
var dy9;

var numLines = 50;
var numLines2 = 20;
var numLines3 = 60;
var numLines4 = 40;
function setup() {
    createCanvas(400, 300);
    background(100, 105, 200);

    //First line art placement
    line(0, 0, 0, 300);
    line(0, 300, 350, 300);

    //Second line art placement
    line(0, 300, 150 ,300);
    line(400, 300, 400, 240);

    //Third line art placement
    line(0, 300, 400, 300);
    line(400, 300, 400, -100);

    //Fourth line art placement
    line(-50, 0, 0, 400);
    line(450, 40, 400, -400);

    //First line art deltas
    dx1 = (0 - 0)/numLines;
    dy1 = (300 - 0)/numLines;
    dx2 = (350 - 0)/numLines;
    dy2 = (300 - 300)/numLines;

    //Second line art deltas
    dx3 = (150 - 0)/numLines2;
    dy3 = (300 - 300)/numLines2;
    dx4 = (400 - 400)/numLines2;
    dy4 = (240 - 300)/numLines2;

    //Third line art deltas
    dx5 = (400 - 0)/numLines3;
    dy5 = (300 - 300)/numLines3;
    dx6 = (400 - 400)/numLines3;
    dy6 = (-100 - 300)/numLines3;

    //Fourth line art deltas
    dx7 = (0 - -50)/numLines4;
    dy7 = (400 - 0)/numLines4;
    dx8 = (400 - 450)/numLines4;
    dy8 = (-400 - 40)/numLines4;

}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 300;

    var x5 = 0;
    var y5 = 300;
    var x6 = 400;
    var y6 = 300;

    var x7 = -50;
    var y7 = 0;
    var x8 = 450;
    var y8 = 400;


    stroke(245, 255, 184);
    for (var i = 0; i <= numLines4; i += 1) {
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }

    stroke(254, 189, 255);
    for (var i = 0; i <= numLines3; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    stroke(191, 255, 251);
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    for (var i = 0; i <= numLines2; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    noLoop();
}