Question

我使用p5.js库作为我程序的基础，因为它很容易实现javascript的可视化功能，但是我遇到了一些麻烦。

我想在同一个文件中创建多个画布，以便在html页面上显示。我已经尝试了一些方法来做到这一点，并且用this实现它的方法取得了最大的成功。通过“instance mode”有效地分离两个p5草图，然后能够从html文件中的单独div元素引用它们。

这意味着可以满足我的需求。我可以在我的html页面上创建x个实例并将它们分成x个div元素而没有问题。

但是，我的程序的一个不可或缺的功能是，当按下某个键时，它会调用特定于特定画布的函数。使用p5中的keyPressed()函数，我能够实现这一目标。但是，它不能扩展到多个画布。

有效地看来（至少在我的实现中）将此函数放在多个实例中会导致只在第一个实例中调用该函数而忽略其他实例。为了解决这个问题，我想我可以在实例范围之外实现这个keyPressed（）函数，然后让keyPressed（）函数从每个实例调用一个函数来实现我想要的。

这就是我的问题出现的地方，我不知道如何从该实例的本地范围之外引用实例中的函数。这是我想要实现的一些示例代码。我对JavaScript不是很有经验，我们非常感谢任何帮助。

function keyPressed() {
  if(keyCode === [SOME_KEY]) {
    //Call doSomething() from sketch1 and sketch2
  }
}

//Sketch 1
var sketch1 = function( p ) { // p could be any variable name

  p.setup = function() {
    createCanvas(); //etc
  };

  p.doSomething = function() {
    //etc
  }
};
var myp5 = new p5(sketch1, 'c1');

// Sketch Two
var sketch2 = function( p ) { 

  p.setup = function() {
    createCanvas(); //etc
  };

  p.doSomething = function() {
    //etc
  }
};
var myp5 = new p5(sketch2, 'c2');

P5.js中的函数范围

0 个答案: