p5.js - 将额外参数传递给新的 p5 实例

Question

在实例模式下调用新的 p5 实例时，我需要传入一个额外的参数。

我希望能够做到这一点:

var x = 50;

var sketch = function(p5){

  p5.setup = function(x){
    // Canvas setup etc
    rect(x,40,40,40)
  }
}

new p5(sketch, x)

现在，它显示为 undefined，这让我相信 new p5 只能接受一个参数。有没有一种方法可以让我在不破解 p5 的情况下将额外的参数传递给实例？

Answer 1

是的，您不能像那样向 p5 对象添加随机参数。另请注意，p5 构造函数和 setup() 函数是两个完全不同的事物。您调用构造函数，P5.js 库会为您调用 setup() 函数。

我真的不确定您要做什么。为什么不去掉 x 参数(未定义)并引用顶级 x 变量(50)？

你也许可以做一些有点傻的事情，像这样:

function defineSketch(x){

  return function(sketch){
    sketch.setup = function(){
      // Canvas setup etc
      rect(x,40,40,40)
    }
  }
}

然后你可以这样做:

var mySketch = defineSketch(100);
new p5(mySketch);

虽然这很恶心。

编辑:您也可以这样做:

var s = function( sketch ) {

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.rect(sketch.x, sketch.y, 50, 50);
  };
};

var myp5 = new p5(s);
myp5.x = 75;
myp5.y = 25;

这是有效的，因为 sketch 是您创建的 p5 的实例。因此，您可以将属性添加到 p5 实例，该实例将传递到您的草图函数中。