const canvasHeight = 400;

const columns = 5;

const rows = 3;

const directions = [

  'horizontal',

  'vertical',

  'diagonal-left',

  'diagonal-right',

];

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  background(255);

  strokeWeight(3);

  frameRate(2)

}

​

function draw() {

  background(255);

  const cellWidth = canvasWidth / columns;

  const cellHeight = canvasHeight / rows;

​

  for (let i = 0; i < rows; i++) {

    for (let j = 0; j < columns; j++) {

      const x = j * cellWidth;

      const y = i * cellHeight;

​

      // Randomly select line directions for each cell

      const selectedDirections = getRandomDirections();

​

      for (const direction of selectedDirections) {

        drawLine(direction, x, y, cellWidth, cellHeight);

      }

    }

  }

​

}

​

function getRandomDirections() {

  const shuffled = directions.sort(() => 0.5 - Math.random());

  const selected = shuffled.slice(0, Math.floor(Math.random() * (directions.length + 1)));

  return selected;

}

​

function drawLine(direction, x, y, cellWidth, cellHeight) {

  switch (direction) {

    case 'horizontal':

      line(x, y + cellHeight / 2, x + cellWidth, y + cellHeight / 2);

      break;

    case 'vertical':

      line(x + cellWidth / 2, y, x + cellWidth / 2, y + cellHeight);

      break;

    case 'diagonal-left':

      line(x, y + cellHeight, x + cellWidth, y);

      break;

    case 'diagonal-right':

      line(x, y, x + cellWidth, y + cellHeight);

      break;

  }

}

​