我的p5js对象实例不是'渲染是否正确

Question

我正在使用p5js，使用编码列的代码将一些巴恩斯利-芬代码转换为对象。

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

我的问题是，在我将属性和方法移植到巴恩斯利蕨类植物对象后，蕨类植物无法正确渲染。唯一能渲染的东西有时是茎，但没有一片叶子能渲染。

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

这是p5的草图，所以你可以看到

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

如果你还需要什么，请告诉我！