let halfCell = cellSize / 2;

const buttonWidth  = 160;

const buttonHeight =  40;

const buttonMargin =  10;

const c_Back   = 'black';

const c_Text   = 'beige';

const c_Cell_R = 'yellow';

const c_Cell_P = 'green';

const c_Cell_S = 'red';

const SPACE    =  32;

let tableX, tableY, col, row, area, infoX;

// buttons

let b_Start, b_Stop, b_Step, b_New;

// paragraphs

let p_Generation, p_Gener, p_Population;

let p_Popul_R, p_Popul_P, p_Popul_S;

let currTable  = [];

let nextTable  = [];

let popul_R, popul_P, popul_S, gener;

let first = true;

​

this.focus();

​

function setup() {

  rectMode(CENTER);

  noStroke();

  createCanvas(windowWidth, windowHeight);

  background(c_Back);

  tableX = width - buttonWidth - 2 * buttonMargin;

  col = int(tableX / cellSize);

  tableX = col * cellSize;

  tableY = height;

  row = int(tableY / cellSize);

  tableY = row * cellSize;

  infoX = (tableX + width) / 2;

  area = col * row;

  createButtons();

  createParagraphs()

  createTables();

  noLoop();

  newButton();

}

​

function makeParagraph (label, color, row, border) {

  p = createP(label);

  p.position(tableX + buttonMargin, tableY + row * buttonHeight);

  p.size(buttonWidth, buttonHeight);

  p.style('font-family',      'Verdana');

  p.style('font-size',        '25px');

  p.style('font-weight',      'normal');

  p.style('text-align',       'center');

  p.style('color',            color);

  p.style('background-color', c_Back);

  p.style('margin',           '0 0 0 0');

  p.style('border-style',     'solid');

  p.style('border-width',     border);

  p.style('border-color',     c_Text);

  return p;

}

​

function createParagraphs() {

  p_Generation = makeParagraph('Generation', c_Text,   -6, '1px 1px 0   1px');

  p_Gener      = makeParagraph('',           c_Text,   -5, '0   1px 0   1px');

  p_Population = makeParagraph('Population', c_Text,   -4, '1px 1px 0   1px');

  p_Popul_R    = makeParagraph('',           c_Cell_R, -3, '0   1px 0   1px');

  p_Popul_P    = makeParagraph('',           c_Cell_P, -2, '0   1px 0   1px');

  p_Popul_S    = makeParagraph('',           c_Cell_S, -1, '0   1px 1px 1px');

}

​

function makeButton(label, color, row, action) {

  let b = createButton(label);

  b.size(buttonWidth, buttonHeight);

  b.position(tableX + buttonMargin, (row - 1) * (buttonHeight + buttonMargin));

  b.style("font-family",      'Verdana');

  b.style('font-size',        '25px');

  b.style('font-style',       'normal');

  b.style('font-weight',      'bold');

  b.style('color',            c_Text);

  b.style('background-color', color);

  b.mousePressed(action);

  return b;

}

​

function createButtons() {

  b_Start = makeButton('START', 'olive',   1, startButton);

  b_Stop  = makeButton('STOP',  'brown',   1, stopButton);

  b_Step  = makeButton('STEP',  'magenta', 2, nextStep);

  b_New   = makeButton('NEW',   'blue',    3, newButton);

}

​

function startButton() {

  loop();

  setButtons();

}

​

function stopButton() {

  noLoop();

  setButtons();

}

​

function nextStep() {

  calcNextTable();

  nextToCurr();

  displayInfo();

  drawArena();

}

​

function newButton() {

  let rnd;

  gener = 0;

  for (let c = 1; c <= col; c++) {

    for (let r = 1; r <= row; r++) {

      rnd = random();

      if      (rnd < 0.33) { currTable[c][r] =  0 } // R

      else if (rnd < 0.67) { currTable[c][r] =  1 } // P

      else                 { currTable[c][r] = 10 } // S

    }

  }

  countPopulation();

  copyEdges();

  drawArena();

  displayInfo();

  setButtons();

}

