我的 p5js 对象实例未正确渲染的原因可能是什么？

发布于 2025-01-11 09:50:23 字数 215 浏览 0 评论 0原文

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

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

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

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

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

分享到QQ

分享到微博