Random numbers vs Perlin noise

To better understand how scattered they are across the range, I propose to represent them with a graph, where the X-axis is consecutive draws and the Y-axis is the values of those draws. We drew 200 numbers ranging from 0 to 400:

As you can see, the values are chaotically scattered throughout the numerical range and each previous value is not related in any way to the next.

Random numbers not always are enough

Sometimes there is a situation where we want to have the phenomenon of randomness, but more structured, fluid. A good example is the algorithm for creating terrain in Minecraft. Each new world is created randomly (using seed), but in a way where you can easily distinguish meadows, mountains, oceans, etc. In this case, ordinary random numbers won’t do the job and we need the help of Perlin noise.

Perlin Noise – what is it?

Perlin Noise is an algorithm that, based on a seed, creates a random sequence of numbers that is “smooth”. What does it mean? Each previous number is in the close range of the next number. This makes the chaos disappear. It is best illustrated by the following graphic:

Each dot is randomly generated and each time we introduce a different seed we will see a different graph. Moreover, the algorithm allows us to perform various operations on these pseudo random numbers. We can flatten or sharpen, narrow or widen this graph, so we can get a hillier or flatter result. Additionally, Perlin Noise allows us to create multi-dimensional graphs. Below you can see the difference between regular random numbers and the numbers generated by Perlin Noise. Each pixel had a random value between 0 and 255 that determined its color.

Random numbers

 

Numbers generated by Perlin Noise

In the terrain creation algorithm, we could take darker pixels for mountainous terrain and whiter pixels for plains or oceans.

How could this be used in a mobile app?

One of the most obvious things could be a splash screen or some background that will be moving in an unrepeatable manor. The following example with a few modifications and a change of color could easily serve as such a background:

After adding appropriate colors:

Examples of use

Below I give you a list of great examples of using Perlin noise.

1. Terrain/Worlds Generation:

   • Procedural Landmass Generation (E01: Introduction)

   • Coding Adventure: Marching Cubes

   • [Unity] Procedural Planets (E01 the sphere)

   • Coding Challenge #11: 3D Terrain Generation with Perlin Noise in Processing

2. Different:

   • Coding Challenge #24: Perlin Noise Flow Field

   • Coding Challenge #36: Blobby!

   • Coding Challenge #132: Fluid Simulation

   • Coding Challenge #136.1: Polar Perlin Noise Loops

   • 【Processing】Generative Art using Perlin Noise Part 1 | Nekodigi

3. A bit of theory:

   • I.2: Introduction – Perlin Noise and p5.js Tutorial