Jackalope-Interruptions

Observations:
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. There are many “interruptions” in the artwork where there are no lines
5. The lines do not seem to be generated in a regular row-column pattern
6. Most lines intersect with at least one other line
7. Each has at least one noteable hole and less than 10
8. The lines don’t have any kind of pattern in their angle directions
9. At parts it looks like there are streaks where the lines are in similar angles, but then many other areas break this rule
10. there seems to be 50-60 lines along the left edge
11. The interruptions of varying sizes
12. The lines can intersect
13. Many lines don’t intersect however
14. The intersections all occur near the ends of the lines
15. theres almost always a line at regular increments of space, besides the holes
16. all the gaps are fairly simple, rectangular shapes

I made around 10 observations before I started programming my version. Then as I went along, I identified more traits by comparing mine to hers. For example, it was only after seeing mine that I was absolutely certain about the orderliness of her lines. I found the gaps most challenging to reproduce. This was largely because I kept trying to identify some sort of reason to the sudden appearance of gaps, like something along the lines of adding gap whenever there’s a certain kind of line intersection or something like that. In terms of programming however, nothing was really challenging to write. In the end, I think my result is pretty close, although I still feel hers is still a bit more dense without being chaotic.

var lines = 46;
var lineArray = [];
var maxlen = 20;
var offset = 30;
var incr = 14.5;
 
function setup() {
  createCanvas(720, 720);
  for (var i = 0; i < lines; i++) {
    for (var j = 0; j < lines; j++) {
      append(lineArray, [0, 0, 0, 0])
    }
  }
}
 
function draw() {
  background(255);
  for (var i = 0; i < lines; i++) {
    for (var j = 0; j < lines; j++) {
      x1 = lineArray[j + lines * i][0];
      y1 = lineArray[j + lines * i][1];
      x2 = lineArray[j + lines * i][2];
      y2 = lineArray[j + lines * i][3];
      stroke(0, 0, 0);
      fill(0, 0, 0);
      line(x1, y1, x2, y2);
    }
  }
}
 
function mouseClicked() {
  var x1, x2, y1, y2;
  intersects = 0;
  intersectArray = [];
  colorMode(HSB);
  background(20, 255, 255);
 
  for (var i = 0; i < lines; i++) {
    for (var j = 0; j < lines; j++) {
      x1 = random(offset + incr * j, offset + incr * (j + 1 / 2));
      y1 = random(offset + incr * i, offset + incr * (i + 1 / 2));
      x2 = random(x1 - maxlen * 0.7, x1 + maxlen * 0.7);
      if (x2 < 0) x2 = 0;
      y2 = findY(x1, y1, x2);
      lineArray[j + lines * i][0] = x1;
      lineArray[j + i * lines][1] = y1;
      lineArray[j + lines * i][2] = x2;
      lineArray[j + lines * i][3] = y2;
 
    }
  }
  makeGaps();
 
}
 
function findY(x1, y1, x2) {
  var y2 = sq(maxlen);
  y2 -= sq(x2 - x1);
  y2 = sqrt(y2);
  return y2 + y1;
}
 
function makeGaps() {
  var gapNumber = int(random(1, 10));
  var gapWidth, gapHeight;
  var x, y;
  for (var gap = 0; gap < gapNumber; gap++) {
    gapWidth = int(random(1, 6));
    gapHeight = int(random(1, 6));
    x = int(random(0, 45));
    y = int(random(0, 45));
    for (var i = x; i < x + gapHeight; i++) {
      for (var j = y; j < y + gapWidth; j++) {
        lineArray[j + lines * i] = [0, 0, 0, 0];
      }
    }
  }
}