sketch.js

let cell = 20;
let margin = 40;

let midX, midY;
let hX, vY;

function setup() {
  let container = document.getElementById('p5-container');
  let canvas = createCanvas(800, 800);
  if (container) canvas.parent('p5-container');
  background(255);
  drawGrid();

  stroke(0);
  strokeWeight(3);

  midX = width / 2;
  midY = height / 2;

  line(margin, midY, width - margin, midY);
  line(midX, margin, midX, height - margin);

  hX = margin;
  vY = margin;

  strokeWeight(2);
}

function draw() {
  let rightLimit = width - margin;
  let bottomLimit = height - margin;

  if (hX < rightLimit) {
    stroke(0, 120, 255);
    let roll = int(random(1, 7));
    let length = roll * cell;

    let startX = hX;
    let startY = midY;

    let endY = roll <= 3 ? startY - length : startY + length;

    line(startX, startY, startX, endY);
    hX += cell;
  }

  if (vY < bottomLimit) {
    stroke(0, 200, 120);
    let roll = int(random(1, 7));
    let length = roll * cell;

    let startX = midX;
    let startY = vY;
    let endX = roll <= 3 ? startX - length : startX + length;

    line(startX, startY, endX, startY);
    vY += cell;
  }

  if (hX >= rightLimit && vY >= bottomLimit) {
    noLoop();
  }
}

function drawGrid() {
  stroke(230);
  for (let x = 0; x < width; x += cell) line(x, 0, x, height);
  for (let y = 0; y < height; y += cell) line(0, y, width, y);
}