​

function setup() {

  createCanvas(400, 400);

  // selector for the size of the matrix

  matrixSizeSelectorLabel = createDiv(`matrix size `);

  matrixSizeSelector = createInput(5, "number");

  matrixSizeSelector.parent(matrixSizeSelectorLabel);

  matrixSizeSelectorLabel.position(20, 420);

​

  displayZoomSelectorLabel = createDiv(' Zoom ')

  displayZoomSelector = createSlider(0.1, 5, 1, 0.01);

  displayZoomSelectorLabel.position(20, 450);

  displayZoomSelector.parent(displayZoomSelectorLabel);

  displayMarginSelectorLabel = createDiv('Margin')

  displayMarginSelector = createSlider(1, 50, 25, 1);

  displayMarginSelectorLabel.position(20, 490);

  displayMarginSelector.parent(displayMarginSelectorLabel);

  directionSelector = createSelect();

  directionSelector.position(20, 530);

  directionSelector.option('up');

  directionSelector.option('right');

  directionSelector.option('down');

  directionSelector.option('left');

}

​

function matrixSize() {

  return matrixSizeSelector.value();

}

​

function spiralStep(n) {

  // taken and adapted from here:

  // https://math.stackexchange.com/a/163101

​

  var k = ceil((sqrt(n) - 1) / 2);

  var t = 2 * k + 1;

  m = t ** 2;

  t = t - 1;

  if (n >= m - t) {

    return [k - (m - n), -k];

  } else {

    m = m - t;

  }

  if (n >= m - t) {

    return [-k, -k + (m - n)];

  } else {

    m = m - t;

  }

  if (n >= m - t) {

    return [-k + (m - n), k];

  } else {

    return [k, k - (m - n - t)];

  }

​

​

}

​

// but

function DrawMat2(size) {

  var M = displayMarginSelector.value();

  [x, y] =  [-(size/2)*M, -(size/2)*M];

  push();

  textSize(M*0.54);

  translate(width/2, height/2);

  scale(displayZoomSelector.value());

   deltas = [

    [1, 0, 0],

    [0, 1, 0],

    [-1, 0, -1],

    [0, -1, -2],

  ];

  dir = directionSelector.value();

  n = 1;

  while (n < (size*size)){

        square(x,y,M);

        text(n,x,y);

      n +=1 ;

    }

​

  pop();

}

​

​

​

function draw() {

  background(220);

  text(`${matrixSize()}`, 40, 40);

  DrawMat2(matrixSize());

}

​