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实例添加属性，该属性将传递到草图函数中。

Answer 2

总结@ KevinWorkman的答案，你不能将其他参数传递给new p5()或期望p5.setup有其他参数，但你可以使用closures：

var x = 50;

var sketch = function(p5) {

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

new p5(sketch);

x函数仍然可以访问p5.setup变量。

如果在调用x之前更改new p5(sketch)，则会使用新值绘制矩形。

Answer 3

我有一个类似的问题，我想结合使用React + p5.js 涉及从React UI传递新道具来操纵p5.js变量。就是行不通吗？

当我执行 myp5.x 时，它说：

Property 'x' does not exist on type 'import("/Users/esoh/Desktop/Code/p5_test5.framerfx/node_modules/@types/p5/index.d.ts")'

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

3 个答案: