Itâ€™s incredible the number of times youâ€™ll have to use Math.random() (out of all the Math methods that ship outofthebox with JavaScript).
If youâ€™re a creative coder, youâ€™ll need it to make generative art (even though many of the tools of creative coding ship their own flavor of the trusty Math.random()). As a result, itâ€™s probably a great idea to reason about how Math.random() works.
At its very base, Math.random() is designed to do only one thing: generate a number between 0 and 1. I like to think of it as a white noise machine, generating white and black pixels to fill a whole screen. That analogy is powerful when you consider that white noise machines go into the creation of mosaics and even procedurally generated clouds, among other things.
In other words, Math.random() is deceptively simple:
0â‰¤ n <1
//What Math.random generates
Math.random() generates a number between zero and one, but never (or rarely ever) generates one itself.
Extending Math.random()
If we think of 0â‰¤n<1
as an algorithm for the procedural generation of random floating digits, we can then generate numbers not limited to 0 and one. We only need to reduce the skeleton of our desired range to the base format.
Say you want to generate a number between 5 and 15. This is the mental sequence youâ€™ll follow:
 I need a number between 5 and 15.
 This can be represented mathematically as 5â‰¤n<16 (can you guess why we write 16 and not 15?)
 But Math.random() can only think in 1s and 0s. So how to get things in agreement?
 First subtract five from every part of that mathematical model of computation.
 That gives us
5â€“5â‰¤n5<16â€“5
â€¦  â€¦which is
0â‰¤n5<11
 Okay. So we have a zero on one end. But we need a 1, not an 11, on the other end!
 Oh, I know! Letâ€™s divide everything by 11!
0/11â‰¤(n5)/11<11/11
 Thatâ€™s
0â‰¤(n5)/11<1
 Yay!
 But we arenâ€™t done :(
 You see,
(n5)/11
is r. That is, the random numberMath.random()
will generate. What we want to get it the factor weâ€™ll multiply r by to get numbers within the range we want (in this case, 5â€“15). To do this, we have to findn
. r = (n5)/11
 Multiply both sides by 11
n5 = r*11
 Add five to both sides
 n = (r*11) + 5
Letâ€™s take this for a spin, shall we? Letâ€™s write a function called
fiveToFifteen
.
And it works!
But what if you wanted to change the number from five and fifteen to, say 8 and 19? Will you have to do that 18step reasoning we did earlier?
Mercifully not. Instead of thinking in pure numbers (5 and 15), we can think in terms of min
and max
.
0 is min, 1 is max.
So we can start with this basic idea instead:
min â‰¤n<max
If we go through the 18 steps again, we have something like this at step 9:

minminâ‰¤nmin<maxmin
, which gives us0â‰¤nmin<maxmin
 Divide through by (maxmin), and we get:
 0/(maxmin)â‰¤nmin/(maxmin)<(maxmin)/(maxmin)
 0â‰¤nmin/(maxmin)<1
Aha.
We can then run r = (nmin)/maxmin
 Multiply both sides by
(maxmin)
, and we getr * (maxmin) = nmin
 Add min r * (maxmin) + min = n
We can then rewrite our function to adapt to any random number generation need like this:
function anyRandomNumber(min, max){
let r = Math.random();
r*=(maxmin);
r+=min;
console.log(Math.floor(r))
}
anyRandomNumber(69,87)
Thanks to Scrimbaâ€™s math for frontend developers for helping me understand this, and I hope it is a useful mental model for you as well!
This was originally published on my blog
Posted on by:
mogwai
JavaScript enthusiast interested in making screens more interesting  and ultimately, data easier/less painful to parse.
Discussion
Hey, Great article!!
Just a little suggestion tho'
You could add the name of the language to the markdown tag to help format the code. something like
How do you mean? I can't see anything in the block of code you're sharing.
In your article, you added a code block, although it wasn't formatted by dev.to! if you want to make it highlighted with colors and all that good stuff, you should add the name of the programming language right after the three opening backticks used for writing a code block, I tried to demonstrate it in my earlier comment but it was converted to markdown, you could check out this post about it dev.to/hoverbaum/howtoaddcodeh...
Ah, seen. And thanks  just implemented it. It's perfect.