let diagnonalAngle;

let diagonalLength;

​

function setup() {

  let w = windowWidth - (windowWidth%(spacing*spacing))

  let h = windowHeight - (windowHeight%(spacing*spacing))

  console.log(w, h)

  createCanvas(w, h);

  diagnonalAngle = PI / 4; //45

  // diagonal across a square has lenth root 2, thanks pythogoras!

  forwardLength = sqrt(2) * height / 2

  backwardLength = sqrt(2) * width / 2;

}

​

function draw() {

  background(0);

​

  stroke(255)

​

  for (let x = 0; x < width; x += spacing) {

    line(x, 0, x, height);

  }

​

  for (let y = 0; y < height; y += spacing) {

    if (y < height / 2)

      line(width / 2, y, width, y);

    else

      line(0, y, width, y);

  }

​

  // For diagonals, the angle is 45.

  // To stay consistent with 

  for (let x = -height / 2; x < width; x += spacing) {

    endX = forwardLength * cos(-diagnonalAngle)

    endY = forwardLength * sin(-diagnonalAngle)

    strokeWeight(12)

    point(endX, endY)

    strokeWeight(1)

    line(x, height, x + endX, height + endY)

  }

​

  for (let y = -width / 2; y < height; y += spacing) {

    endX = backwardLength * cos(diagnonalAngle)

    endY = backwardLength * sin(diagnonalAngle)

    startX = width / 2

    startY = y

    if (y < height / 2) {

      startY = height / 2

      startX = width / 2 + height / 2 - y

    }

​

    line(startX, startY, width / 2 + endX, y + endY)

  }

​

​

}