40% blue, 40% red, 10% green, 10% orange

mySketch
xxxxxxxxxx
 
/*
Recreation of 
40% Blue, 40% Red, 10% Green,10% Orange
From François Morellet
​
Recreation by: Mauricio van der Maesen de Sombreff:
*/
​
var bluePercent = 40;
var redPercent = 40;
var greenPercent = 10;
var orangePercent = 10;
var xPixels = 56;
var yPixels = 56;
var pixelSize = 10;
var gapSize = 3;
var margin = 20;
​
function setup() {
  createCanvas(
    xPixels * pixelSize + (xPixels + 1) * gapSize + 2 * margin, 
    yPixels * pixelSize + (yPixels + 1) * gapSize + 3 * margin
  );
  generate();
}
  
function mousePressed(){
  generate();
}
​
function generate() {
  background(255);
​
  stroke(0);
  fill(255);
  rect(0,0,width,height);
  
  fill(0);
  noStroke();
  rect(margin, 
       2*margin, 
       xPixels * (pixelSize + gapSize) + gapSize, 
       yPixels * (pixelSize + gapSize) + gapSize
      );
  
  for(var i = 0; i < xPixels; i++){
    for(var j = 0; j < yPixels; j++){
      var xPos = margin + i * (pixelSize + gapSize) + gapSize;
      var yPos = 2* margin + j * (pixelSize + gapSize) + gapSize;
      setColor();
      rect(xPos, yPos, pixelSize, pixelSize);
    }
  }
  fill(0);
  textSize(20);
  textAlign(CENTER, CENTER);
  text('Generated', width/2, margin);
}
​
function setColor(){
  var rand = random(100);
  
  var thdFrom = 0;
  var thdTo = bluePercent;
  
  if(thdFrom <= rand && rand < thdTo){
    return fill(0,111,174);
  }
  
  thdFrom += bluePercent;
  thdTo += redPercent;
  
  if(thdFrom <= rand && rand < thdTo){
    return fill(227,51,60);
  }
  
  thdFrom += redPercent;
  thdTo += greenPercent;
  
  if(thdFrom <= rand && rand < thdTo){
    return fill(2,91,93);
  }
  
  thdFrom += greenPercent;
  thdTo += orangePercent;
  
  if(thdFrom <= rand && rand < thdTo){
    return fill(246,78,71);
  }
  
}