[英]p5.js Changing size using variables
I want to know how to change the size/location of an object in p5 using an infinite loop.我想知道如何使用无限循环更改 p5 中对象的大小/位置。 for some reason, this doesn't work
出于某种原因,这不起作用
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)
}
How do i do it?我该怎么做?
Also, here's the error message:此外,这是错误消息:
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]).
p5.js 说:由于在当前范围内未定义“noFill”而出现错误(在 about:srcdoc [about:srcdoc:77:3] 中的第 77 行)。
If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).
如果您已在代码中定义它,则应检查其范围、拼写和字母大小写(JavaScript 区分大小写)。 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?
更多信息: https : //p5js.org/examples/data-variable-scope.html https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong你刚刚尝试使用 p5 .js 的 noFill() 函数? If so, you may want to move it into your sketch's setup() function.
如果是这样,您可能希望将其移动到草图的 setup() 函数中。
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
有关更多详细信息,请参阅: https : //github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-设置
The reason why you're getting the error is because the you're calling draw()
before noFill
, ellipse
, rectMode
... etc are defined, which seems to happen after your javascript.您收到错误的原因是因为您在
noFill
、 ellipse
、 rectMode
... 等定义之前调用了draw()
,这似乎发生在您的 javascript 之后。 You can verify this by replacing test()
with setTimeout(test)
, which shouldn't have that error because it should run the code after the p5 functions are defined.您可以通过将
test()
替换为setTimeout(test)
来验证这一点,它不应该出现该错误,因为它应该在定义 p5 函数后运行代码。
In any case, as Samathingamajig says, you generally shouldn't call draw
by yourself-- p5 automatically does it, defaulting to aiming to call it 60 times a second.在任何情况下,正如 Samathingamajig 所说,你通常不应该自己调用
draw
p5 会自动执行它,默认目标是每秒调用 60 次。 You can just fix your code by deleting the draw()
line.您可以通过删除
draw()
行来修复您的代码。
Here's a working snippet:这是一个工作片段:
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>
Generally functions like rectMode and ellipseMode are called in the setup function.通常在 setup 函数中调用 rectMode 和 ellipseMode 等函数。 Here is what your code should look like:
您的代码应该如下所示:
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.