Perlin Noise Demo

Perlin noise visualized in various ways. All noise is generated randomly, so outputs will change on refresh. Note that PerlinNoiseMachine is ES6, and will only run in browsers that support it, unless transpiled to ES5

1D Perlin Noise

Perlin noise output with only one input variable changing, visualized as a graph. Here, the x axis is the changing input variable, and the y axis is the output of the noise function.

2D Perlin Noise

Perlin noise output with two varying inputs. Each pixel's x and y coordinate are fed into the noise machine to generate the value for that pixel. Brighter pixels are higher return values.

2D RGB Perlin Noise

3 separate 2D perlin noise outputs similar to the above, with the three noise channels being fed into the RGB values of each pixel.

2D HSL Perlin Noise

Same as above, but using HSL colour space instead of RGB.