p5.js 使用变量更改大小

Question

我想知道如何使用无限循环更改 p5 中对象的 size/location。出于某种原因，这不起作用

function setup() {
  createCanvas(400, 400);
}
var size=80

function draw() {
  noFill();
    ellipseMode(CENTER);
    rectMode(CENTER);
  background(220);
  ellipse(40,40,size);
rect(40, 40, size, size);
  
}
test()
function test()
{
  size=size+1
  draw()
  setTimeout(test, 200)
}

我该怎么做？

此外，这是错误消息：

p5.js says: There's an error due to "noFill" not being defined in the current scope (on line 77 in about:srcdoc [about:srcdoc:77:3]).

If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more: https://p5js.org/examples/data-variable-scope.html https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong Did you just try to use p5.js's noFill() function? If so, you may want to move it into your sketch's setup() function.

For more details, see: https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup

Answer 1

您收到错误的原因是因为您在 noFill、ellipse、rectMode... 等定义之前调用 draw() ，这似乎发生在您的 javascript 之后。您可以通过将 test() 替换为 setTimeout(test) 来验证这一点，这不应该有该错误，因为它应该运行定义 p5 函数后的代码。

无论如何，正如 Samathingamajig 所说，您通常不应该自己调用 draw——p5 会自动调用它，默认目标是每秒调用它 60 次。您可以通过删除 draw() 行来修复您的代码。

这是一个工作片段：

function setup() {
  createCanvas(400, 400);
}
var size=80

function draw() {
  noFill();
  ellipseMode(CENTER);
  rectMode(CENTER);
  background(220);
  ellipse(40,40,size);
  rect(40, 40, size, size);
}
test()
function test()
{
  size=size+1
  setTimeout(test, 200)
}

<script src="https://unpkg.com/p5@1.1.9/lib/p5.min.js"></script>

Answer 2

一般在setup函数中会调用rectMode、ellipseMode等函数。您的代码应该如下所示：

function setup() {
  createCanvas(400, 400);
  ellipseMode(CENTER);
  rectMode(CENTER);
}
var size = 80

function draw() {
  background(220);
  rect(40, 40, size, size);
  ellipse(40, 40, size);
  noFill();
}

p5.js 使用变量更改大小

p5.js Changing size using variables

javascript

p5.js