p5.js 实例模式：无法读取属性未定义的“0”

Question

我在全局模式下有一个完美运行的草图，现在我将它带到另一个实例模式下的文档中，因为它与 3D/WEBGL 草图并排放置。

每当我单击以推送 Pulse() 的新实例时，我都会从 draw() 中的 for() 循环中得到 return 中的 "Cannot read property '0' of undefined"。正如我所说，它在全局模式下完美运行，所以我肯定只是这里的语法错误，但我找不到任何在 p5 实例模式下使用对象的示例。我不知道为什么它不能从数组中读取，或者为什么它不能推送。

在 p5.js 实例模式下推送到对象数组时，我非常不确定语法。我也尝试了 s.pulses.push(new s.Pulse()) 和 s.pulses.s.push(new s.Pulse()) 的变体，但是这些 returned 推送错误。下面的代码似乎在推送，但无法读取数组。

任何帮助都将非常有用，谢谢。

var twoDee = function(s) {
var cnv;
var cnvWidth, cnvHeight;
var pulsesAmount;
var pulses = [];

s.setup = function() {
    s.cnvWidth = s.windowWidth;
    s.cnvHeight = document.getElementById('sketch-wrap-bleed-bottom').offsetHeight;
    s.cnv = s.createCanvas(s.cnvWidth, s.cnvHeight, s.P2D);
    s.cnv.parent("sketch-wrap-bleed-bottom");
    s.pulsesAmount = 0;
}

s.draw = function() {
    s.background(40);
    for (var i = 0; i < s.pulsesAmount; i++) {
        s.pulses[i].move(); // problem here
        s.pulses[i].display();
    }

    s.noFill();
    s.stroke(255);
    s.ellipse(s.mouseX, s.mouseY, 30, 30);
}

s.Pulse = function() {
    this.size = 20;
    this.grow = 0.5;
    this.xPos = s.width/2 + 200;
    this.yPos = s.height/2;
    this.opacity = 255;

    this.move = function() {
        this.size += this.grow;
        this.opacity = map(this.size, 0, 60, 255, 0);
    }

    this.display = function() {
        s.noFill();
        s.strokeWeight(2);
        s.stroke(242, 202, 102, this.opacity);
        s.translate(this.xPos, this.yPos);
        s.ellipse(0, 0, this.size, this.size);
        s.translate(-this.xPos, -this.yPos);
    }
}

s.mousePressed = function() {
    s.pulsesAmount += 1;
    s.pulses = s.push(new s.Pulse());
}

}

Answer 1

您只需要对来自 P5.js 的内容使用 s 变量，例如 mouseX 或 setup() 函数。

对于您声明的内容，例如 pulses 和 pulsesAmount 变量，您不使用 s 变量。所以你的 for 循环应该是这样的：

for (var i = 0; i < pulsesAmount; i++) {
    pulses[i].move();
    pulses[i].display();
}

编辑： 在你解决了那个问题之后，你还有另一个问题。这行没有意义：

pulses = s.push(new Pulse());

请参考 the P5.js reference 以更好地理解 push() 函数的作用。它与数组无关。

您可能会想到 append() 函数，但即便如此，您的语法也不对。您必须将数组连同要添加到它的值一起传递给函数。像这样：

s.append(pulses, new Pulse());

在你修复之后，你仍然会遇到一些其他问题（比如不使用 s 变量来访问 map() 函数），但这应该会让你朝着正确的方向前进.

p5.js 实例模式：无法读取属性未定义的“0”

p5.js Instance Mode: Cannot read property '0' of undefined

processing

push

object

instance

p5.js

p5.js 实例模式：无法读取 属性 未定义的“0”

p5.js Instance Mode: Cannot read property '0' of undefined

processing

push

object

instance

p5.js

p5.js 实例模式：无法读取属性未定义的“0”