使用 p5.js 中的 random() 函数

Question

我正在尝试创建一个代码，其中笑脸在屏幕上随机绘制，并且以随机颜色绘制，应该循环，但我无法弄清楚如何最好地使用 random(( 函数来完成此操作。谁能给我一些指示！我尝试使用变量(绘制函数中的var来调用函数smileyFace，但没有运气！

法典：

function setup() {
createCanvas(400, 400);
background(220);
smileyFace(random(0, 400), random(0, 400));
}
function draw() {
}
function smileyFace(x, y) {
fill(250);
ellipse(x, y, 60, 60);
fill(255);
ellipse(x - 10, y - 10, 10, 10);
ellipse(x + 10, y - 10, 10, 10);
arc(x, y + 5, 30, 25, 0, PI, CHORD);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

[...] 在

一块画布上绘制多个笑脸随机颜色(r，g，b(并随机放置在屏幕上。

只需将调用smileyFace移动到draw函数，然后通过以下方式创建随机颜色

c = color(random(0, 255), random(0, 255), random(0, 255));

请参阅示例：

function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
c = color(random(0, 255), random(0, 255), random(0, 255));
smileyFace(random(0, 400), random(0, 400), c);
}
function smileyFace(x, y, c) {
fill(c);
ellipse(x, y, 60, 60);
fill(255);
ellipse(x - 10, y - 10, 10, 10);
ellipse(x + 10, y - 10, 10, 10);
arc(x, y + 5, 30, 25, 0, PI, CHORD);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 2

p5 中的draw()函数执行多次，因此，如果你想画多个笑脸，你可以将你的smileyFace()方法放在draw()方法中。

要获得随机颜色，您可以将color对象传递给fill(color)方法。若要获取颜色，可以使用接受三个值的color()方法。这些值为r(红色(、g(绿色(和b(蓝色(，并且需要介于 0-255 之间。因此，要获得随机颜色，您可以使用random(0, 255)来获取每个颜色分量(r，g和b(的随机值：

function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
smileyFace(random(0, 400), random(0, 400));
}
function smileyFace(x, y) {
fill(getRandomColour());
ellipse(x, y, 60, 60);

fill(getRandomColour());
ellipse(x - 10, y - 10, 10, 10);
ellipse(x + 10, y - 10, 10, 10);
arc(x, y + 5, 30, 25, 0, PI, CHORD);
}
function getRandomColour() {
const r = random(0, 255);
const g = random(0, 255);
const b = random(0, 255);
return color(r, g, b);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>