p5.js 手动调用设置和绘制

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>

p5.js 手动调用设置和绘制

p5.js manually call setup and draw

javascript

html

button

p5.js

使用变量

使用实例模式