How to keep randomizing colors in p5.js?-CodePudding

I just started learning p5.js myself and I have a question with randomizing colors. Right now I see that the color will be reset randomly only when I restart the code. But is it possible to make it happen whenever mouse is pressed?

Here is my code:

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>

CodePudding user response：

Rabbid76 is right that you need to overwrite the r, g, b variables if your goal is to persist those values after the mouse is released, but I'd suggest doing it inside the mousePressed global function so that multiple triggers won't occur.

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.4.1/p5.min.js"></script>

CodePudding user response：

You have to create new r, g and b values when the mouse is pressed:

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>