​

function createTables() {

  for (let c = 0; c <= col + 1; c++) {

    currTable[c]  = [];

    nextTable[c]  = [];

    for (let r = 0; r <= row + 1; r++) {

      currTable[c][r]  = 0;

      nextTable[c][r]  = 0;

    }

  }

}

​

function copyEdges() {

  for (let c = 1; c <= col; c++) {

    currTable[c][0]     = currTable[c][row];

    currTable[c][row+1] = currTable[c][1];

  }

  for (let r = 1; r <= row; r++) {

    currTable[0][r]     = currTable[col][r];

    currTable[col+1][r] = currTable[1][r];

  }

  currTable[0][0]         = currTable[col][row];

  currTable[0][row+1]     = currTable[col][1];

  currTable[col+1][0]     = currTable[1][row];

  currTable[col+1][row+1] = currTable[1][1];

}

​

function setButtons() {

  if (isLooping()) {

    b_Start.hide();

    b_Stop.show();

    b_Step.hide();

    b_New.hide();

  } else {

    b_Start.show();

    b_Stop.hide();

    b_Step.show();

    b_New.show();

  }

}

​

function drawArena() {

  for (let c = 1; c <= col; c++) {

    for (let r = 1; r <= row; r++) {

      if      (currTable[c][r] == 0) { fill(c_Cell_R) }

      else if (currTable[c][r] == 1) { fill(c_Cell_P) }

      else                           { fill(c_Cell_S) }

      rect(colToX(c), rowToY(r), cellSize, cellSize);

    }

  }

}

​

function calcNextTable() {

  let total, n_P, n_S;

  for (let c = 1; c <= col; c++) {

    for (let r = 1; r <= row; r++) {

      nextTable[c][r] = currTable[c][r];

      total = currTable[c-1][r-1] + currTable[c][r-1] + currTable[c+1][r-1]

            + currTable[c-1][r]                       + currTable[c+1][r]

            + currTable[c-1][r+1] + currTable[c][r+1] + currTable[c+1][r+1];

      n_S = int(total / 10);

      n_P = total - 10 * n_S;

      if      (currTable[c][r] == 0) { // Rock

        if (n_P > 2) { nextTable[c][r] =  1 }

      }

      else if (currTable[c][r] == 1) { // Paper

        if (n_S > 2) { nextTable[c][r] = 10 }

      }

      else                           { // Scissors

        if (6 > n_P + n_S) { nextTable[c][r] =  0 }

      }

    }

  }

}

​

function countPopulation() {

  popul_R = 0;

  popul_P = 0;

  popul_S = 0;

  for (let c = 1; c <= col; c++) {

    for (let r = 1; r <= row; r++) {

      if      (currTable[c][r] == 0) { popul_R++ }

      else if (currTable[c][r] == 1) { popul_P++ }

      else                           { popul_S++ }

    }

  }

}

​

function nextToCurr() {

  for (let c = 1; c <= col; c++) {

    for (let r = 1; r <= row; r++) {

      currTable[c][r] = nextTable[c][r];

    }

  }

  countPopulation();

  copyEdges();

  gener++;

}

​

function colToX(c) { return c * cellSize - halfCell }

function rowToY(r) { return r * cellSize - halfCell }

​

function displayInfo() {

  p_Gener.html(gener);

  p_Popul_R.html(nfc(popul_R / area * 100, 2) + ' %');

  p_Popul_P.html(nfc(popul_P / area * 100, 2) + ' %');

  p_Popul_S.html(nfc(popul_S / area * 100, 2) + ' %');

}

​

function keyPressed() {

// SPACE = START / STOP

  if (keyCode === SPACE) {

    if (isLooping())  { stopButton() } else { startButton() }

  }

// ESCAPE = STEP

  if (keyCode === ESCAPE) {

    if (!isLooping()) { nextStep() }

  }

// ENTER = NEW

  if (keyCode === ENTER) {

    if (!isLooping()) { newButton() }

  }

}

​

function draw() {

  if (first) { first = false; return; }

  nextStep();

}

​