Mondrian Squares

// By Roni Kaufman

​

var thickness = 8; // thickness of the lines between the cubes

​

var colors; // colors used, including black and white

var nbColors; // number of colors

var startingProbColors; // starting probabilities

var probColors; // probabilities of applying each color to a rectangle, the sum of its elements must be equal to 1.0

var probReducingColors; // gives how the probabilities for each color evolve every time we use them (the closest to 1, the more we'll reduce)

var colorPalette;

​

var probFactor = 0.7; // factor to multiply the probability of division with when we call the function mondrianRecursion recursively

​

function setup() {

  let size = min(windowWidth, windowHeight);

  createCanvas(size, size);

  noLoop();

  colors = [[19,22,14], [235,235,235], [69,106,187], [233,206,49], [216,64,40]];

  nbColors = colors.length;

  startingProbColors = [0.01, 0.81, 0.06, 0.06, 0.06];

  probColors = startingProbColors.slice();

  probReducingColors = [0.8, 0.1, 0.5, 0.5, 0.5];

  noStroke();

}

​

function draw() {

  background(colors[0]);

  mondrianRecursion(width - thickness, height - thickness, thickness/2, thickness/2, 1.0, (random(2)<1));

}

​

/* Draws a generated Mondrian-style picture recursively

   w the width, h the height, (x,y) the top-left corner

   prob the probability to divide this rectangle into 2 new rectangles

   vertical = true if we must divide vertically, false if horizontally */

function mondrianRecursion(w, h, x, y, prob, vertical) {

  if (random(1) < prob) { // we must divide again

    mondrianRecursion(w/2, h/2, x, y, prob*probFactor, false);

    mondrianRecursion(w/2, h/2, x + w/2, y, prob*probFactor, false);

    mondrianRecursion(w/2, h/2, x + w/2, y + h/2, prob*probFactor, true);

    mondrianRecursion(w/2, h/2, x, y + h/2, prob*probFactor, true);

  } else { // we must draw a rectangle in the zone

    var idx = chooseColor();

    newProbColors(idx);

    fill(colors[idx][0], colors[idx][1], colors[idx][2]);

    if (w > 15 && h > 15)

      rect(x + thickness/2, y + thickness/2, max(w - thickness, 0), max(h - thickness, 0), 0);

  }

}

​

/* Choose a color randomly using the probability distribution of probColors */

​

function chooseColor() {

  var r = random(1), sum = 0;

  var i = 0;

  while (sum <= r) {

    sum += probColors[i++];

  }  

  return i - 1;

}

​

/* Changes probColors during the execution in order not to have too much of a certain color

   Reduces the probability of the last used color and redistributes it uniformly to all the others */

​

function newProbColors(i) {

  var x = probColors[i] * probReducingColors[i];

  for (var k = 0; k < nbColors; k++) {

    if (i === k) {

      probColors[k] = probColors[k] - x; // decrease this probability

    } else {

      probColors[k] = probColors[k] + x / (nbColors-1); // increase all the other ones

    }

  }

}

​

function keyPressed() {

  if (key === " ") { // generate a new one

    draw();

  } 

}