Perlin Noise, you’d almost think it’s a punk rock band name. But it’s not! But it is noise, very elegant noise. I learned about Perlin noise back around 2007, when I was teaching at MAD Tech in Groningen, the Netherlands, as tutor computer programming. I taught art students the basic principles of computer programming with the aid of Processing.
After visiting Ken Perlin’s website at NYU, I noticed all his code snippets are written in Java. I hardly know Java… I have not had any formal education in computer science or programming: I learned programming in practice. I can read Java, but I won’t understand all of it. So let’s port Perlin Noise to JavaScript then…!
Below the Java code by Ken Perlin as found on his website, neatly limited to 80 characters per line.
// JAVA REFERENCE IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.
public final class ImprovedNoise {
static public double noise(double x, double y, double z) {
int X = (int)Math.floor(x) & 255, // FIND UNIT CUBE THAT
Y = (int)Math.floor(y) & 255, // CONTAINS POINT.
Z = (int)Math.floor(z) & 255;
x -= Math.floor(x); // FIND RELATIVE X,Y,Z
y -= Math.floor(y); // OF POINT IN CUBE.
z -= Math.floor(z);
double u = fade(x), // COMPUTE FADE CURVES
v = fade(y), // FOR EACH OF X,Y,Z.
w = fade(z);
int A = p[X ]+Y, AA = p[A]+Z, AB = p[A+1]+Z, // HASH COORDINATES OF
B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z; // THE 8 CUBE CORNERS,
return lerp(w, lerp(v, lerp(u, grad(p[AA ], x , y , z ), // AND ADD
grad(p[BA ], x-1, y , z )), // BLENDED
lerp(u, grad(p[AB ], x , y-1, z ), // RESULTS
grad(p[BB ], x-1, y-1, z ))),// FROM 8
lerp(v, lerp(u, grad(p[AA+1], x , y , z-1 ), // CORNERS
grad(p[BA+1], x-1, y , z-1 )), // OF CUBE
lerp(u, grad(p[AB+1], x , y-1, z-1 ),
grad(p[BB+1], x-1, y-1, z-1 ))));
}
static double fade(double t) { return t * t * t * (t * (t * 6 - 15) + 10); }
static double lerp(double t, double a, double b) { return a + t * (b - a); }
static double grad(int hash, double x, double y, double z) {
int h = hash & 15; // CONVERT LO 4 BITS OF HASH CODE
double u = h<8 ? x : y, // INTO 12 GRADIENT DIRECTIONS.
v = h<4 ? y : h==12||h==14 ? x : z;
return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
}
static final int p[] = new int[512], permutation[] = { 151,160,137,91,90,15,
131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180
};
static { for (int i=0; i < 256 ; i++) p[256+i] = p[i] = permutation[i]; }
}I set out to rework his “Improved Noise reference implementation” as found on https://mrl.cs.nyu.edu/~perlin/noise/ to JavaScript. It didn’t take much effort, it was basically a matter of removing type definitions and change the order of code a bit to fit JavaScript’s flow.
But you might ask: why would you? There’s a decent implementation in P5.js. Well, I consider this an hommage to Ken Perlin. I’ve made many small artistic online sketches making use of Perlin Noise: it’s very natural noise, it isn’t bumpy like Math.random(), it’s smooth. One can use it for the creation of clouds, terrain or the movement of animals.
Perlin Noise, you’d almost think it’s a punk rock band name.
The above are all references to nature. But I’m schooled as an artist so I immediately get ideas about how to adapt Perlin Noise to art. And one of my favourite adaptations I made a couple of years ago is a synthesis of Perlin Noise with the painting “Lozenge Composition with Two Lines” of Piet Mondrian from 1931.
The code for this tiny sketch is based around two principles: a setInterval set to be called in a 30 fps frequency (1000ms / 30), and the Perlin Noise implementation. Each frame the coordinates in the call to the ImprovedNoise.noise(x,y,z) function should be incremented a little to progress the noise and actually see the effect of the smoothness.
Continuous calls like these will result in the same value over and over again: ImprovedNoise.noise(0.1,0,0) will output something like 0.09144000000000001. But when you increment the x-coordinate on each call, you will get different random values, but in randomness relatively close to the former output value:
> ImprovedNoise.noise(0.1,0,0)
0.09144000000000001
> ImprovedNoise.noise(0.1001,0,0)
0.0915156783954012
> ImprovedNoise.noise(0.1002,0,0)
0.0915913135632192
> ImprovedNoise.noise(0.1003,0,0)
0.09166690547589719And yes, there’s already a very good (but old) NPM package covering the different noise variations that Ken Perlin designed, but the below code stays closest to his reference implementation and should as such be seen: a reference implementation in JavaScript (because I can).
// JAVSCRIPT IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.
const p = new Array(512);
const permutation = [
151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234,
75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237,
149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48,
27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105,
92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73,
209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86,
164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38,
147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189,
28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101,
155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232,
178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12,
191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31,
181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254,
138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215,
61, 156, 180,
];
for (let i = 0; i < 256; i++) {
p[256 + i] = p[i] = permutation[i];
}
const fade = (t) => {
return t * t * t * (t * (t * 6 - 15) + 10);
};
const lerp = (t, a, b) => {
return a + t * (b - a);
};
const grad = (hash, x, y, z) => {
const h = hash & 15;
const u = h < 8 ? x : y,
v = h < 4 ? y : h == 12 || h == 14 ? x : z;
return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
};
class ImprovedNoise {
static noise(x, y, z) {
const X = Math.floor(x) & 255,
Y = Math.floor(y) & 255,
Z = Math.floor(z) & 255;
x -= Math.floor(x);
y -= Math.floor(y);
z -= Math.floor(z);
const u = fade(x),
v = fade(y),
w = fade(z);
const A = p[X] + Y,
AA = p[A] + Z,
AB = p[A + 1] + Z,
B = p[X + 1] + Y,
BA = p[B] + Z,
BB = p[B + 1] + Z;
return lerp(
w,
lerp(
v,
lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)),
lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z))
),
lerp(
v,
lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)),
lerp(
u,
grad(p[AB + 1], x, y - 1, z - 1),
grad(p[BB + 1], x - 1, y - 1, z - 1)
)
)
);
}
}