Note: I hacked together some changes very quickly, and it doesn't 

quite do what I want yet. I'll need to get it working and then clean it

up.

*/

​

let cnv;

let nTex;

let fTex;

let sTex; //'s' for shifted

let n;

let rowLength = 8; //number of columns, excluding headers

let nValues = []; //array

let fValues = [];

let sValues = [];

let h = 0; //horizontal animation variable

let v = 0; //vertical animation variable

let step = 0.2; //px moved per frame

​

function fib(n) {

  if (n === 0 || n === 1) {

      return 1;

  }

  else {

    return fib(n-1) + fib(n-2);

  }

}

​

function setup() {

  cnv = createCanvas(600, 400);

  //KaTeX (mathematical typesetting)

  //For background, see:

  //https://discourse.processing.org/t/latex-in-processing/19691/6

  cnv.parent('canvas');

  nTex = createP();

  nTex.parent('canvas');

  nTex.class('tex');

  nTex.style('color', 'rgb(232, 51, 232)'); //magenta

  nTex.position(40, 150);

  fTex = createP();

  fTex.parent('canvas');

  fTex.class('tex');

  fTex.style('color', 'rgb(0, 158, 5)'); //green

  fTex.position(15, 185);

  sTex = createP();

  sTex.parent('canvas');

  sTex.class('tex');

  sTex.style('color', 'rgb(255, 104, 3)'); //orange

  sTex.position(15, 220);

  //create entries, with one extra column (will be shifted)

  for (let i = 0; i < rowLength + 1; i++) {

    nValues.push(createP());

    nValues[i].parent('canvas');

    nValues[i].class('tex');

    nValues[i].style('color', 'rgb(232, 51, 232)');

    nValues[i].position(120 + 40 * i, 150);

    n = i.toString();

    fValues.push(createP());

    fValues[i].parent('canvas');

    fValues[i].class('tex');

    fValues[i].style('color', 'rgb(0, 158, 5)');

    fValues[i].position(120 + 40 * i, 185);

    f = fib(i).toString();

    sValues.push(createP());

    sValues[i].parent('canvas');

    sValues[i].class('tex');

    sValues[i].style('color', 'rgb(255, 104, 3)');

    if (i < rowLength) {

      katex.render(n, nValues[i].elt);

      katex.render(f, fValues[i].elt);

    }

  }

}

​

function draw() {

  background(255);

  for (let i = 0; i < rowLength + 1; i++) {

    sValues[i].position(120 + 40 * i - h, 185 + v);

    katex.render(fib(i).toString(), sValues[i].elt);

  }

  if (h < 39) {

    h += step;

  }

  else if (v < 35) {

    v += step;

  }

  stroke(0);

  strokeWeight(2);

  line(15, 200, 425, 200);

  line(110, 170, 110, 270);

  katex.render('n', nTex.elt);

  katex.render('f(n)', fTex.elt);

  katex.render('f(n+1)', sTex.elt);

}