Forward

html #generative art#p5
<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>