Project 04 Line Art

var dx1;
var dy1;
var dx2;
var dy2;
var tunnelW = 20;
var tunnelH = 20 ;
var xwall ;
var ywall;
var conNumLines = 20;
var numLines;
var x = 0;
var rb = 0;
var gb = 0;
var bb = 0;

function setup() {
    createCanvas(400, 400);
    background(200);
}
function draw(){
    var r = (random(0,255));
    var g = (random(0,255));

    numLines = random(15);
    xwall = max(dist(mouseX,0,0,0),dist(mouseX,0,width,0));
    ywall = max(dist(0,mouseY,0,0),dist(0,mouseY,0,height));
    //setupbackground
    background(rb,gb,bb);
    rb += random(0,1);
    gb += random(0,2);
    bb += random(0,2);
    if (rb>255 || gb>255 || bb>255){
        rb=0;
        gb=0;
        bb=0;
    }
    //setup end oof tunnel 
    rectMode(CENTER);
    noFill();
    push();
    translate(mouseX,mouseY);
    rect(0,0,tunnelW+x,tunnelH+x);
    x+=3;
    if ((tunnelW+x)> xwall || (tunnelH+x)> ywall) {
        x=0;
    }
    pop();
    fill(255);
    rect(mouseX,mouseY,2*tunnelW,2*tunnelH);
    
    //inner lines
    //top line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY-tunnelH);
    //bottom line
    line(mouseX-tunnelW,mouseY+tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    //left line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX-tunnelW,mouseY+tunnelH);
    //right line
    line(mouseX+tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    
    //outer lines 
    //top line
    line(0,0,width,0);
    //bottom line
    line(0,height,width,height);
    //left lin 
    line(0,0,0,height);
    //right lin
    line(width,0,width,height);

    //perspective line
    //top 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY-tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (0-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var topx1 = mouseX-tunnelW;
    var topy1 = mouseY-tunnelH;
    var topx2 = 0;
    var topy2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(topx1, topy1, topx2, topy2);
        topx1 += dx1;
        topy1 += dy1;
        topx2 += dx2;
        topy2 += dy2;
    }   
    //bottom 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY+tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (height-height)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var bottomx1 = mouseX-tunnelW;
    var bottomy1 = mouseY+tunnelH;
    var bottomx2 = 0;
    var bottomy2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(bottomx1, bottomy1, bottomx2, bottomy2);
        bottomx1 += dx1;
        bottomy1 += dy1;
        bottomx2 += dx2;
        bottomy2 += dy2;
    }   
    //left 
    dx1 = ((mouseX-tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var leftx1 = mouseX-tunnelW;
    var lefty1 = mouseY-tunnelH;
    var leftx2 = 0;
    var lefty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(leftx1, lefty1, leftx2, lefty2);
        leftx1 += dx1;
        lefty1 += dy1;
        leftx2 += dx2;
        lefty2 += dy2;
    }   
    //right 
    dx1 = ((mouseX+tunnelW)-(mouseX+tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-width)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var rightx1 = mouseX+tunnelW;
    var righty1 = mouseY-tunnelH;
    var rightx2 = width;
    var righty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(rightx1, righty1, rightx2, righty2);
        rightx1 += dx1;
        righty1 += dy1;
        rightx2 += dx2;
        righty2 += dy2;
    }   
    stroke(255);
    //side 1 
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 -= dx2;
        sidey2 -= dy2;
    }
    //side 2
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (width-width)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = width;
    var sidey2 = 0;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 3
    dx1 = (width-width)/conNumLines;
    dy1 = (height-0)/conNumLines;
    dx2 = (width-0)/conNumLines;
    dy2 = (height-height)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 4
    dx1 = (width-0)/conNumLines;
    dy1 = (height-height)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 -= dy2;
    }
}