Math.floor, Math.random, and Jurassic Park

Comment icon Small gray icon for comments Comments

In JavaScript, the Math object is something developers work with a lot. And two methods in particular, Math.floor() and Math.random(), are often utilized together. Let’s take a quick look at both to see how we might use them to create a random text engine.

The Math.random() method generates a number between 0 and 1 that isn’t a whole number (integer) and also isn’t 1. For example, to get a number between 0 and 10, we multiply our answer by 10:

Math.random() * 10;

To get generate a whole number, we apply the Math.floor() method which rounds down to the nearest whole number:

Math.floor(Math.random() * 10);

To get a whole number between 1 and 10, we add 1 to the answer:

Math.floor(Math.random() * 10 + 1);

Now that we have a general idea about how these two methods work in producing random numbers, let’s take it a step further.

Did someone say dinosaurs?

Lorem Ipsum-style generators produce randomized blocks of text with varieties ranging from cupcakes, to bacon, even Hodor. So let’s create one of our own based on quotes from the movie “Jurassic Park”, because who doesn’t like dinosaurs?

First we need to create an array of quotes that will be randomly put together:

let quotes = [
  'You bred raptors?',
  'There\'s no unauthorized breeding in Jurassic Park.',
  'How do you know they\'re all female?',
  // add more quotes...
];

The more quotes we have in our array, the more random the generated text block will be. Now we’ll create a function to randomly select quotes in the array:

function generateIpsum(e) {
  let minCount = 5,
    maxCount = 13,
    ipsum = Math.floor(Math.random() * (maxCount - minCount)) + minCount,
    ret = '';
  
  for (i = 0; i < ipsum; i++) {
    let newIpsum = quotes[Math.floor(Math.random() * (quotes.length - 1))];
    ret += ' ' + newIpsum;
  }
}

As you can see, we’re being a little more creative with the Math methods in looping through the array and determining the size of text block. Now we’ll create a button that will execute this function:

<button onclick="generateIpsum('ipsum');">Hold onto your butts</button>
<div id="ipsum"></div>

And lastly, we’ll add the following to the end of the function to display the block of quotes:

document.getElementById(e).innerHTML = document.getElementById(e).innerHTML + '<p>' + ret.substring(0, ret.length + 1) + '</p>';

See the Pen Jurassic Ipsum Generator in JS by Matt Smith (@AllThingsSmitty) on CodePen.

We’ve really only scratched the surface of Math.floor() and Math.random(). And now you can use them to generate random text, color, emoji 🦄, whatever you want. Have fun.