// Thickness of a grid cell's outline.
var thickness = 3

// Chance a grid cell will be colored.
var colorChance = 0.3
// Possible colors for grid cells.
var colorValues = ["#ff0101", "	#fff001", "#0101fd"]

// Chance a grid cell will split (vertically or horizontally).
var splitChance = 0.75
// Maximum depth to which a grid cell can split.
var maxDepth = 4

function setup() {
  createCanvas(400, 400)
  noLoop()
}

function draw() {
  background(255)

  for (var y = 0; y < height; y += 100) {
    for (var x = 0; x < width; x += 100) {
      drawMondrianGrid(x + 4, y + 4, 100 - 8, 100 - 8)
    }
  }
}

function drawMondrianGrid(x, y, w, h, depth = 1) {
  push()
  translate(x, y)

  if (depth <= maxDepth && random() < splitChance) {
    if (depth % 2 == 0) { // "split vertical"
      var dw = random(w * 0.3, w * 0.7)

      drawMondrianGrid( 0, 0,     dw, h, depth + 1)
      drawMondrianGrid(dw, 0, w - dw, h, depth + 1)
    }
    
    if (depth % 2 != 0) { // "split horizontally"
      var dh = random(h * 0.3, h * 0.7)

      drawMondrianGrid(0,  0, w,     dh, depth + 1)
      drawMondrianGrid(0, dh, w, h - dh, depth + 1)
    }
  } else {
    stroke("#30303a")
    strokeWeight(thickness)

    if (random() < colorChance) {
      fill(random(colorValues))
    } else {
      fill("#f9f9f9")
    }
    rect(0, 0, w, h)
  }

  pop()
}