Author: Olive

var ndx1;
var ndy1;
var ndx2;
var ndy2;

var numLines = 100;
var r = 255;
var g = 20;
var b = 150;
var n1xstart = 0;   //shape u, first line, x value of first point, etc
var n1ystart = 0;   //just variables to make values easier to change
var n1xstop = 100;
var n1ystop = 400;

var n2xstart = 300;   //same but second line
var n2ystart = 400;
var n2xstop = 400;
var n2ystop = 0;

var u1xstart = 100;   //same variables but for u shape 
var u1ystart = 0;   
var u1xstop = 0;
var u1ystop = 400;

var u2xstart = 400;  
var u2ystart = 400;
var u2xstop = 300;
var u2ystop = 0;

var t1xstart = 100;  
var t1ystart = 0;   
var t1xstop = 150;
var t1ystop = 400;

var t2xstart = 250;  
var t2ystart = 400;
var t2xstop = 300;
var t2ystop = 0;

var s1xstart = 175;  
var s1ystart = 0;   
var s1xstop = 100;
var s1ystop = 400;

var s2xstart = 300;  
var s2ystart = 400;
var s2xstop = 225;
var s2ystop = 0;


function setup() {
    createCanvas(400, 400);
    background(0);
    stroke(r, g, b);
    //line(n1xstart, n1ystart, n1xstop, n1ystop);
    //line(n2xstart, n2ystart, n2xstop, n2ystop);
    
  
    ndx1 = (n1xstop-n1xstart)/numLines;    // n shape distance
    ndy1 = (n1ystop-n1ystart)/numLines;
    ndx2 = (n2xstop-n2xstart)/numLines;
    ndy2 = (n2ystop-n2ystart)/numLines;
    
    udx1 = (u1xstop-u1xstart)/numLines;    // u shape distance
    udy1 = (u1ystop-u1ystart)/numLines;
    udx2 = (u2xstop-u2xstart)/numLines;
    udy2 = (u2ystop-u2ystart)/numLines;

    tdx1 = (t1xstop-t1xstart)/numLines;    // t shape distance
    tdy1 = (t1ystop-t1ystart)/numLines;
    tdx2 = (t2xstop-t2xstart)/numLines;
    tdy2 = (t2ystop-t2ystart)/numLines;

    sdx1 = (s1xstop-s1xstart)/numLines;    // s shape distance
    sdy1 = (s1ystop-s1ystart)/numLines;
    sdx2 = (s2xstop-s2xstart)/numLines;
    sdy2 = (s2ystop-s2ystart)/numLines;
}

function draw() {
        var nx1 = n1xstart;
        var ny1 = n1ystart;
        var nx2 = n2xstart;
        var ny2 = n2ystart;
       
        var ux1 = u1xstart;
        var uy1 = u1ystart;
        var ux2 = u2xstart;
        var uy2 = u2ystart;

        var tx1 = t1xstart;
        var ty1 = t1ystart;
        var tx2 = t2xstart;
        var ty2 = t2ystart;

        var sx1 = s1xstart;
        var sy1 = s1ystart;
        var sx2 = s2xstart;
        var sy2 = s2ystart;
    
    for (var i = 0; i <= numLines; i += 1) {   //shape u
          
          stroke(r, g, b);
          line(ux1, uy1, ux2, uy2);
          ux1 += udx1;
          uy1 += udy1;
          ux2 += udx2;
          uy2 += udy2;
          r -= 2;        //color changes as lines progress
          g += 1;
          b += 3;
    }
    r = 25;
    g = 50;
    b = 220;
    for (var i = 0; i <= numLines; i += 1) {   //shape n
        
        stroke(r, g, b);
        line(nx1, ny1, nx2, ny2);
        nx1 += ndx1;
        ny1 += ndy1;
        nx2 += ndx2;
        ny2 += ndy2;
        r += 4;
        g += 2;
        b -= 3;
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape t
        
        stroke(255);
        line(tx1, ty1, tx2, ty2);
        tx1 += tdx1;
        ty1 += tdy1;
        tx2 += tdx2;
        ty2 += tdy2;
        
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape s
        
        stroke(255);
        line(sx1, sy1, sx2, sy2);
        sx1 += sdx1;
        sy1 += sdy1;
        sx2 += sdx2;
        sy2 += sdy2;
        
    }
    
    noLoop();
}