Grid System

/*

--- UPDATES ---

V1.0 - Release (3/10/24)

*/

​

​

let xLines = 10 // Change these to however many you'd like, it changes how many boxes are on the screen

let yLines = 5

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(100, 100, 100)

  drawLines(xLines, yLines)

}

​

function drawLines(x, y) {

  strokeWeight(2)

  let incr = 0;

  let form = windowWidth / x

  for (let i = 0; i !== xLines; i++) {

    incr = form + incr

    line(incr, 0, incr, windowHeight) // X, Y, X2, Y2

    // console.log(incr + "Y")

  }

  incr = 0

  form = windowHeight / y

  for (let z = 0; z !== y; z++) {

    incr = form + incr

    line(0, incr, windowWidth, incr)

    // line(0, incr, incr, windowWidth) Kinda cool bug?

    // console.log(incr + "X")

  }

}