初学者关于p5js print() 函数的问题

Question

我在 GitHub 上看到了一些已关闭的帖子，以及关于随机返回的偶尔未解决的类似问题，但我可以得到一个很好的解释，解释为什么在定义对象的简单 print() 命令上该对象是似乎在循环中打印在控制台上：

我刚刚开始使用 p5js，并且不了解 javascript。所以它可能是命令放置的地方（function setup() 或 function draw()），我仍然不确定为什么它们默认出现在编辑器起始页上，否则我需要指定我希望结果只打印一次（？）。

Answer 1

发生这种情况是因为 draw() 在循环上运行。在幕后， p5js 库正在使用 requestAnimationFrame 调用绘制()。

您可以将 print 语句移至 setup() 函数内，该函数仅在脚本开始时运行一次。

function setup() {
  createCanvas(400, 400);
  c = createVector(0,0);
  print(c.toString());
}

function draw() {
  //print(c.toString());
  background(220);
}

或者，如果您愿意，可以设置条件打印块，如下所示：

var printed = false;
function setup() {
  createCanvas(400, 400);
  c = createVector(0,0);
  //print(c.toString());
}

function draw() {
  if (!printed) {
    print(c.toString());
    printed = true;
  }
  background(220);
}

注意：还可以考虑使用p5.Vector 对象用于更清晰的输出。

如果您需要从 draw() 函数中调用的函数获取输出，您可以应用相同的原则，如下所示：

var printed = false;

function setup(){
  createCanvas(400, 400);
  c = createVector(0,0);
  print(c);
}

function draw() {
  background(220);
}

function beingCalledWithinDraw(){
  if (!printed) {
    print(c);
    printed = true;
  }
}

可运行示例：

var printed = false;

function setup() {
  createCanvas(400, 400);
  c = createVector(0, 0);
  //print(c.toString());
}

function draw() {
  background(220);
  beingCalledWithinDraw();
}

function beingCalledWithinDraw() {
  if (!printed) {
    print(c.toString());
    printed = true;
  }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>