var thickness = 1.75

​

// Chance a grid cell will be colored.

var colorChance = 0.3

// Possible colors for grid cells.

//var colorValues = ["#f00", "#0f0", "#00f", "#fff001"]

var colorValues = ["#f00", "#00f", "#fff001"]

​

​

// 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(240, 240, SVG)

  noLoop()

  frameRate(5)

  angleMode(DEGREES)

}

​

function draw() {

  background(255)

​

  for (var y = 0; y < height; y += 80) {

    for (var x = 0; x < width; x += 80) {

      drawMondrianGrid(x + 4, y + 4, 80 - 5, 80 - 5)

    }

  }

​

}

​

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))

      fill(0)

    } else {

      fill(255)

      fill("#f9f9f9")

      // stroke(255);

    }

    //translate(random(10), random(10))

    //rotate(random(frameCount * 5))

    rect(0, 0, w, h)

  }

​

  pop()

}

​

​

function keyPressed() {

  if (keyCode === ENTER) {

    save(Date.now() + ".svg");

  }

}

​