javascript - p5.j​​s 手动调用setup和draw

Question

我正在使用 p5.js 制作在线游戏，我想手动调用设置，一旦调用设置，我希望 draw() 运行。

例如，如果我点击一个按钮:

<button id="somebutton" onclick="setup()">CLICK ME!!!</button>

然后将创建 Canvas 并运行设置中的所有内容并运行 draw()。

Answer 1

为什么要这样做？

处理需要做很多与调用 setup() 函数相关的事情，因此您几乎没有理由手动调用它。

使用变量

如果您希望在单击按钮之前不开始草图，您应该在 setup() 函数之外单独执行此操作。您可以跟踪一个 boolean 告诉 Processing 是否开始草图，然后在您单击按钮时设置该 boolean。像这样:

var started = false;

function setup(){
   createCanvas(windowWidth, windowHeight);
   noLoop();
}

function draw(){
   if(started){
      //your code here
   }
}

function start(){
   started = true;
   loop();
}

然后在您的 html 中，您将拥有:

<button id="somebutton" onclick="start()">CLICK ME!!!</button>

使用实例模式

你也可以使用 instance mode延迟草图的创建。像这样:

function startSketch(){
   var sketch = function( p ) {

     var x = 100; 
     var y = 100;

     p.setup = function() {
       p.createCanvas(700, 410);
     };

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

   var myp5 = new p5(sketch);
}

然后在您的 html 中，您将拥有:

<button id="somebutton" onclick="startSketch()">CLICK ME!!!</button>