如何在p5.js中持续随机生成颜色？

Question

我刚开始学习p5.js，对于随机颜色的问题有一个疑问。目前我发现颜色只会在重新启动代码时被随机重置。但是否可以每当鼠标按下时随机更改颜色呢？

这是我的代码：

let r, g, b; 

function setup() {
  createCanvas(400, 400);
  r = random(255);
  g = random(255);
  b = random(255);
}

function draw() {
  if (mouseIsPressed) {
    fill(r,g,b);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

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

- lilililan

Answer 1

当鼠标按下时，您需要创建新的r、g和b值：

let r = 255, g = 255, b = 255; 

function setup() {
    createCanvas(400, 400);
}

function mousePressed() {
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    fill(r, g, b);
    ellipse(mouseX, mouseY, 80, 80);
}

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

- Rabbid76

Answer 2

Rabbid76是正确的，如果你的目标是在鼠标释放后保留这些值，那么你需要覆盖r、g、b变量，但我建议在mousePressed全局函数内部执行，这样就不会发生多个触发事件。

let r;
let g;
let b;

function setup() {
  createCanvas(400, 400);
  randomizeColors();
}

function draw() {
  fill(r, g, b);
  ellipse(mouseX, mouseY, 80, 80);
}

function mousePressed() {
  randomizeColors();
}

function randomizeColors() {
  r = random(255);
  g = random(255);
  b = random(255);
}

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

- ggorlen