var canHeight;

var lineLength;

var spacing;

​

function setup() {

  canWidth = 720;

  canHeight = 720;

  lineLength = 22;

  spacing = 13;

  createCanvas(canWidth, canHeight);

  noLoop();

}

​

class Point {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

}

​

class Line {

  constructor(start, end) {

    this.start = start;

    this.end = end;

  }

}

​

function draw() {

  background(255);

  for (var i = 2 * spacing; i < canWidth - 2 * spacing; i += spacing) {

    for (var j = 2 * spacing; j < canHeight - 2 * spacing; j += spacing) {

      newPoint = new Point(i, j);

      //adapted from 2D noise tutorial found at:

      //http://genekogan.com/code/p5js-perlin-noise/

      var lineNoise = noise(0.01 * i, 0.01 * j);

      if (lineNoise < .6) {

        drawLine(newPoint);

      }

    }

  }

}

​

function drawLine(start) {

  //using an adapted version of parametric form found at:     

  //https://en.wikipedia.org/wiki/Circle#Equations

  var angle = random() * (Math.PI / 2);

  x = cos(angle) * lineLength;

  y = sin(angle) * lineLength;

  end = new Point(start.x + x, start.y + y);

  newLine = new Line(start, end);

  stroke(100);

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

}

​

function mousePressed() {

  //since noise only resets when the program restarts, we have to

  //create a new noiseSeed to return different values each mouse click.

  noiseSeed(random(50));

  redraw();

}