const height = 650;

const frameMargin = 50;

​

const xRange = 60;

const yRange = 100;

const zRange = 60;

const scaleOfIntegerX = 8;

const scaleOfIntegerY = 300;

const scaleOfIntegerZ = 2;

​

let x0 = 0.4;

let R = 2;

​

// const stepWidth = 1;

​

const arrayOfZs = [];

// const arrayOfYs = [];

​

​

function setup() {

  createCanvas(width, height);

}

​

function draw() {

  background(0);

  stroke (150)

  // X Axis

  strokeWeight (2)

  line (frameMargin, height - frameMargin, width - frameMargin, height - frameMargin)

  // // unit marks

  // for (let i = 1; i < xRange; i ++) {

  //   line (frameMargin + (i * scaleOfIntegerX), height - frameMargin, frameMargin + (i * scaleOfIntegerX), height - frameMargin + 5)

  // }

  // Y Axis

  line (frameMargin, height - frameMargin, frameMargin, frameMargin)

  // unit marks

  // for (let i = 1; i < yRange + 1; i ++) {

  //   line (frameMargin, height - frameMargin - (i * scaleOfIntegerY), frameMargin - 5, height - frameMargin - (i * scaleOfIntegerY))

  //   }

  // Z Axis

  line (frameMargin, height - frameMargin, frameMargin + zRange * 5, height - frameMargin - zRange * 5)

​

//   // Write coordinates  

  strokeWeight (0)

  fill (255)

  textSize (20)

  // text ("R(x0) = " + R, frameMargin * 1.5, frameMargin * 1.5)

  // text ("x0 = " + x0, frameMargin * 1.5, frameMargin * 2)

  // write Axis values

  textSize (16)

  fill (150)

  text ("x", width - frameMargin - 10, height - frameMargin + 15)

  text ("x + 1", 10, frameMargin + 15)

  // text ("R", 230, 340)

  // Perform functions

  // stroke(255, 255, 255, 100)

  strokeWeight (5)

  populateArrayOfZs (x0, R);

  plotZ ();

  x0 = mouseX / 1000

  R = mouseY / 125 // this is interactive

  // R = 100 * Math.sin(frameCount)

  // R = frameCount / 120 // this one makes it go in time

  // console.log(arrayOfZs)

}

​

// ------------------------------------------------

​

function plotZ () {

  for (let i = zRange - 1; i > -1; i--) {

    plotY (i);

  }

}

​

// ------------------------------------------------

function plotY (serial) {

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

    stroke(0, 255 - (serial * 7), serial * 7)

    point (frameMargin + (i * scaleOfIntegerX) + serial * 5, height - frameMargin - scaleOfIntegerY * arrayOfZs[serial][i] - serial * 5) 

  }

}

​

​

// ------------------------------------------------

function populateArrayOfZs (x0, R) {

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

    arrayOfZs [i] = populateArrayOfYs (x0, R, i);

    // console.log(i)

  }

}

​

// ------------------------------------------------

function populateArrayOfYs (initialValue, R, k) {

  let exportArrayOfYs = [];

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

    if (i === 0 && k === 0) {

         exportArrayOfYs[0] = initialValue; 

      } 

    else if ( i === 0 && k !== 0) {

// >>>>>>>>>>>>>>>>>>>>> this is the line to correct - 3dimensionality will come from here         

         exportArrayOfYs[0] = arrayOfZs[0][1];

      } else {  

      // THE ACTUAL EQUATION

      // xt+1 = R xt (1 - xt)  

        const y = (R + k * 0.03) * exportArrayOfYs [i - 1] * (1 - exportArrayOfYs [i - 1]);

      // -------------------

        exportArrayOfYs[i] = y;   

      }

  }

  return exportArrayOfYs;

}