<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"
></script>

<script>
  var canvasWidth = 600,
    canvasHeight = canvasWidth,
    padding = 100,
    length = 8,
    margin = 4,
    strokeWidth = 1,
    columns = getNoOfCols(canvasWidth),
    rows = getNoOfRows(canvasHeight),
    lineColor = "#FFF"

  function getNoOfCols(width) {
    var totalLength = 0,
      noOfCols = 0

    margin = margin || 0

    while (totalLength < width - 2 * padding) {
      totalLength += margin + length
      noOfCols++
    }

    return noOfCols
  }

  function getNoOfRows(height) {
    return getNoOfCols(height, length, margin)
  }

  function setup() {
    createCanvas(canvasWidth, canvasHeight)
    background(0)
    strokeWeight(strokeWidth)
    stroke(lineColor)
    translate(width / 6, height / 6)

    for (var i = 0; i < rows - 1; i++) {
      for (var j = 0; j < columns - 1; j++) {
        const test = (length * i * i) / 2

        const currentOffset = {
          x: j * length + (j + 1) * margin + length,
          y: (i + 1) * margin + i * length + strokeWidth,
        }

        const centerPoint = {
          x: (currentOffset.x + (currentOffset.x + length)) / 2,
          y: (currentOffset.y + (currentOffset.y + length)) / 2,
        }

        push()
        translate(currentOffset.x - 2 * margin, currentOffset.y - 2 * margin)
        rotate((((i + 1) * 2) / (j + 1)) * 2.5)

        const alpha = map(
          (j * 2 + 10) / (i * 4 + 10),
          0,
          rows / columns,
          0,
          255,
        )

        const ugh = color(255, 255, 255, alpha)
        stroke(ugh)

        line(0, 0, 0 + length, 0)
        pop()
      }
    }
  }
</script>

<style>
  body {
    background-color: #222;
  }
</style>