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（）来提高速度

1 个答案: