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

Question

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

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

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

然后将创建画布并运行 setup 中的所有内容并运行 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>