This piece came about from taking one component, the “V” shaped lines that guide the curved net, and putting combining them. It started with rotating them and putting 3 next to each other in alternating order, and then naturally mirroring that vertically, and connecting the sides together to create a strange shape that reminded me of an egg sac that had been opened. Naturally, I wanted to fit something inside the space, and create a distance as if one is passing through this hole to the other side. This idea naturally led to the development of the outside walls, to give a sense that the viewer is currently passing through one of these shapes.
var numLines = 40;
function setup() {
createCanvas(600,600);
background(200);
push();
translate(100,100); //translate object 100 x, 100 y
stroke(255)
strokeWeight(3) //white guide lines
line(100,100,300,100); //top horizontal
line(100,300,300,300); //bottom horizontal
line(200,0,200,100); //top vertical
line(200,400,200,300); //bottom vertical
line(100,200,51,200); //left horizontal
line(300,200,349,200); //right horizontal
line(100,100,100,300); //left vertical
line(300,100,300,300); //right vertical
//
stroke(0)
strokeWeight(2) //lines for middle sac
line(200,0,100,200); //top middle (1)
line(300,200,200,0); //top middle (2)
line(200,400,100,200); //bottom middle (3)
line(300,200,200,400); //bottom middle (4)
line(300,200,200,0); //top right (5)
line(400,0,300,200); //top right (6)
line(100,200,200,0); //top left (7)
line(0,0,100,200); //top left (8)
line(300,200,200,400); //bottom right (9)
line(400,400,300,200); //bottom right (10)
line(100,200,200,400); //bottom left (11)
line(0,400,100,200); //bottom left (12)
line(300,200,400,0); //right side (13)
line(400,400,300,200); //right side (14)
line(100,200,0,0); //left side (15)
line(0,400,100,200); //left side (16)
strokeWeight(1.5) //lines for furthest sac
line(200,175,200,225); //vertical sac line
line(175,200,225,200); //horizontal sac line
line(200,200,145,130); //top (19)
line(255,130,200,200); //top (20)
line(200,200,145,130); //left side (21)
line(145,270,200,200); //left side (22)
line(200,200,255,130); //right side (23)
line(255,270,200,200); //right side (24)
line(200,200,145,270); //bottom (25)
line(255,270,200,200); //bottom (26)
strokeWeight(2)
pop();
translate(-150,-300)
strokeWeight(5) //lines for closest sac
line(450,0,100,600); //top middle (27)
line(800,600,450,0); //top middle (28)
line(450,1200,100,600); //bottom middle(29)
line(800,600,450,1200); //bottom middle(30)
line(800,600,450,0); //top right (31)
line(1150,0,800,600); //top right (32)
line(100,600,-250,0); //top left (33)
line(450,0,100,600); //top left (34)
line(800,600,450,1200); //bottom right (35)
line(1150,1200,800,600); //bottom right (36)
line(100,600,-250,1200); //bottom left (37)
line(450,1200,100,600); //bottom left (38)
strokeWeight(1)
//spaces between lines
dx1 = (100-200)/numLines;
dy1 = (200-0)/numLines;
dx2 = (200-300)/numLines;
dy2 = (0-200)/numLines;
dx3 = (100-200)/numLines;
dy3 = (200-400)/numLines;
dx4 = (200-300)/numLines;
dy4 = (400-200)/numLines;
dx5 = (200-300)/numLines;
dy5 = (0-200)/numLines;
dx6 = (300-400)/numLines;
dy6 = (200-0)/numLines;
dx7 = (200-100)/numLines;
dy7 = (0-200)/numLines;
dx8 = (100-0)/numLines;
dy8 = (200-0)/numLines;
dx9 = (200-300)/numLines;
dy9 = (400-200)/numLines;
dx10 = (300-400)/numLines;
dy10 = (200-400)/numLines;
dx11 = (200-100)/numLines;
dy11 = (400-200)/numLines;
dx12 = (100-0)/numLines;
dy12 = (200-400)/numLines;
dx13 = (400-300)/numLines;
dy13 = (0-200)/numLines;
dx14 = (300-400)/numLines;
dy14 = (200-400)/numLines;
dx15 = (0-100)/numLines;
dy15 = (0-200)/numLines;
dx16 = (100-0)/numLines;
dy16 = (200-400)/numLines;
dx17 = (100-100)/numLines;
dy17 = (300-100)/numLines;
dx18 = (300-300)/numLines;
dy18 = (300-100)/numLines;
dx19 = (145-200)/numLines;
dy19 = (130-200)/numLines;
dx20 = (200-255)/numLines;
dy20 = (200-130)/numLines;
dx21 = (145-200)/numLines;
dy21 = (130-200)/numLines;
dx22 = (200-145)/numLines;
dy22 = (200-270)/numLines;
dx23 = (255-200)/numLines;
dy23 = (130-200)/numLines;
dx24 = (200-255)/numLines;
dy24 = (200-270)/numLines;
dx25 = (145-200)/numLines;
dy25 = (270-200)/numLines;
dx26 = (200-255)/numLines;
dy26 = (200-270)/numLines;
dx27 = (100-450)/numLines;
dy27 = (600-0)/numLines;
dx28 = (450-800)/numLines;
dy28 = (0-600)/numLines;
dx29 = (100-450)/numLines;
dy29 = (600-1200)/numLines;
dx30 = (450-800)/numLines;
dy30 = (1200-600)/numLines;
dx31 = (450-800)/numLines;
dy31 = (0-600)/numLines;
dx32 = (800-1150)/numLines;
dy32 = (600-0)/numLines;
dx33 = ((-250)-100)/numLines;
dy33 = (0-600)/numLines;
dx34 = (100-450)/numLines;
dy34 = (600-0)/numLines;
dx35 = (450-800)/numLines;
dy35 = (1200-600)/numLines;
dx36 = (800-1150)/numLines;
dy36 = (600-1200)/numLines;
dx37 = ((-250)-100)/numLines;
dy37 = (1200-600)/numLines;
dx38 = (100-450)/numLines;
dy38 = (600-1200)/numLines;
}
function draw() {
translate(100,100);
var x1 = 200; //first x and y values of each line
var y1 = 0;
var x2 = 300;
var y2 = 200;
var x3 = 200;
var y3 = 400;
var x4 = 300;
var y4 = 200;
var x5 = 300;
var y5 = 200;
var x6 = 400;
var y6 = 0;
var x7 = 100;
var y7 = 200;
var x8 = 0;
var y8 = 0;
var x9 = 300;
var y9 = 200;
var x10 = 400;
var y10 = 400;
var x11 = 100;
var y11 = 200;
var x12 = 0;
var y12 = 400;
var x13 = 300;
var y13 = 200;
var x14 = 400;
var y14 = 400;
var x15 = 100;
var y15 = 200;
var x16 = 0;
var y16 = 400;
var x17 = 100;
var y17 = 100;
var x18 = 300;
var y18 = 100;
var x19 = 200;
var y19 = 200;
var x20 = 255;
var y20 = 130;
var x21 = 200;
var y21 = 200;
var x22 = 145;
var y22 = 270;
var x23 = 200;
var y23 = 200;
var x24 = 255;
var y24 = 270;
var x25 = 200;
var y25 = 200;
var x26 = 255;
var y26 = 270;
pop();
var x27 = 450;
var y27 = 0;
var x28 = 800;
var y28 = 600;
var x29 = 450;
var y29 = 1200;
var x30 = 800;
var y30 = 600;
var x31 = 800;
var y31 = 600;
var x32 = 1150;
var y32 = 0;
var x33 = 100;
var y33 = 600;
var x34 = 450;
var y34 = 0;
var x35 = 800;
var y35 = 600;
var x36 = 1150;
var y36 = 1200;
var x37 = 100;
var y37 = 600;
var x38 = 450;
var y38 = 1200;
var x39 = -100;
var y39 = -100;
var x40 = 600;
var y40 = -100;
for (var i = 0; i <= numLines; i += 1) { //when variable i is less than the variable
//numLines, run this loop
stroke(255,50); //opaque white
line(x17,y17,x18,y18); //"screen"
x17 += dx17 //add spacing to current x and repeat
y17 += dy17 //add spacing to current y and repeat
x18 += dx18
y18 += dy18
stroke(50) //medium dark gray
line(x1, y1, x2, y2); //top middle flap
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
line(x3,y3,x4,y4); //bottom middle flap
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
line(x5,y5,x6,y6); //top right flap
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
line(x7,y7,x8,y8); //top left flap
x7 += dx7;
y7 += dy7;
x8 += dx8;
y8 += dy8;
line(x9,y9,x10,y10); //bottom left flap
x9 += dx9;
y9 += dy9;
x10 += dx10;
y10 += dy10;
line(x11,y11,x12,y12); //bottom right flap
x11 += dx11;
y11 += dy11;
x12 += dx12;
y12 += dy12;
line(x13,y13,x14,y14); //right side flap
x13 += dx13
y13 += dy13
x14 += dx14
y14 += dy14
line(x15,y15,x16,y16); //left side flap
x15 += dx15
y15 += dy15
x16 += dx16
y16 += dy16
stroke(100); //light gray //flaps for furthest sac
line(x19,y19,x20,y20); //top flap
x19 += dx19
y19 += dy19
x20 += dx20
y20 += dy20
line(x21,y21,x22,y22); //left side flap
x21 += dx19
y21 += dy19
x22 += dx22
y22 += dy22
line(x23,y23,x24,y24); //right side flap
x23 += dx23
y23 += dy23
x24 += dx24
y24 += dy24
line(x25,y25,x26,y26); //bottom flap
x25 += dx25
y25 += dy25
x26 += dx26
y26 += dy26
stroke(0) //black //flaps for closest sac
push();
strokeWeight(2);
translate(-250,-400);
line(x27,y27,x28,y28); //top flap
x27 += dx27
y27 += dy27
x28 += dx28
y28 += dy28
line(x29,y29,x30,y30); //bottom flap
x29 += dx29
y29 += dy29
x30 += dx30
y30 += dy30
line(x31,y31,x32,y32); //top right flap
x31 += dx31
y31 += dy31
x32 += dx32
y32 += dy32
line(x33,y33,x34,y34); //top left flap
x33 += dx33
y33 += dy33
x34 += dx34
y34 += dy34
line(x35,y35,x36,y36); //bottom right slap
x35 += dx35
y35 += dy35
x36 += dx36
y36 += dy36
line(x37,y37,x38,y38); //bottom left flap
x37 += dx37
y37 += dy37
x38 += dx38
y38 += dy38
pop();
}
noLoop();
}