我正在使用p5js将一些Barnsley蕨类代码转换为对象，使用Coding Train的代码。 我试图通过更改其中一个系数来对其进行动画处理，但我需要至少正确地将整个蕨类渲染为对象。 我的问题是，在将属性和方法移植到Barnsley Fern对象中后，蕨类无法正确呈现。有时只有茎干渲染出来，而没有任何叶子。我尝试过更改绘制函数中的顺序，使用函数工厂方法和对象字面量，但结果始终相同。这里是p5sketch，你可以查看。
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;
}
}