let col; // column

let row; // row

let mar; // margin in pixel

let num; // number of rectangles

let max_num; // maximum number of rectangles

​

let isRed;

let isGreen;

let isBlue;

let isShow;

​

const HOME  = 36;

const END   = 35;

const SPACE = 32;

const TAB   = 9;

const R_KEY = 82;

const G_KEY = 71;

const B_KEY = 66;

​

this.focus();

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  frameRate(4);

  strokeWeight(8);

  textFont('Verdana', height / 10);

  defaultValues();

  step = 0;

  max_num = 0;

  isInfo = false;

  help();

}

​

function defaultValues() {

  mar = 2;

  col = 5;

  row = 4;

  isRed   = true;

  isGreen = true;

  isBlue  = true;

}

​

function coloredWindows(x, y, w, h) {

  if (w > 2 && h > 2) {

    if (isRed)   {cRed   = random(256)} else {cRed   = 0}

    if (isGreen) {cGreen = random(256)} else {cGreen = 0}

    if (isBlue)  {cBlue  = random(256)} else {cBlue  = 0}

    if (!isRed && !isGreen && !isBlue) {

      cRed   = random(256);

      cGreen = cRed;

      cBlue  = cRed;

    }

    fill(cRed, cGreen, cBlue);

    rect(x, y, w, h, 3);

    num++;

    if (num > max_num) {max_num = num}

    let nw = (w - (col + 1) * mar) / col; // new width

    let nh = (h - (row + 1) * mar) / row; // new height

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

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

        coloredWindows(x + (i + 1) * mar + i * nw,

                       y + (j + 1) * mar + j * nh, nw, nh);

      }

    }

    return (0);

  }

}

​

function keyPressed() {

  switch (keyCode) {

    case LEFT_ARROW:  {if (col >  1) col--};

      break;

    case RIGHT_ARROW: {if (col < 20) col++};

      break;

    case DOWN_ARROW:  {if (row >  1) row--};

      break;

    case UP_ARROW:    {if (row < 20) row++};

      break;

    case CONTROL:     {if (mar >  1) mar--};

      break;

    case ALT:         {if (mar < 50) mar++};

      break;

    case HOME:        {mar =  1;  col =  1;  row =  1};

      break;

    case END:         {mar = 50;  col = 20;  row = 20};

      break;

    case ENTER:       {defaultValues()};

      break;

    case SHIFT:       {let tmp = row;  row = col; col = tmp};

      break;

    case R_KEY:       {isRed   = !isRed};

      break;

    case G_KEY:       {isGreen = !isGreen};

      break;

    case B_KEY:       {isBlue  = !isBlue};

      break;

    case SPACE:       {isInfo  = !isInfo};

      break;

  }

}

​

function mousePressed() {

  if (mouseX > 0 && mouseX < width &&

      mouseY > 0 && mouseY < height) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

function infoText() {

  let txt = step + "\n" +

            col + " x " + row + "    m:" + mar + "    ";

  if (isRed)   {txt += "R"} else {txt += "-"}

  if (isGreen) {txt += "G"} else {txt += "-"}

  if (isBlue)  {txt += "B"} else {txt += "-"}

  txt += "\n[ " + num + " / " + max_num + " ]";

  return (txt);

}

​

function show(txt, pozx, pozy) {

  textAlign(pozx, pozy);

  fill(0);

  stroke(255);

  text(txt, width / 2, height / 2);

}

​

function help() {

  print("LEFT = Decrease columns");

  print("RIGHT = Increase columns");

  print("DOWN = Decrease rows");

  print("UP = Increase rows");

  print("CONTROL = Decrease margin");

  print("ALT = Increase margin");

  print("HOME = Go to minimum");

  print("END = Go to maximum");

  print("ENTER = Go to default");

  print("TAB = Swap rows ans columns");

  print("R / G / B = Color component on/off");

  print("SPACE = Info on/off");

  print("LEFT-CLICK = Full screen on/off");

}

​

function draw() {

  num = 0;

  step++;

  noStroke();

  coloredWindows(0, 0, width, height);

  if (isInfo) {show(infoText(), CENTER, CENTER)}

  return (0);

}