After Mondrian II

let crossPoint;

let hueValue = 0;

let frameCountValue = 0;

let frequencyOfWhite = 0.618; // We will draw colored squares and white square. This value determines the proportion that will be drawn as white

​

let firstColor;

let secondColor;

​

let delta;

let topLeftToBottomRight = true;

​

function setup() {

  createCanvas(400, 400);

  frameRate(60);

  colorMode(HSB, 360, 100, 100, 100);

  background(0, 0, 100, 100);

  stroke(0, 0, 0);

}

​

function draw() {

  if (frameCountValue % 60 == 0) {

    firstColor = randomColor(frequencyOfWhite);

    secondColor = randomColor(frequencyOfWhite);

    delta = 2 + 5 * random(1);

    crossPoint = createVector(random(width), random(height));

    topLeftToBottomRight = !topLeftToBottomRight;

  }

​

  if(topLeftToBottomRight) {

    // colored(or white) squares top left and bottom right with black cross over the top

    fill(firstColor);

    rect(0, 0, crossPoint.x, crossPoint.y);

    fill(secondColor);

    rect(crossPoint.x, crossPoint.y, width, height);

  }

  else {

    // colored(or white) squares bottom left and top right with black cross over the top

    fill(firstColor);

    rect(crossPoint.x, 0, width, crossPoint.y);

    fill(secondColor);

    rect(0, crossPoint.y, crossPoint.x, height); 

  }

​

  cross(crossPoint, delta); 

  frameCountValue++;

}

​

function randomColor(frequencyOfWhite) {

  let pallet = [0,10, 30,40, 320,330,350]; 

​

  if(random(1) > frequencyOfWhite) {

    return  color(pallet[int(random(7))], 100, 100, 2);

  }

  else {

    return color(0, 0, 100, 5); 

  }

}

​

function cross(crossPoint, thickness) {

  strokeWeight(thickness);

  stroke(0, 0, 0, 20);

  line(0, crossPoint.y, width, crossPoint.y);

  line(crossPoint.x, 0, crossPoint.x, height); // changed width to height

}

​