javascript - 我的 p5js 对象实例未正确呈现的原因可能是什么？

Question

我正在使用 p5js 将一些 barnsley fern 代码转换为使用编码火车代码的对象。

我正在尝试通过更改其中一个系数来为其设置动画，但我需要蕨类植物至少首先正确渲染为一个对象。

我的问题是，在我将属性和方法移植到 barnsley fern 对象后，蕨类植物无法正确呈现。唯一呈现有时的是茎，但没有叶子呈现。

我尝试使用函数工厂方法和对象字面量更改绘图函数中的顺序，但我一直得到相同的结果😭

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;
  }
}

Answer 1

您错过了在 nextPoint() 函数中更新 r

this.r = random(1);

https://editor.p5js.org/ghaithalzein05/sketches/_pSAifyr0

如果您还需要什么，请告诉我!