kerjos-Interruptions

Here’s my Interruptions project:

I started by observing this about Vera Molnar’s work:
1. The artwork is square.
2. The artwork consists of many short black lines, on a white background.
3. The lines all have the same length.
4. The lines may cross each other but typically by only a little of one of them.
5. Some lines may cross or abut no other lines.
6. The majority of the lines feel like they favor one orientation, appearing more vertical or more horizontal.
7. Great pockets, with no lines, appear randomly and of different sizes throughout the space.
8. These pockets may be small and few.
9. Sometimes the lines only just touch.
10. The artwork is denser in some areas, less dense in others.
11. All lines fit fully in the square.
12. But they may hug the invisible edge of the square tightly.
13. The lines sometimes form enclosed shapes of three to five sides.
14. The lines appear to fall in rows or columns.

Here’s some pics if you can’t see that:

For this project, my initial approach was thinking about some sort of basic trick that Molnar might have used to generate her lines: I didn’t approach it at first with the nested ‘for’ loops that wound up creating the closest approximation based on a grid of generated lines. Rather, I tried first seeding a line in the lower left corner and drawing lines that touched or almost touched the previous line drawn. Then I tried generating lines at the top of the square and “dropping” them, in a way, until they hit the bottom or another line.

But those designs did not produce what I wanted, so I moved on to the nested ‘for’ loops. I got a lot of help from Golan in identifying a point where I almost had the project completed but not quite, and that got me to my finishing point.

Of my results, I feel like Molnar’s originals still have more structure to their randomness than mine; the chaos was something I was fighting for the length of this project. I did develop a way to detect if the lines are overly overlapping other lines, and to have them redraw themselves, so to speak, so that doesn’t happen, and this I thought better approximated Molnar’s work.

Here’s my code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*Thank you to Golan, Connie, Zachary, Peter, and everyone in the
* Studio for Creative Inquiry for helping me put this together.
*/
 
function setup() { 
  createCanvas(400, 400);
	angleMode(DEGREES);
	noLoop();
	generateLines();
}
 
var noiseScale = 0.02;
var margin = 20;
var length = 10;
var linesArray = [];
var lineColor = 0;
 
function generateLines() {
	var frac = 0.60;
  for (var x=margin; x < width-margin; x+=6) {
		for (var y=margin; y < height-margin; y+=6) {
			var noiseVal = noise(x*noiseScale,y*noiseScale);
			if (noiseVal < frac){
				var newLine = randomLine(x,y);
				linesArray.push(newLine);
			} else {
				//Nothing.
			}
		}
	}
}
 
function randomLine(x,y) {
	var theta = random(360);
	x1 = x + ((length/2) * cos(theta));
	y1 = y + ((length/2) * sin(theta));
	x2 = x - ((length/2) * cos(theta));
	y2 = y - ((length/2) * sin(theta));
	var newLine = {x: x, y: y,
								 linePoints: {x1: x1, y1: y1, x2: x2, y2: y2}}
	var intersects = checkIntersections(newLine);
	if (intersects) {
		randomLine(x,y)
	} else {
		return newLine
	}
}
 
function checkIntersections(lineObject) {
	//Credit to Paul Bourke for the math behind this Intersecting Lines formula.
	x1 = lineObject.linePoints.x1;
	y1 = lineObject.linePoints.y1;
	x2 = lineObject.linePoints.x2;
	y2 = lineObject.linePoints.y2;
	j = 0;
	for (i=0; i<linesArray.length; i++) {
		var otherLine = linesArray[j];
		x3 = otherLine.linePoints.x1;
		y3 = otherLine.linePoints.y1;
		x4 = otherLine.linePoints.x2;
		y4 = otherLine.linePoints.y2;
		uANumer = ((x4 - x3)*(y1 - y3)) - ((y4 - y3)*(x1 - x3));
		uBNumer = ((x2 - x1)*(y1 - y3)) - ((y2 - y1)*(x1 - x3));
		Denom = ((y4 - y3)*(x2 - x1)) - ((x4 - x3)*(y2 - y1));
		uA = uANumer/Denom;
		uB = uBNumer/Denom;
		if ((uA > 1) || (uA < 0) || (uB > 1) || (uB < 0)) {continue}
		j++;
		return true;
	}
	return false;
}
 
function draw() {
	background(255); 
	drawLines();
}
 
function drawLines() {
	for (i=0; i<linesArray.length; i++) {
		drawLine(linesArray[i]);
	}
}
 
function drawLine(lineObject) {
	stroke(lineColor);
	x1 = lineObject.linePoints.x1;
	y1 = lineObject.linePoints.y1;
	x2 = lineObject.linePoints.x2;
	y2 = lineObject.linePoints.y2;
	line(x1,y1,x2,y2);
}
 
/*Thank you to Golan, Connie, Zachary, Peter, and everyone in the
* Studio for Creative Inquiry for helping me put this together.
*/