javascript 向新p5示例传递额外参数

hvvq6cgz  于 2023-01-01  发布在  Java
关注(0)|答案(3)|浏览(106)

在示例模式下调用一个新的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的情况下向一个示例传递额外的参数?

voj3qocg

voj3qocg1#

是的,你不能像这样给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示例添加属性,然后将其传递给sketch函数。

1l5u6lss

1l5u6lss2#

总结一下@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);

变量xp5.setup函数中仍然可以访问。
如果在调用new p5(sketch)之前更改x,则将使用新值绘制矩形。

pftdvrlh

pftdvrlh3#

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

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

相关问题