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

Question

我正在使用p5.js进行在线游戏，我想手动调用setup，一旦调用setup，我想要draw（）运行。

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

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

然后将创建画布并运行安装程序中的所有内容并运行draw（）。

Answer 1

你为什么要这样做？

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

使用变量

如果您想在单击按钮之前不启动草图，则应该与setup()功能分开执行。您可以跟踪告诉Processing是否启动草图的boolean，然后在单击按钮时设置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>