Project 04: String Art

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;
var ex1;
var ey1;
var ex2;
var ey2;
var enumLines = 30;
var fx1;
var fy1;
var fx2;
var fy2;
var fnumLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    line(10, 10, 10, 100); //top left shape
    line(10, 55, 100, 55); 
    dx1 = (10 - 10)/numLines;
    dy1 = (100 - 10)/numLines;
    dx2 = (100 - 10)/numLines;
    dy2 = (55 - 55)/numLines;
    line(130, 150, 200, 200); //bottom shape
    ex1 = (200 - 130)/enumLines;
    ey1 = (200 - 150)/enumLines;
    ex2 = (130 - 200)/enumLines;
    ey2 = (200 - 150)/enumLines;
    line(250, 50, 250, 150); //top right shape
    fx1 = (250 - 250)/fnumLines;
    fy1 = (150 - 50)/fnumLines;
    fx2 = (300 - 200)/fnumLines;
    fy2 = (100 - 100)/fnumLines;

}

function draw() {
    var x1 = 10 //top left shape
    var y1 = 10
    var x2 = 100
    var y2 = 55
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    var eex1 = 130 //bottom shape
    var eey1 = 150
    var eex2 = 200
    var eey2 = 200
    for (var i = 0; i <= enumLines; i += 1) {
        line(eex1, eey1, eex2, eey2);
        eex1 += ex1;
        eey1 += ey1;
        eex2 += ex2;
        eey2 += ey2;
    }
    var ffx1 = 250
    var ffy1 = 50
    var ffx2 = 250
    var ffy2 = 150
    for (var i = 0; i <= fnumLines; i += 1) {
        line(ffx1, ffy1, ffx2, ffy2);
        ffx1 += fx1;
        ffy1 += fy1;
        ffx2 += fx2;
        ffy2 += fy2;
    }
    noLoop();
}