​

// Thickness of a grid cell's outline.

let thickness = 3;

​

// Chance a grid cell will be colored.

let colorChance = 0.3;

// Possible colors for grid cells.

let colorValues = ["#ff0101", " #fff001", "#0101fd"];

​

// Chance a grid cell will split (vertically or horizontally).

let splitChance = 0.75;

// Maximum depth to which a grid cell can split.

let maxDepth = 4;

​

function setup() {

  createCanvas(600, 600);

  noLoop();

}

​

function draw() {

  background(255);

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

    for (let 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"

      let 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"

      let 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();

}

​

function mousePressed() {

  redraw();

}