var boolDoRefresh;

function setup() {

  createCanvas(720, 720);

  background(255,255,255)

  noStroke();

  boolDoRefresh = true;

}

var length = 25;

var gridSize = 15;

var lines = []

var gaps = []

​

//adds gaps in the lines

function addGap(gaps, x ,y){

  print(x);

  var r = random(100 * noise(x,y));

  gaps.push([x,y,r]);

}

function distance(x1,y1,x2,y2){

    return sqrt(sq(x2-x1) + sq(y2-y1));

  }

​

function addLine(lines, x1, y1){

  var theta = random(360);

  var x2 = x1 + (cos(theta) * length);

  var y2 = y1 + (sin(theta) * length);

  lines.push([x1,y1,x2,y2]);

}

​

​

function draw() {

  if (boolDoRefresh) {

    // DRAW STUFF HERE....

    boolDoRefresh = false;

    background(255,255,255)

    lines = [];

    gaps = [];

    fill(255,0,0);

    //creates new gaps on each click

    for(var x = gridSize; x <= width - gridSize; x += gridSize){

      for(var y = gridSize; y <= height - gridSize; y += gridSize){ if(noise(x,y) > 0.82 && random(4) > 3){

            addGap(gaps,x,y);

        }

      }

    }

    strokeWeight(1.5);

    stroke(0);

  //creates and draws new lines on each click

    for(var x1 = gridSize; x1 <= width - gridSize; x1 += gridSize){

      for(var y1 = gridSize; y1 <= height - gridSize; y1 += gridSize){

        var isInGap = false;

        for(var i = 0; i < gaps.length; i++){

          if(distance(x1,y1,gaps[i][0],gaps[i][1]) < random(50,70)){

            isInGap = true;

          }

        }

        if(!isInGap){

            var theta = random(360);

                var x2 = x1 + (cos(theta) * length);

                var y2 = y1 + (sin(theta) * length);

            line(x1,y1,x2,y2);

        }

      }

    }

  }

}

function mousePressed() {

  boolDoRefresh = true;

}