Click anywhere on canvas to toggle closed-form solution 

(hide / show). To start out with closed-form solution hidden,

set solnShown on line 27 to false.

​

Note: this project is a quick adaptation of https://editor.p5js.org/highermathnotes/sketches/biOr7wd8_

​

See Sketch Files for classes.

For GIF creation, see github.com/mrchantey/p5.createLoop

​

Occasionally, the Fibonacci sequence won't be produced (e.g.

in the last term shown), due to crowding.

*/

​

let fps = 2; //frame rate (frames per second)

//let gifTime = 5; //duration of GIF in seconds

​

let grid; //grid in which cells live

let population; //population of cells

​

let plot1, plot2; //separate plots for simulation and graph

let win; //graph window (includes origin and scale for axes)

let popCurve; //population curve

​

let popNoise; //sound effect

let solnCurve; //closed form solution curve

let solnShown = true; //determines if closed form solution curve is shown

​

//CUSTOM FUNCTIONS

function soln(n) {

  let phi = (1 + sqrt(5)) / 2;

  let psi = (1 - sqrt(5)) / 2;

  return (phi ** (n + 1) - psi ** (n + 1)) / sqrt(5);

}

​

//PRELOAD, SETUP, DRAW

function preload() {

  soundFormats('wav');

  popNoise = loadSound('popNoise');

}

​

function setup() {

  frameRate(fps);

  createCanvas(720, 420);

  //create plots, graph window, and grid

  plot1 = createGraphics(width / 2, height);

  plot2 = createGraphics(width / 2, height);

  win = createGraphWindow(15, height - 15, width / 24 * fps, 10);

  grid = createGrid(width / 2, height, 30);

  //create population using initial count, grid, and time to maturity

  population = createPopulation(1, grid, 1 / fps);

​

  //create curve from population history,

  //which consists of [time, population count] pairs,

  //in given graphing window

  popCurve = createCurve(population.history, win);

  //create closed-form solution curve

  solnCurve = createCurve([], win);

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

    //i / fps is seconds passed; i is number of time steps

    solnCurve.points.push([i / fps, soln(i)]);

  }

  //create GIF loop

  //createLoop({duration: gifTime, gif: {download: true}});

}

​

function draw() {

  //SIMULATION

  //make plot

  plot1.background(229, 255, 234);

  plot1.fill(232, 51, 232, 160);

  population.draw(plot1);

  //play sound

  if (population.count > 1) {

    popNoise.play();   

  }

  //make label

  plot1.textSize(28);

  plot1.fill(0);

  plot1.text("Population: " + population.count, 10, height - 10);

  //show plot at given canvas position

  image(plot1, 0, 0);

  //GRAPH

  //make window

  plot2.background(51);

  plot2.stroke(255);

  plot2.strokeWeight(1);

  win.axis('horizontal', plot2);

  win.axis('vertical', plot2);

  //make labels

  plot2.noStroke();

  plot2.fill(255);

  plot2.textSize(18);

  plot2.text("Population", 25, 25);

  plot2.text("Time", plot2.width - 50, plot2.height - 20);

  //make solution curve as a discrete sequence, if toggled on

  if (solnShown) {

    plot2.stroke(232, 51, 232);

    plot2.strokeWeight(16);

    solnCurve.draw(plot2);

  }

  //make curve as a discrete sequence

  plot2.stroke(255);

  plot2.strokeWeight(8);

  popCurve.draw(plot2);

  //show plot at given canvas position

  image(plot2, width / 2, 0);

  //UPDATE POPULATION AND CURVE

  if (population.count <= 21) {

    population.update(fps);

    popCurve.points = population.history;

  }

  else {

    noLoop();

  }

}

​

//INTERACTIVITY

function mousePressed() {

    solnShown = !solnShown; //toggle (hide / show) closed form solution  

    loop();

}