let osz = 4;

const backColor = 'black';

const gridColor = 'grey';

const numbColor = 'red';

const goodColor = 'green';

let table = [];

let tableSizeX, tableSizeY, unitX, unitY, unit, shiftX, shiftY;

​

this.focus();

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER);

  textFont('Verdana');

  textAlign(CENTER, CENTER);

  textStyle(BOLD);

  startGame();

}

​

function startGame() {

  unitX = width  / (osz + 2);

  unitY = height / (sor + 2);

  unit = min(unitX, unitY);

  tableSizeX = unit * (osz + 2);

  tableSizeY = unit * (sor + 2);

  shiftX = (width  - tableSizeX) / 2;

  shiftY = (height - tableSizeY) / 2;

  textSize(unit * 0.6);

  createTable();

  drawTable();

}

​

function drawGrid() {

  background(backColor);

  noFill();

  stroke(gridColor);

  strokeWeight(1);

  // vertical lines

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

    line(shiftX + c * unit, shiftY,

         shiftX + c * unit, shiftY + tableSizeY);

  }

  // horizontal lines

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

    line(shiftX,              shiftY + r * unit,

         shiftX + tableSizeX, shiftY + r * unit);

  }

  // arrows

  for (c = 1; c <= osz; c++) {

    text('ʌ', shiftX + (c + 0.5) * unit, shiftY              + unit / 2);

    text('v', shiftX + (c + 0.5) * unit, shiftY + tableSizeY - unit / 2);

  }

  for (r = 1; r <= sor; r++) {

    text('<', shiftX              + unit / 2, shiftY + (r + 0.5) * unit);

    text('>', shiftX + tableSizeX - unit / 2, shiftY + (r + 0.5) * unit);

  }

  // frames

  rect(shiftX + tableSizeX / 2, shiftY + tableSizeY / 2, tableSizeX, tableSizeY, unit);

  strokeWeight(3);

  rect(shiftX + tableSizeX / 2, shiftY + tableSizeY / 2, tableSizeX - 2 * unit, tableSizeY - 2 * unit);

}

​

function createTable () {

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

    table[c] = [];

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

      table[c][r] = (r - 1) * osz + c;

    }

  }

}

​

function drawTable () {

  drawGrid();

  noStroke();

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

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

      if (table[c][r] == (r - 1) * osz + c) { fill(goodColor) }

                                       else { fill(numbColor) }

      text(table[c][r], shiftX + (c + 0.5) * unit, shiftY + (r + 0.5) * unit);

    }

  }

}

​

function XtoCol(x) { return int((x - shiftX) / unit) }

function YtoRow(y) { return int((y - shiftY) / unit) }

​

function mousePressed() {

  let X = mouseX;

  let Y = mouseY;

  let C = XtoCol(X);

  let R = YtoRow(Y);

  if (R == 0 && C > 0 && C < osz + 1) {

    scrollUp(C); drawTable();

  }

  if (R == sor + 1 && C > 0 && C < osz + 1) {

    scrollDown(C); drawTable();

  }

  if (C == 0 && R > 0 && R < sor + 1) {

    scrollLeft(R); drawTable();

  }

  if (C == osz + 1 && R > 0 && R < sor + 1) {

    scrollRight(R); drawTable();

  }

}

​

function keyPressed() {

  if (keyCode === 32) { startGame() }

  if (keyCode === ENTER) { randomize(); drawTable(); }

  if (keyIsDown(SHIFT) && keyIsDown(LEFT_ARROW)) {

    if (osz >  2) { osz--; startGame(); }

  }

  if (keyIsDown(SHIFT) && keyIsDown(RIGHT_ARROW)) {

    if (osz < 10) { osz++; startGame(); }

  }

  if (keyIsDown(SHIFT) && keyIsDown(UP_ARROW)) {

    if (sor >  2) { sor--; startGame(); }

  }

  if (keyIsDown(SHIFT) && keyIsDown(DOWN_ARROW)) {

    if (sor < 10) { sor++; startGame(); }

  }

  if (keyCode === ESCAPE) { sor = 4; osz = 4; startGame(); }

}

​

function randomFromTo(from, to) {

  if (from > to) { return 0 }

  return floor(random(to - from + 1)) + from;

}

​

function randomize() {

  let db = max(sor, osz);

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

    scrollUp(randomFromTo(1, osz));

    scrollRight(randomFromTo(1, sor));

    scrollDown(randomFromTo(1, osz));

    scrollLeft(randomFromTo(1, sor));

  }

}

​

function scrollUp(c) {

  for (r = 1; r <= sor; r++) {

    table[c][r - 1] = table[c][r];

  }

  table[c][sor] = table[c][0];

}

​

function scrollDown(c) {

  for (r = sor; r >= 1; r--) {

    table[c][r + 1] = table[c][r];

  }

  table[c][1] = table[c][sor + 1];

}

​

function scrollLeft(r) {

  for (c = 1; c <= osz; c++) {

    table[c - 1][r] = table[c][r];

  }

  table[osz][r] = table[0][r];

}

​

function scrollRight(r) {

  for (c = osz; c >= 1; c--) {

    table[c + 1][r] = table[c][r];

  }

  table[1][r] = table[osz + 1][r];

}

​

function draw() {

  noLoop();

}