Tips for continuously randomizing colors in p5.js

Question

Tips for continuously randomizing colors in p5.js

I recently began exploring p5.js and I have a query regarding color randomization. Currently, it seems that the color only changes randomly when I restart the code. Is there a way to trigger this randomization every time the mouse is clicked?

Below is the code snippet I am working with:

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>

javascript processing p5.js

Answer 1

Answer №1

To change the color values of r, g, and b when the mouse is clicked, follow these steps:

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

To change the color values of r, g, and b when the mouse is clicked, follow these steps:

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 3

Answer №2

It is true that Rabbid76 suggests overwriting the r, g, b variables to persist their values after releasing the mouse. However, it is recommended to perform this action within the mousePressed global function to prevent multiple triggers from occurring.

let red;
let green;
let blue;

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

function draw() {
  fill(red, green, blue);
  ellipse(mouseX, mouseY, 80, 80);
}

function mousePressed() {
  randomizeColors();
}

function randomizeColors() {
  red = random(255);
  green = random(255);
  blue = random(255);
}

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

Answer 4

It is true that Rabbid76 suggests overwriting the r, g, b variables to persist their values after releasing the mouse. However, it is recommended to perform this action within the mousePressed global function to prevent multiple triggers from occurring.

let red;
let green;
let blue;

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

function draw() {
  fill(red, green, blue);
  ellipse(mouseX, mouseY, 80, 80);
}

function mousePressed() {
  randomizeColors();
}

function randomizeColors() {
  red = random(255);
  green = random(255);
  blue = random(255);
}

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

Tips for continuously randomizing colors in p5.js

Answer №1

Answer №2

Similar questions

Exploring the distinctions between the Decorator and Mediator design patterns when implemented in JavaScript

Tips for retrieving and transforming the date time picker into the server format (toISOString)

Keep your data safe and protected within a Node CLI application

Inquiry about JavaScript Arrow Function syntax issue

Using Vue component with v-model and custom input handler

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

Troubleshooting: jQuery toggle() issue in Firefox 3.0.12

Tips for utilizing a unique JavaScript function with Mongoose's findByIdAndUpdate by incorporating $set:

Finding out which carousel the user is currently engaging with in the Slick Carousel can be accomplished by following these steps

Set up a directory alias for the Grunt connect server

Verify if session is in existence

Adding a character to an AngularJS textbox

Opting for fetch over jQuery's ajax for making successful GET requests to an API

Nextjs: issue with updating state within an interval is not functioning

What is the best way to create router links on the fly in Vue.js?

Issue with Ajax/Json: "An object of type triggers a circular reference error when attempting to retrieve a list."

The error message "TypeError: Router.use() expects a middleware function, but received a [type of function]" is a common occurrence in FeathersJS

I'm attempting to grasp the concept of AngularJS's controllerAs notation

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

How can we show a varying number of textfields based on user selection using hooks and updating values dynamically through onChange events?