Noise Functions

26 Jan 2021 (updated 6 Aug 2021)

---

§ Perlin Noise

My implementation is based on the Perlin code from "Simplex noise demystified" by Stefan Gustavson and is written with vanilla JavaScript.

The implementation uses a randomly generated permutation table rather than a predefined one. To do this, a 256 element index array is shuffled using the Fisher-Yates shuffle.

const p = [...new Array(256).keys()]
    .map((v, _, a, j = random(255)) => [a[j], a[j] = v][0])

const perm = new Array(512)
    .fill(0)
    .map((_, i) => p[i & 255])

The random(N) function generates a uniformly random integer between 0 and N, inclusive; note not to use the modulo operator on a random integer as that induces a bias and thus does not preserve uniformity.

My implementation of Perlin noise has a max throughput of ~8 million calls a second; which is less than noise.js' 10M/s.

§ Fractional Brownian Motion

Fractional Brownian motion (fBm) is a method to modulate a noise function by superimposing the noise with a number of octaves with increasing frequency and decreasing amplitude.

The Book of Shaders has a good tutorial on how fBm can be used to modulate waves, and its implementation. Another good resource is this article by Inigo Quilez.

§ "Curl" Noise

Notes from "Curl-Noise for Procedural Fluid Flow" by Bridson et al.

Given a potential field $\Psi = \langle \Psi_x, \Psi_y, \Psi_z \rangle$, its curl in $\mathbb{R}^3$ is given by:

$$\vec{v}(x, y, z) = \nabla \times \Psi = \left( \frac{\partial\Psi_z}{\partial y} - \frac{\partial\Psi_y}{\partial z}, \frac{\partial\Psi_x}{\partial z} - \frac{\partial\Psi_z}{\partial x}, \frac{\partial\Psi_y}{\partial x} - \frac{\partial\Psi_x}{\partial y} \right).$$

The resulting curl field $\vec{c}$ is divergence free, i.e.

$$\nabla \cdot \vec{v} = \nabla \cdot (\nabla \times \Psi) = 0.$$

Thus the curl field is incompressible (no sources nor drains). In this demo, we're working with vector fields over $\mathbb{R}^2$, so let $\Psi \triangleq \langle \Psi_x, \Psi_y\rangle$ and define the curl operator in $\mathbb{R}^2$ by

$$\nabla \times \Psi = \frac{\partial \Psi_y}{\partial x} -\frac{\partial \Psi_x}{\partial y}.$$

When $\nabla \times \Psi$ is positive we have anticlockwise rotation, if it is negative then clockwise rotation, otherwise it is irrotational.

§ Considerations

1. The partial derivatives are calculated using finite diference approximations, Bridson recommends a step value of $10^{-4}$ times the domain.
2. The potential field can be generated via Perlin noise, i.e. $\Psi = N$.
3. Adding octaves of varying scales produces fields similar to physical turbulence.
   • See: Kolmogorov turbulence spectrum on how to reduce the speed of small vortices.
4. Ideally, the field should vary with time, possibly by using FlowNoise.

---

§ Process

I ended up combining all three of the aforementioned methods. First, I generate Perlin noise, then modulate the field using Fractional Brownian Motion (fBm), then apply the curl noise method over the Perlin + fBm field.

The fBm parameters were 3 octaves, lacunarity of 2, and gain of 0.5.

The partial derivatives used in the curl noise were computed using finite differencing,

$$f_x(x, y) \approx \frac{f(x + h, y) - f(x - h, y)}{2h},$$

$$f_y(x, y) \approx \frac{f(x, y + k) - f(x, y - k)}{2k},$$

where the constants $h$ and $k$ were $10^{-4}$ times the domain as suggested.

The potential field $\Psi$ is sampled from a 3D Perlin noise $N(x, y, z)$ with the $(x, y)$ components being the 2D position (or screen coordinates) and the $z$ component corresponds to some function of the run-time; taking a 2D slice from the 3D noise.

---

§ Process Visualization

---

§ Demonstrations

The implementation uses web workers are used to offload noise generation from the main thread, however, using compute shaders and WebGL would be a much better approach.

The demos below are rendered in real time with particles randomly sampled on the $xy-$plane and velocities sampled from the corresponding vector field.

§ Perlin Vector Field

§ Curl Noise