在draw()中调用draw()提高速度

Question

我想知道在 draw() 中调用 draw() 是否正确，因为我使用 p5.js 在 JavaScript 中创建了一个 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 为您完成。

在draw()中调用draw()提高速度

Calling draw() in draw() to increase speed

javascript

p5.js