如何在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>

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>

Answer 2

rabbid76是正确的，您需要覆盖r，g 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>