Math.random()

Overview

The Math.random() function returns a random number between 0 and 1, including 0 but not including 1:

Math.random();

The Math.random() function is a method of the Math object, which has a set of functions that other programmers have defined for us to use. Here is a full list of available

Generate a Random Number

In this example, we use the Math.random() function to generate a random number between 0 and 1 and assign it to the variable x. A new random number is generated each time the program is run.

var x = Math.random();

Quick Reference:

Message Log

Scale a Random Number

The Math.random() function only generates random numbers between 0 and 1, but sometimes we need larger random numbers. We can create larger random numbers by multiplying values returned by the Math.random() function by a scale factor.

In this example, we generate random numbers between 0 and 50 by multiplying values returned by the Math.random() function by a scale factor of 50.

var x = 50 * Math.random();

Quick Reference:

Message Log

Challenge 1

Draw a square at a randomly generated position. Use the Math.random() function to generate a random value for the square's x-coordinate between 0 and 180 and a random value for the square's y-coordinate between 0 and 120.

Run your program a few times to make sure the square's position is randomly generated. If your program seems to be working, mark the challenge as complete by selecting "Yes, it looks good".

Quick Reference:

Message Log

Generate a Random Number Within a Range

In this example, we generate random numbers between 40 and 120.

We multiply the values returned by the Math.random() function by a scale factor of 80, which is the difference between 120 and 40. This gives us random numbers between 0 and 80. Then, we add 40 to get random numbers between 40 and 120.

var x = 40 + 80 * Math.random();

Quick Reference:

Message Log

Challenge 2

Draw a rectangle at a randomly generated position with randomly generated dimensions. Use the Math.random() function to generate a random value for the rectangle's x-coordinate between 20 and 160, a random value for the rectangle's y-coordinate between 20 and 60, and random values for the rectangle's width and height between 80 and 240.

Run your program a few times to make sure the rectangle's position and dimensions are randomly generated. Then, if your program seems to be working, mark the challenge as complete by selecting "Yes, it looks good".

Quick Reference:

Message Log

Generate a Random Integer

There are a few ways to generate a random integer.

To generate a random integer between 0 and 9, we can generate a random number between 0 and 9, and then round the result using the Math.round() function. But, if we do that, we will generate only half as many 0's and 9's compared to the other numbers. This is because numbers between 0 and 0.5 will round to 0, but numbers between 0.5 and 1.5 (twice the range) will round to 1.

A better way to generate a random integer between 0 and 9 is to generate a random number between 0 and 10, and then round the result down using the Math.floor() function. This creates an even distribution of random integers, and we will not generate any 10's because 10 * Math.random() is always less than 10 (remember, the Math.random() function returns values between 0 and 1, but not including 1).

var x = Math.floor(10 * Math.random());

Quick Reference:

Message Log

Challenge 3

Fill a rectangle with a randomly generated color. Use the Math.random() and Math.floor() functions to generate random RGB values (integers between 0 and 255) and assign them to three variables, r, g, and b. Those variables are used describe a color assigned to the context.fillStyle property.

Run your program a few times to make sure the rectangle's color is randomly generated. If your program seems to be working, mark the challenge as complete by selecting "Yes, it looks good".

If you need help defining fill colors, visit the fillStyle lesson.

Quick Reference:

Message Log

Access a Random Element in an Array

In this example, we use the Math.random() function to access a random element in an array of New England state names.

var states = ['Connecticut', 'Maine', 'Massachusetts', 'New Hampshire', 'Rhode Island', 'Vermont'];

The elements in an array can be accessed by index. The first element in an array is at index 0 and the second element is at index 1. Since there are six elements in this array, we could generate a random index using Math.floor(6 * Math.random()), which generates a random integer between 0 and 5. The last index of an array with six elements is index 5 because the first index is 0.

However, it is generally not a good idea to assume that an array will always have six elements. Instead of hardcoding the number 6 in our random index generator, we can use the array's length property instead. Because the states array currently has six elements, states.length == 6. But if we add or remove elements later, the length property is automatically updated to reflect the new number. This makes using the array's length property to generate a random index much more robust than hardcoding a fixed number.

var i = Math.floor(states.length * Math.random()); // Generate a random index
var randomStateName = states[i]; // Use the random index to access a random element in the array

Try adding or removing names from the states array. The expression for generating a random index always selects an index in the appropriate range.

Quick Reference:

Message Log

Challenge 4

Use a for loop to generate a random number of rectangles with randomly generated dimensions at randomly generated positions filled with a color randomly accessed from an array.

Assign a randomly generated integer between 4 and 10 to the variable n, which is the number of times the for loop will run.

Assign a randomly generated integer based on the colors.length property to the variable i, which is the index of the element in the colors array we will assign to the context.fillStyle property.

Inside the for loop, assign randomly generated numbers between 0 and 200 to the variables x and y for the position of the rectangle, and randomly generated numbers between 40 and 100 to the variables w and h for the dimensions of the rectangle.

Run your program a few times to make sure the number of rectangles, the color used to fill the rectangles, and each of the rectangle's dimensions and positions are randomly generated. Then, if your program seems to be working, mark the challenge as complete by selecting "Yes, it looks good".

Quick Reference:

Message Log