​

var lineLength;

var resolution;

var inc = 0.01;

var noiseValue = 0;

var xOff = 0.0; //noise

var yOff = 0.0; //noise

var marginPercent = 0.065

​

class Point {

    constructor(x, y) {

        this.x = x;

        this.y = y;

    }

}

​

​

​

function LineClass(start, end) { //constructor assumes these are points

  this.start = start;

  this.end = end;

  this.Draw = function() {

    strokeWeight(1);

    line(start.x, start.y, end.x, end.y);

  };

}

​

function setup() {

  createCanvas(720, 720);

  resolution = width / 75; //the more you divide this by the lower the resolution

  lineSize = resolution;

  interruptions();

​

}

​

function getStartPoint(origin, radius) {

  //formula found on stackoverflow from user_CC @https://bit.ly/2zEqdwq

  var theta = random(0, TWO_PI);

  var x = radius * cos(theta) + origin.x;

  var y = radius * sin(theta) + origin.y;

​

  return new Point(x, y);

}

​

function getEndPoint(startPoint, midPoint) {

  var endPoint = midPoint;

  var directionVector = new Point(midPoint.x, midPoint.y);

  directionVector.x -= startPoint.x;

  directionVector.y -= startPoint.y;

  endPoint.x += directionVector.x;

  endPoint.y += directionVector.y;

  return endPoint;

​

}

​

function draw() {}

​

function mouseClicked() {

  interruptions();

}

​

function interruptions() {

  //background(noiseValue * 255, 255, 255);

  background(200, 200, 200);

​

  noiseDetail(8, 0.45); //optional, just makes the holes less clear //8,0.35

  noiseSeed(random(0, 10000)); //creates one large hole if removed

​

​

 for (var xAxis = 2 * resolution; xAxis < width - 2 * resolution; xAxis += resolution) {

        //these values control the margins 

        for (var yAxis = 2 * resolution; yAxis < width - 2 * resolution; yAxis += resolution) {      noiseValue = noise((xOff + xAxis) / 40, (yOff + yAxis) / 60);

      //^^^controls the blank space. The smaller the number the higher chance we'll have spaces

      //fill(255,255, 255); //background color

      //fill(noiseValue * 255, 255, 255);

      //^^^perlin generated background color

      noStroke();

      //rect(xAxis, yAxis, resolution, resolution); // controls margin for perlin colors

      xOff += inc;

      //var mid = map(xAxis, 0, 56- 1, width*marginPercent, width*(1.0 -marginPercent ));

      var mid = new Point(xAxis, yAxis);

      var start = getStartPoint(mid, lineSize);

      var end = getEndPoint(start, mid);

​

      var lineClass = new LineClass(start, end);

      if (noiseValue >= 0.3) {

        stroke(0, 0, 0);

        //stroke(0, 50, 200);

        lineClass.Draw();

      }

    }

    xOff = 0;

    yOff += inc;

  }

​

}