javascript - 在draw()中调用draw()以提高速度

Question

我想知道在draw()中调用draw()是否正确，因为我在JavaScript中使用p5.js创建了一个10 PRINT克隆，灵感来自于:Daniel Shiffman's Coding Challenge: 10 PRINT

我尝试以 80% 的概率从draw() 调用draw() 来提高速度，结果成功了。这是我的实现:

var x = 0, y = 0;
var space = 10;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  background(0);
}

function draw() {
  stroke(255);
  strokeWeight(2);

  if(random() < 0.8) {
    draw();
  }

  if(random() > 0.5) {
    stroke('#F26C4D');
    line(x, y, x + space, y + space);
  }
  else {
    stroke(255);
    line(x, y + space, x + space, y);
  }

  x += space;

  if(x >= width) {
    x = 0;
    y += space;
  }
}

但我不知道这样做是否安全，所以如果有人能建议一种方法来提高其速度(如果这个方法不安全)，那就太好了？

Answer 1

你正在做的事情叫做 recursion 。这适用于这个简单的草图，但您会遇到几个问题:

• 帧速率不统一。如果您开始制作动画，您就会注意到这一点。
• 这有点难以理解，并且在更高级的草图中会变得更加困难。
• 如果您调整概率，则可能会遇到堆栈溢出(错误，而不是本网站)。

更简单的解决方案是使用 frameRate() 函数简单地设置帧速率。

此代码将导致 draw() 函数每秒被调用 80 次，而不是 60 次:

function setup(){
  createCanvas(500, 500);
  frameRate(80);
}

更多信息可以在the reference中找到.

或者，如果您想尝试一下您的方法，您可能会考虑摆脱递归并将绘图代码提取到一个单独的函数中，然后从 draw() 调用该函数:

function draw(){
  myDrawFunction();
  if(random() < .8){
    myDrawFunction();
  }
}

然后您可以执行诸如循环随机次数之类的操作。但老实说，您最好的选择可能是只设置帧速率并让 P5.js 为您完成。