{{ message }}

Instantly share code, notes, and snippets.

# banksean/perlin-noise-classical.js

Created Feb 15, 2010
two Perlin noise generators in javascript. The simplex version is about 10% faster (in Chrome at least, haven't tried other browsers)
 // Ported from Stefan Gustavson's java implementation // http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf // Read Stefan's excellent paper for details on how this code works. // // Sean McCullough banksean@gmail.com /** * You can pass in a random number generator object if you like. * It is assumed to have a random() method. */ var SimplexNoise = function(r) { if (r == undefined) r = Math; this.grad3 = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0], [1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1], [0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]]; this.p = []; for (var i=0; i<256; i++) { this.p[i] = Math.floor(r.random()*256); } // To remove the need for index wrapping, double the permutation table length this.perm = []; for(var i=0; i<512; i++) { this.perm[i]=this.p[i & 255]; } // A lookup table to traverse the simplex around a given point in 4D. // Details can be found where this table is used, in the 4D noise method. this.simplex = [ [0,1,2,3],[0,1,3,2],[0,0,0,0],[0,2,3,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,3,0], [0,2,1,3],[0,0,0,0],[0,3,1,2],[0,3,2,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,3,2,0], [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0], [1,2,0,3],[0,0,0,0],[1,3,0,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,3,0,1],[2,3,1,0], [1,0,2,3],[1,0,3,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,3,1],[0,0,0,0],[2,1,3,0], [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0], [2,0,1,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,0,1,2],[3,0,2,1],[0,0,0,0],[3,1,2,0], [2,1,0,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,1,0,2],[0,0,0,0],[3,2,0,1],[3,2,1,0]]; }; SimplexNoise.prototype.dot = function(g, x, y) { return g*x + g*y; }; SimplexNoise.prototype.noise = function(xin, yin) { var n0, n1, n2; // Noise contributions from the three corners // Skew the input space to determine which simplex cell we're in var F2 = 0.5*(Math.sqrt(3.0)-1.0); var s = (xin+yin)*F2; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var G2 = (3.0-Math.sqrt(3.0))/6.0; var t = (i+j)*G2; var X0 = i-t; // Unskew the cell origin back to (x,y) space var Y0 = j-t; var x0 = xin-X0; // The x,y distances from the cell origin var y0 = yin-Y0; // For the 2D case, the simplex shape is an equilateral triangle. // Determine which simplex we are in. var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords if(x0>y0) {i1=1; j1=0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1) else {i1=0; j1=1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1) // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where // c = (3-sqrt(3))/6 var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords var y1 = y0 - j1 + G2; var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords var y2 = y0 - 1.0 + 2.0 * G2; // Work out the hashed gradient indices of the three simplex corners var ii = i & 255; var jj = j & 255; var gi0 = this.perm[ii+this.perm[jj]] % 12; var gi1 = this.perm[ii+i1+this.perm[jj+j1]] % 12; var gi2 = this.perm[ii+1+this.perm[jj+1]] % 12; // Calculate the contribution from the three corners var t0 = 0.5 - x0*x0-y0*y0; if(t0<0) n0 = 0.0; else { t0 *= t0; n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.5 - x1*x1-y1*y1; if(t1<0) n1 = 0.0; else { t1 *= t1; n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1); } var t2 = 0.5 - x2*x2-y2*y2; if(t2<0) n2 = 0.0; else { t2 *= t2; n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 70.0 * (n0 + n1 + n2); }; // 3D simplex noise SimplexNoise.prototype.noise3d = function(xin, yin, zin) { var n0, n1, n2, n3; // Noise contributions from the four corners // Skew the input space to determine which simplex cell we're in var F3 = 1.0/3.0; var s = (xin+yin+zin)*F3; // Very nice and simple skew factor for 3D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var k = Math.floor(zin+s); var G3 = 1.0/6.0; // Very nice and simple unskew factor, too var t = (i+j+k)*G3; var X0 = i-t; // Unskew the cell origin back to (x,y,z) space var Y0 = j-t; var Z0 = k-t; var x0 = xin-X0; // The x,y,z distances from the cell origin var y0 = yin-Y0; var z0 = zin-Z0; // For the 3D case, the simplex shape is a slightly irregular tetrahedron. // Determine which simplex we are in. var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords if(x0>=y0) { if(y0>=z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } // X Y Z order else if(x0>=z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } // X Z Y order else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } // Z X Y order } else { // x0

### caseprince commented Aug 7, 2013

 Thanks for sharing! I found the Classical function to be noticeably faster than the Simplex3D while polling large numbers of points. (Chrome 28.0.1500.95)

### blm81 commented Sep 21, 2013

 yes, thanks for this. I'm using it to generate random numbers to drive a drunk walk function I wrote in javascript for max for live (max/msp in ableton live): https://github.com/blakelymcconnell/m4l_js2liveAPI

### ghost commented May 13, 2014

 Does this have any sort of license? If so, what?

### kaisellgren commented May 18, 2014

 The 3d noise function has a bug. Check line https://gist.github.com/banksean/304522#file-perlin-noise-simplex-js-L156 it calls dot() with x, y, and z arguments, yet the function only deals with x and y, not z. How should it work?

### Edwin-Pratt commented Sep 29, 2020

 This is awesome thanks! I've been trying to understand Perlin Noise for a very long time now, and this is the simplest form of generation that I found! I've been wondering, the `fade` function, `t^3*(t*(t*6.0-15.0)+10.0)`, seems to be the norm, is there any special reason why it is commonly used?

### Kurfunkode commented Dec 1, 2020

 Thanks! I have been using this to create a js random terrain generator

### tayadihm commented Mar 28, 2021

 anyone can help me how can i see the result in html? please. thankyou before