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.
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
maxvalue, but excluding the
random(min, max)returns a value between
maxvalue, but excluding the
- If the
random()function is used inside the
random()function generates a different randomized value every time the
The image below shows multiple circles appearing in random locations and sizes every time it runs through the
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);
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
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.
Let’s practice using the
random() function to animate the position and color of your ellipses.
draw() function, set the
circleX variable to be a random value between 0 and
Next, set the
circleY variable to be a random value between 0 and
Now, write a
fill() function and set the value to be a random number between 0 and 256.
Since there is only one value passed into the
fill() function, the color will be a value between black (0) and white (255).
At the bottom of your
draw() function, create an ellipse. Pass in the
circleX variable for the x position,
circleY for the y position, and 50 for the width and height.