matrix, size,

    mtrxWidth, mtrxHeight,

    x0, y0, xMargin0, xStep, yStep;

function preload() {

  let roboLight = "fonts/RobotoMono-Light.ttf",

    roboMedium = "fonts/RobotoMono-Medium.ttf",

    roboRegular = "fonts/RobotoMono-Regular.ttf",

    roboBold = "fonts/RobotoMono-Bold.ttf";

    cartoMedium = "fonts/CartographMonoCFMedium.ttf",

    cartoRegular = "fonts/CartographMonoCFRegular.ttf";

  size = { w: 450, h: 450 };

  birdFont = loadFont(roboBold);

  numFont = loadFont(roboRegular);

  matrix = [];

  colors = [];  

} 

function setup() {

  createCanvas(size.w, size.h);

  textSize(22);

  fill("white");

  angleMode(DEGREES);

  textAlign(CENTER);

  colorBase = color(120);

  colors[0] = "#fccb4e";

  colors[1] = "#b44c18";

  colors[2] = "#f3b82f";

  colors[3] = "#c48e2a";

  colors[4] = "#e26204";

  mtrxWidth = 12;

  mtrxHeight = 12;

  x0 = 100;

  y0 = 26;

  xStep = (size.w - 130) / mtrxWidth;

  yStep = (size.h - 32) / mtrxHeight;

  xMargin0 = 40;

  fillMatrix();

  frameRate(2);

  //noLoop();

}

​

function draw() {

  let flockSize = getRandomInt(1, 40);

  fillMatrix();

  background(10);

  translate(width/2, height/2);

  push();

  rotate(90);  

  textFont(numFont);

  textAlign(RIGHT, CENTER);

  fill(colors[1]);

  for (let i = 0; i < mtrxHeight; i++) {

    let y = y0 + (i * yStep);

    text(i+1, xMargin0 - width/2, y - height/2);

  }

  textFont(birdFont);

  textAlign(CENTER, CENTER);

  for (let i = 0; i < flockSize; i++) {

    let pos = matrix[Math.floor(Math.random() * matrix.length)];  

    let symb = (random() > 0.5) ? "{" : "}";

    fill(colors[getRandomInt(0, 4)]);

    text(symb, pos.x, pos.y);

    matrix.splice(matrix.indexOf(pos), 1);

  }

  matrix = [];

  pop();

}

​

function getRandomInt(min, max) {

    min = Math.ceil(min);

    max = Math.floor(max);

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

​

function fillMatrix() {

  for (let i = 0; i < mtrxWidth; i++) {

    for (let j = 0; j < mtrxHeight; j++) {

      matrix.push({ 

        i: i, j: j,

        x: (x0 + i * xStep) - width/2, 

        y: (y0 + j * yStep) - height/2

      });

    }  

  }

}