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)

  angleMode(DEGREES)

  noLoop()

}

​

function draw() {

  background(255)

​

  for (var r = 300; r > 0; r -= 100) {

    drawMondrainCircle(width/2, height/2, r, 0, 360)

  }

  strokeWeight(thickness)

  circle(width/2, height/2, 30)

}

​

function drawMondrainCircle(x, y, r, startAngle, stopAngle, depth = 1) {

  push()

  translate(x, y)

​

  if (depth <= maxDepth && random() < splitChance) {

    var dAngle = random(

      (stopAngle - startAngle) * 0.3,

      (stopAngle - startAngle) * 0.7

    )

    drawMondrainCircle(0, 0, r, startAngle, startAngle + dAngle, depth + 1)

    drawMondrainCircle(0, 0, r, startAngle + dAngle, stopAngle, depth + 1)

  } else {

    stroke("#30303a")

    strokeWeight(thickness)

​

    if (random() < colorChance) {

      fill(random(colorValues))

    } else {

      fill("#f9f9f9")

    }

    arc(0, 0, r, r, startAngle, stopAngle, PIE)

  }

​

  pop()

}