将额外参数传递给新的 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 实例，该实例将传递到您的草图函数中。

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 函数中访问。

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

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")'

Answer 4

将数据传递给草图的一种方法是将数据添加到 canvas 包装器元素并在草图函数中读取它。

const sketch = (s) => {
  let x;


  s.setup = () => {
    x = s._userNode.config.x;
  }
}

const element = document.querySelector('#canvas-wrapper');
element.config = {x: 50};
new p5(sketch, element);

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

Passing in extra argument to new p5 instance

p5.js