〰️ Randomness & Noise

Randomness is used extensively in game development and computer graphics. It is for instance used to generate procedural content, such as terrain or weather, or to create animations and effects. Math.random will give you a random float between 0 and 1. If you want to specify lower and upper bounds more conveniently than doing math over Math.random, or using integers instead of floats, you can use Lodash's random (opens in a new tab), or random (opens in a new tab). Math.random will often get the job done, but you will sometimes need more control over the randomness.

Seedable Pseudo-Randomness

If you want the randomness to be deterministic, you can use a seedable pseudo-random number generator (PRNG). A seed is a value that is used to initialize the generator. If you use the same seed, you will get the same sequence of numbers, which will let you generate the same content every time. Here are some PRNG libraries:

• random14025k/w
• Prando12012k/w2y years
• thi.ng/random145k/w
• Aimless.js80020/w
• alea9044k/w2y years
• seedrandom.js2k2M/w4y years
• random-js6004y years
• Number Generator10600/w1y year
• random-seed90100k/w8y years
• seed-random401M/w10y years

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

Random numbers distributed on 1, 2, 3, or more dimensions are called noise. Using Math.random for this will give you white noise. White noise has its use cases, but it is not very useful for things like generating terrain.

Perlin noise and Simplex noise

If you want to generate random terrain or clouds for instance, you need gradient noise with peaks and valleys. You can use a Perlin noise (see this article (opens in a new tab) for more details). Perlin noise was created by Ken Perlin in 1983. He later on released Simplex noise in 2001, which has some improvements (opens in a new tab) over Perlin noise, but was patented until January 8th 2022. OpenSimplex noise (opens in a new tab) was developed to overcome the patent issue of Simplex noise.

• simplex-noise.js1k20k/w
• fractal-noise5040/w
• tumult40150/w4y years
• open-simplex-noise130200/w2y years

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

In the case of terrain, 2D noise can be used to generate the heightmap of a 3D map but you won't get any cave or any part of the ground with void under it. To get that, you can either use 3D noise, combine multiple noises, use a Marching Cube algorithm (opens in a new tab), or generate an initial terrain and fine-tune it manually. For texturing, you might want to look into texture splatting (opens in a new tab) (Three.js forum thread (opens in a new tab), three-landscape (opens in a new tab), THREE.Terrain (opens in a new tab)).

Note that there are other types of noises (opens in a new tab) such as the Worley noise (opens in a new tab), which can for instance be used for shaders (opens in a new tab).

This SimonDev video (opens in a new tab) illustrates various usages of randomness and noise in computer graphics.