The line art examples reminded me of space and warp patterns we would see in movies, so I decided to try to capture a sense of movement similar to a spaceship warp.
sketch
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;
}
}