Learn how to generate random numbers in ProcessingJS using the random() function, and check their values with if conditions.
We've been using our if conditions to check values about the environment, like the user's current mouse position, and respond predictably.
But what if we want unpredictability? What if we want our program to act differently each time it runs?
Randomness to the rescue!
We can generate random numbers and use if and else if conditions to change our program's behavior based on the random values.
For example:
var randNum = random(0, 10);
if (randNum < 5) {
   text("Trick!", 200, 200);
} else {
   text("Treat!", 200, 200);
}
The program outputs "Trick!" half of the time, and "Treat!" the other half.
How it works:
  • The randNum variable is assigned a random number, starting at 0 and including numbers up to 10. Returned values could include 0, 0.2, 3.3, 4, 5.5, 6.9, 8, 9, or 9.99, but not 10 itself.
  • The condition checks if the returned number is less than 5, outputting "Trick!" if so and "Treat!' otherwise.
Sometimes it's easier to deal with whole numbers instead of floating point numbers, so that we can check exact values. Here are a few functions that turn floating point numbers into integers:
  • round(): Rounds a number down to the nearest integer if the decimal portion is lower than .5 and rounds up if the decimal portion is .5 or greater.
  • ceil(): Always rounds a number up to the next integer.
  • floor(): Always rounds a number down to an integer.
Typically we want to generate random numbers that are picked relatively evenly. For example, if we are simulating flipping a coin, then we expect there to be an equal chance of either "Heads" or "Tails".
This code accomplishes that goal:
var randFlip = floor(random(0, 2));
if (randFlip === 0) {
   text("Heads", 200, 200);
} else {
   text("Tails", 200, 200);
}
The variable randFlip will always be either 0 or 1, since it calls floor() on the return value of random(0, 2).
To give you a feel for why that's the case, here's the result of calling floor() on various values from random(0, 2):
random(0, 2)floor(result)
0.00
0.217…0
0.542…0
0.973…0
1.01
1.332…1
1.589…1
1.999…1
The return values from random() are random, so they won't necessarily look as equally distributed as the values in that table. If you run the coin-flipping code just 10 times, you might see a string of all "Heads" or all "Tails". However, if you run it thousands of times and keep count, you'll see "Heads" and "Tails" each about 50% of the time.
As a general rule, when our goal is to obtain a fair and even distribution of integer values, it is best to use floor() with random().
Our goal is to generate random numbers that are picked relatively evenly; if we're generating two possible results, we expect those results to be picked roughly half the time.
That doesn't quite happen if we use ceil(). To show you what happens instead, here's the same table from before, except with ceil():
random(0, 2)ceil(result)
0.00
0.217…1
0.542…1
0.973…1
1.01
1.332…2
1.589…2
1.999…2
Notice there are 3 values total: 0, 1, and 2. The 0 only happens once, if random(0,2) returns exactly 0. That won't happen very often, but if we're making a program that assumes only 2 values will ever happen, then eventually some user will run into a weird bug.
Thus, when we want to generate random whole numbers with the same probabilities, we prefer to use floor() on the results from random().
The random() function is a great way to add a little variety to your programs. However, use it carefully: figure out the range of numbers that you're generating, decide whether you need to round the numbers, and check the values appropriately.
You'll have a chance to try that out yourself in the next project!
Loading