// fibonacci sequence visualized

// This sketch demonstrates the workings of:

// Algo.pisano(), Gen.spread()

​

// require libraries from TotalSerialism

const Gen = TotalSerialism.Generative;

const Algo = TotalSerialism.Algorithmic;

​

let amt = 128;

let time = 2;

let speed = 30;

​

let prev = Gen.fill(0, amt); //fill empty array of 0's

let interp = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  fill(255);

}

function draw() {

  background(0);

  translate(width/2, height/2);

  // generate euclidean distribution array

  var pisano = Algo.pisano(floor(time), amt);

  let max = Math.max(...pisano);

​

  // x coordinates en y coordinates

  var posX = Gen.spread(amt, -width/2, width/2);

  // only happens every speed multiple of frames

  if (frameCount % speed == 0){

    interp = 0;

    prev = pisano;

    time += 1;

  }

  for (i in pisano){

    stroke(255);

    strokeWeight(2);

    // linear interpolation between previous and new point

    var len = lerp(prev[i], pisano[i], interp);

    // draw the line from negative height to positive

    line(posX[i], -len, posX[i], len);

  }

  interp = Math.min(1, interp + 2/speed);

}