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

Angular 6: Simplify Your Navigation with Step Navigation

Create proper spacing for string formatting within an AngularJS modal

Redirecting asynchronously in Node.js with no use of AJAX

The functionality of uploading files in Dropzone.js is not supported on Windows operating systems

How can I ensure a successful redirect to react-router root path after saving to MongoDB in Express?

Tips for Developing Drag Attribute Directive in Angular 2.0

React Native's fetch function appears to be non-responsive

Guide for displaying retrieved information on a Bootstrap Modal window following data submission in Yii2

The tab indicator in Material-UI fails to update when the back button is clicked

What is the best way to create a new row at a specific index in an ng-repeat loop?

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

What is the best way to send the selected option from a dropdown to a button click function within the controller?

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Show a mpld3 graph in an HTML page using the Django framework

Issue with clicking a button in Selenium using JavaScript for automation

ReactJs Error: Unable to access property value because it is undefined (trying to read '0')

Error in compiled.php on line 7772: Laravel throwing a RuntimeException when sending HTTP requests from Angular

Tips for loading a unique class name on the initial active UI react component

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars