let odd = true

​

let dim

let gap

let lines = []

​

function setup() {

  dim = min(windowWidth, windowHeight) * 0.8

  gap = dim / 8

​

  createCanvas(dim, dim)

  strokeJoin(BEVEL)

​

  lines = []

  for (var y = gap / 2; y <= dim; y += gap) {

    odd = !odd

    const line = []

    for (var x = gap / 4; x <= dim; x += gap) {

      const xrand = Math.random() * 0.8 - 0.4

      const yrand = Math.random() * 0.8 - 0.4

      line.push({

        x: x + xrand * gap + (odd ? gap / 2 : 0),

        y: y + yrand * gap,

        opacity: map((xrand + yrand) / 2, -0.4, 0.4, 0, 1)

      })

    }

    lines.push(line)

  }

}

​

function mousePressed() {

  background(0)

  setup()

  draw()

}

​

function draw() {

  for (var y = 0; y < lines.length - 1; y++) {

    odd = !odd

    dotLine = []

    for (var i = 0; i < lines[y].length; i++) {

      dotLine.push(odd ? lines[y][i] : lines[y + 1][i])

      dotLine.push(odd ? lines[y + 1][i] : lines[y][i])

    }

    for (var i = 0; i < dotLine.length - 2; i++) {

      stroke(0)

      fill(

        lerpColor(

          color('#afcdb4'),

          color('#090f0c'),

          (dotLine[i].opacity +

            dotLine[i + 1].opacity +

            dotLine[i + 2].opacity) /

            3

        )

      )

      triangle(

        dotLine[i].x,

        dotLine[i].y,

        dotLine[i + 1].x,

        dotLine[i + 1].y,

        dotLine[i + 2].x,

        dotLine[i + 2].y

      )

    }

  }

​

  noLoop()

}