〰️ 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:

• Stars
  NPM
  TS
  Maintained
• random

  140

  25k/w

  
  14025k/w
  
• Prando

  120

  12k/w

  
  12012k/w
  
  3 years
• thi.ng/random

  145k/w

  
  N/A145k/w
  
• Aimless.js

  800

  20/w

  
  80020/w
  
• alea

  90

  44k/w

  
  9044k/w
  
  3 years
• seedrandom.js

  2k

  2M/w

  
  2k2M/w
  
  5 years
• random-js

  600

  60k/w

  
  60060k/w
  
  5 years
• Number Generator

  10

  600/w

  
  10600/w
  
  2 years
• random-seed

  90

  100k/w

  
  90100k/w
  
  9 years
• seed-random

  40

  1M/w

  
  401M/w
  
  10 years

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

About these numbers and colors

Some randomness libraries also support fake data generation. For instance, Chance (opens in a new tab), Faker (opens in a new tab), or Casual (opens in a new tab).

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.

• Stars
  NPM
  TS
  Maintained
• simplex-noise.js

  1k

  20k/w

  
  1k20k/w
  
• fractal-noise

  50

  40/w

  
  5040/w
  
• tumult

  40

  150/w

  
  40150/w
  
  4 years
• open-simplex-noise

  130

  200/w

  
  130200/w
  
  3 years
• fast-simplex-noise

  60

  300/w

  

  – Deprecated in favor of open-simplex-noise
  60300/w
  
  7 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.