String Art

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//I think these are the distance variables between where each line is drawn
var numLines = 30

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    line(10, 10, 50, 290);
    line(140, 10, 100, 290);
    line(260, 10, 300, 290);
    line(390, 10, 350, 290);
    dx1 = (50-10)/numLines;
    dy1 = (290-10)/numLines;
    dx2 = (100-140)/numLines;
    dy2 = (10-290)/numLines;
    dx3 = (10-295)/numLines
    dy3 = (150-260)/numLines
    dx4 = (105-390)/numLines
    dy4 = (260-150)/numLines
}

function draw() {
	var x1 = 10;
	var y1 = 10;
	var x2 = 300;
	var y2 = 290;
	var x3 = 390;
	var y3 = 10;
	var x4 = 100;
	var y4 = 290;
	var x5 = 10;
	var y5 = 40;
	var x6 = 390;
	var y6 = 40;
	var x7 = 10;
	var y7 = 260;
	var x8 = 390;
	var y8 = 260;
	for (var i = 0; i <= numLines; i += 1) {
		line(x1, y1, x2, y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
		line(x3, y3, x4, y4);
		x3 -= dx1;
		y3 += dy1;
		x4 -= dx2;
		y4 += dy2;
		line(x5, y5, x6, y6);
		x5 += dx3;
		y5 -= dy3;
		x6 -= dx4;
		y6 -= dy4;
		line(x8, y8, x7, y7);
		x7 += dx3;
		y7 -= dy3;
		x8 -= dx4;
		y8 -= dy4;
	}
	noLoop();
	//to be fully honest, I don't get what's going on here so I can't really comment my code.
}