If you want to add some unpredictability to your sketch, random() is the perfect function for you! This is especially helpful when you are tired of making decisions and are happy to let computation make some of them for you.

The random() function returns a random value every time it is called. There are a few ways to write this function:

• random() returns a value between 0 and 1.
• random(max) returns a value between 0 and max value, but excluding the max value.
• random(min, max) returns a value between min value and max value, but excluding the max value.
• If the random() function is used inside the draw() loop, the random() function generates a different randomized value every time the draw() function runs.

The image below shows multiple circles appearing in random locations and sizes every time it runs through the draw() function.

The above animation is created using the code snippet below:

let xPos = random(width); // Generate random number between 0 and width
let yPos = random(height); // Generate random number between 0 and height
let size = random(10, 101); // Generate random number between 10 and 100

circle(xpos, ypos, size);

Here, the xPos variable is set to a random value between 0 and canvas width and the yPos variable to a random value between 0 and canvas height. The size variable is set to a random number between 10 and 100. These randomly generated values are used to generate circles at random positions and sizes.

Similar to how we used the random() function to generate random sizes and positions for our ellipses, we can also use the random() function to get a random color value.

Remember that you can use the RGB notation as the color arguments for the fill() function. Refer to the Drawing and Coloring Shapes lesson if you would like to review how to use colors in p5.js.

The code below generates random values between 0 and 255 for the red, green, and blue values. Keep in mind that in order to get a value between 0 and 255, including 255, you need to pass 256 into the random() function since the maximum value is exclusive.

fill(random(256), random(256), random(256)); 

This can also be written as:

fill(random(0, 256), random(0, 256), random(0, 256));

Passing in random values for all three color channels will give you this fun, rainbow color scheme. Rainbows are awesome! But sometimes you may want to have a limited, but still random, color palette. For example, if you want all the ellipses to be within the red spectrum, you can choose to randomize only the red value.

fill(random(256), 0, 0); 

Now, all the ellipses are varying shades of red.