let diagnonalAngle;

let diagonalLength;

​

function setup() {

  createCanvas(400, 400);

  diagnonalAngle = PI / 4; //45

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

  diagonalLength = 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 side length,

  // Length of diagnoal is root 2

​

  // begin off screen, so that diagonals cover entire bottom half

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

    // Note the nagation in angle.

    // Angles are measured from x axis, clockwise.

    // negation = anticlockwise

    endX = diagonalLength * cos(-diagnonalAngle)

    endY = diagonalLength * sin(-diagnonalAngle)

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

  }

​

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

    endX = diagonalLength * cos(diagnonalAngle)

    endY = diagonalLength * sin(diagnonalAngle)

    // These are the starting points for the line

    startX = width / 2

    startY = y

​

    // If line starts falls above fourth quadrent

    if (y < height / 2) {

      // override starting y co-ordinate to height/2

      // increase starting x by same amount to maintain angle

      startY = height / 2

      startX += height / 2 - y

    }

​

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

  }

​

​

}