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

Question

我正在尝试创建一个代码，其中在屏幕上以随机颜色随机绘制笑脸，应该循环但我无法弄清楚如何最好地使用 random() 函数来完成此操作.任何人都可以给我一些指示！我试过使用变量（draw 函数中的 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

[...] multiple smiley faces drawn on one canvas random colours (r,g,b) and placed at random on screen.

只需将调用 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>

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

Using the random() function in p5.js

javascript

random

processing

p5.js