I'm using p5js to turn some barnsley fern code into an object using the coding train's code.

I'm trying to animate it by changing one of the coefficients but I need the fern to at least render properly as an object first.

My issue is that the fern doesn't render correctly after I've ported the properties and methods into a barnsley fern object. The only thing that renders sometimes is the stem but none of the leaves do.

I've tried changing the order in the draw function, using a function factory approach and object literals but I keep getting the same result 😭

Here is the p5sketch so you can see

let x = 0;
let y = 0;

let barnFernInst;

function setup() {
  createCanvas(500, 500);
  background(0);
  barnFernInst = new BarnsleyFernObject();
}

function draw() {
  for (let i = 0; i < 100; i++) {
    barnFernInst.drawPoint();
    barnFernInst.nextPoint();
  }

}

class BarnsleyFernObject {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.px = 0;
    this.py = 0;
    this.nextX = 0;
    this.nextY = 0;
    this.r = random(1);
    this.newB2Var = 0.04;
  }
  drawPoint() {
    stroke(255);
  strokeWeight(0.5);
  this.px = map(this.x, -2.182, 2.6558, 50, width /2);
  this.py = map(this.y, 0, 9.9983, height /1.5, 50);
  point(this.px, this.py);
  }
  nextPoint() {
  if (this.r < 0.01) {
    this.nextY = 0.16 * this.y;
    this.nextX = 0;
  } else if (this.r < 0.86) {
    this.nextX = 0.85 * this.x + this.newB2Var * this.y;
    this.nextY = -0.04 * this.x + 0.85 * this.y + 1.6;
  } else if (this.r < 0.93) {
    this.nextX = 0.2 * this.x + -0.26 * this.y;
    this.nextY = 0.23 * this.x + 0.22 * this.y + 1.6;
  } else {
    this.nextX = -0.15 * this.x + 0.28 * this.y;
    this.nextY = 0.26 * this.x + 0.24 * this.y + 0.44;
  }
  this.x = this.nextX;
  this.y = this.nextY;
  }
}