Sign up ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm looking to generate noise that looks like this:

enter image description hereenter image description here

(images courtesy of Understanding Perlin Noise)

I'm basically looking for noise with lots of small "ripples". The following is undesirable:

enter image description here

Are there any simple ways to do this? I've been looking at perlin and simplex for a week now and I can't seem to ever get it to work in JavaScript, or when I do, I don't have the correct parameters to generate such images, or it is excruciatingly slow.

I understand that the 3 images I posted could probably be achieved by the same algorithm but at a different scale, but I don't need that algorithm. I just need a very simple algorithm to achieve something like in the first image ideally. Maybe some kind of blurring would do the job, but I can't manage to have results.

I'm developing this in JavaScript but any kind of code or even a simple and detailed explanation will work.

share|improve this question
FYI, what you want is clearly Perlin noise. The “undesirable” effect you mention consists of several octaves of Perlin noise added to each other (this is sometimes called fractal noise). Do you really just need one image, or do you want it to change over time? If so, what effect are you after? –  sam hocevar Dec 11 '11 at 2:07
@SamHocevar I want to generate it on the fly. I'm looking to reproduce what is mentionned in this question. –  Xeon06 Dec 11 '11 at 2:40
I found this JS perlin noise implementation and integrated it into a jsFiddle. However, the result is quite different than the perlin noise implementation in flash, which makes me wonder about the implementation details of the perlin-noise generator that comes with flash. –  bummzack Dec 11 '11 at 18:36
@bummzack indeed, it seems the Flash generator generates perfect noise for my purpose. I can't get a decent threshold working with the Fiddle you posted. –  Xeon06 Dec 11 '11 at 20:42
I'm interested in this also, therefore I put a question on stackoverflow. Hopefully we'll get some answers there. –  bummzack Dec 11 '11 at 21:36

4 Answers 4

up vote 11 down vote accepted

While the existing answers provide a good way to achieve what the images in the question show, the comments revealed that the goal is to generate an image as shown below:

perlin noise turbulence

This type of noise is quite different from the noise shown in the images of the question, as it forms close isolated blobs.

Turns out that this kind of noise is called turbulence which (according to this CPU Gems article) is implemented as follows (where noise is your Perlin-noise function returning values from -1..1):

double turbulence(double x, double y, double z, double f) {
    double t = -.5;
    for ( ; f <= W/12 ; f *= 2) // W = Image width in pixels
        t += abs(noise(x,y,z,f) / f);
    return t;

Mashing up this JavaScript Perlin-noise implementation with the turbulence function described above generates noise which is pretty similar to the image above:

turbulence noise

The JavaScript code that was used to generate the image above can be found in this jsFiddle.

share|improve this answer
That is some strange code, the JavaScript version is quite different from the Java version, and the JavaScript version is basically a completely whacked way of writing return Math.abs(this.noise(x,y,z)*2)-.5. –  aaaaaaaaaaaa Dec 16 '11 at 16:39

Your example images look a lot like pink noise. It is generated like this:

  • First, we have some sort of smooth random noise. Usually, this is achieved by calculation pseudo-random values at points with integer coordinates, and the interpolating these values somehow. The result at this stage looks like this:

    enter image description here

  • Next, we take this noise and "squeeze" it, increasing its frequency. The simplest formula for this is n2(x,y)=n1(x*f,y*f). In this way, noise pattern is squeezed f times in both directons. Better noise algorithms also rotate and/or translate noise pattern at this step, in order to break up regularities.

  • Then, this squeezed pattern is multiplied by some value (less than 1) and added to first pattern. In effect, we add small higher-frequency variation on top of low-frequency pattern. The result looks kinda like this:

    enter image description here

  • Steps 2 and 3 may be repeated a number of times, adding finer and finer detail. the net result usually looks just like your example with the red cross. However, notice that we have 3 parameters in our algorithm to play with:

    • Octave count - or, in other words, number of steps in generation. More steps means finer detail in the resulting pattern.
    • Persistence. It's that value that is multiplied in every step. Usually, persistence is between 0 and 1. High persistence values usually produce "noisy" patterns with lots of little detail. Low persistence creates smooth patterns with subtle detail.
    • Lacunarity. It's the "squeeze" coefficient we use every step. Lacunarity works a bit like peristence, but not exactly. Low lacunarity produces smoother patterns, and high lacunarity creates more sharp and high-contrast ones.

Here are some examples:

High persistence: High persistence noise

High lacunarity: High lacunarity noise

Low lacunarity: Low lacunarity noise

Playing with these parameters is not the only thing you can do. One nice technique that can add character to noise patterns is to use perturbation, that is, add some noise to input coordinates of your noise function.

For example, suppose you have some function that generates noise given coordinates and random seed: Noise(x,y, seed). Than you can use something like Noise(x+Noise(x,y,234), y+Noise(x,y,6544), seed) to obtain perturbed value. This can lead to patterns like this (perturbation is applied to circular pattern here, not to noise):


If you want to learn more, I suggest you take a look at libnoise (C++) or CoherentNoise (C#). Unfortunately, I don't know of any Javascript noise-generation library.

share|improve this answer
Thanks a lot for the complete answer! –  Xeon06 Dec 12 '11 at 22:19

Code is commented. Credit goes to Sean McCullough.

// Ported from Stefan Gustavson's java implementation
// Read Stefan's excellent paper for details on how this code works.
// Sean McCullough

* 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],
  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 = [
}; = function(g, x, y) {
return g[0]*x + g[1]*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 *[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 *[gi1], x1, y1);
  var t2 = 0.5 - x2*x2-y2*y2;
  if(t2<0) n2 = 0.0;
  else {
    t2 *= t2;
    n2 = t2 * t2 *[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) {
      { 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<y0
    if(y0<z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } // Z Y X order
    else if(x0<z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } // Y Z X order
    else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } // Y X Z order
  // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
  // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
  // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
  // c = 1/6.
  var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
  var y1 = y0 - j1 + G3;
  var z1 = z0 - k1 + G3;
  var x2 = x0 - i2 + 2.0*G3; // Offsets for third corner in (x,y,z) coords
  var y2 = y0 - j2 + 2.0*G3;
  var z2 = z0 - k2 + 2.0*G3;
  var x3 = x0 - 1.0 + 3.0*G3; // Offsets for last corner in (x,y,z) coords
  var y3 = y0 - 1.0 + 3.0*G3;
  var z3 = z0 - 1.0 + 3.0*G3;
  // Work out the hashed gradient indices of the four simplex corners
  var ii = i & 255;
  var jj = j & 255;
  var kk = k & 255;
  var gi0 = this.perm[ii+this.perm[jj+this.perm[kk]]] % 12;
  var gi1 = this.perm[ii+i1+this.perm[jj+j1+this.perm[kk+k1]]] % 12;
  var gi2 = this.perm[ii+i2+this.perm[jj+j2+this.perm[kk+k2]]] % 12;
  var gi3 = this.perm[ii+1+this.perm[jj+1+this.perm[kk+1]]] % 12;
  // Calculate the contribution from the four corners
  var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
  if(t0<0) n0 = 0.0;
  else {
    t0 *= t0;
    n0 = t0 * t0 *[gi0], x0, y0, z0);
  var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
  if(t1<0) n1 = 0.0;
  else {
    t1 *= t1;
    n1 = t1 * t1 *[gi1], x1, y1, z1);
  var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
  if(t2<0) n2 = 0.0;
  else {
    t2 *= t2;
    n2 = t2 * t2 *[gi2], x2, y2, z2);
  var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
  if(t3<0) n3 = 0.0;
  else {
    t3 *= t3;
    n3 = t3 * t3 *[gi3], x3, y3, z3);
  // Add contributions from each corner to get the final noise value.
  // The result is scaled to stay just inside [-1,1]
  return 32.0*(n0 + n1 + n2 + n3);

Also, if you use a PRNG with that you can easily get easy re-instateable results

  I've wrapped Makoto Matsumoto and Takuji Nishimura's code in a namespace
  so it's better encapsulated. Now you can have multiple random number generators
  and they won't stomp all over eachother's state.

  If you want to use this as a substitute for Math.random(), use the random()
  method like so:

  var m = new MersenneTwister();
  var randomNumber = m.random();

  You can also call the other genrand_{foo}() methods on the instance.

  If you want to use a specific seed in order to get a repeatable random
  sequence, pass an integer into the constructor:

  var m = new MersenneTwister(123);

  and that will always produce the same random sequence.

  Sean McCullough (

   A C-program for MT19937, with initialization improved 2002/1/26.
   Coded by Takuji Nishimura and Makoto Matsumoto.

   Before using, initialize the state by using init_genrand(seed)  
   or init_by_array(init_key, key_length).

   Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji Nishimura,
   All rights reserved.                          

   Redistribution and use in source and binary forms, with or without
   modification, are permitted provided that the following conditions
   are met:

     1. Redistributions of source code must retain the above copyright
        notice, this list of conditions and the following disclaimer.

     2. Redistributions in binary form must reproduce the above copyright
        notice, this list of conditions and the following disclaimer in the
        documentation and/or other materials provided with the distribution.

     3. The names of its contributors may not be used to endorse or promote 
        products derived from this software without specific prior written 


   Any feedback is very welcome.
   email: m-mat @ (remove space)

var MersenneTwister = function(seed) {
  if (seed == undefined) {
    seed = new Date().getTime();
  /* Period parameters */  
  this.N = 624;
  this.M = 397;
  this.MATRIX_A = 0x9908b0df;   /* constant vector a */
  this.UPPER_MASK = 0x80000000; /* most significant w-r bits */
  this.LOWER_MASK = 0x7fffffff; /* least significant r bits */ = new Array(this.N); /* the array for the state vector */
  this.mti=this.N+1; /* mti==N+1 means mt[N] is not initialized */


/* initializes mt[N] with a seed */
MersenneTwister.prototype.init_genrand = function(s) {[0] = s >>> 0;
  for (this.mti=1; this.mti<this.N; this.mti++) {
      var s =[this.mti-1] ^ ([this.mti-1] >>> 30);[this.mti] = (((((s & 0xffff0000) >>> 16) * 1812433253) << 16) + (s & 0x0000ffff) * 1812433253)
  + this.mti;
      /* See Knuth TAOCP Vol2. 3rd Ed. P.106 for multiplier. */
      /* In the previous versions, MSBs of the seed affect   */
      /* only MSBs of the array mt[].                        */
      /* 2002/01/09 modified by Makoto Matsumoto             */[this.mti] >>>= 0;
      /* for >32 bit machines */

/* initialize by an array with array-length */
/* init_key is the array for initializing keys */
/* key_length is its length */
/* slight change for C++, 2004/2/26 */
MersenneTwister.prototype.init_by_array = function(init_key, key_length) {
  var i, j, k;
  i=1; j=0;
  k = (this.N>key_length ? this.N : key_length);
  for (; k; k--) {
    var s =[i-1] ^ ([i-1] >>> 30)[i] = ([i] ^ (((((s & 0xffff0000) >>> 16) * 1664525) << 16) + ((s & 0x0000ffff) * 1664525)))
      + init_key[j] + j; /* non linear */[i] >>>= 0; /* for WORDSIZE > 32 machines */
    i++; j++;
    if (i>=this.N) {[0] =[this.N-1]; i=1; }
    if (j>=key_length) j=0;
  for (k=this.N-1; k; k--) {
    var s =[i-1] ^ ([i-1] >>> 30);[i] = ([i] ^ (((((s & 0xffff0000) >>> 16) * 1566083941) << 16) + (s & 0x0000ffff) * 1566083941))
      - i; /* non linear */[i] >>>= 0; /* for WORDSIZE > 32 machines */
    if (i>=this.N) {[0] =[this.N-1]; i=1; }
  }[0] = 0x80000000; /* MSB is 1; assuring non-zero initial array */ 

/* generates a random number on [0,0xffffffff]-interval */
MersenneTwister.prototype.genrand_int32 = function() {
  var y;
  var mag01 = new Array(0x0, this.MATRIX_A);
  /* mag01[x] = x * MATRIX_A  for x=0,1 */

  if (this.mti >= this.N) { /* generate N words at one time */
    var kk;

    if (this.mti == this.N+1)   /* if init_genrand() has not been called, */
      this.init_genrand(5489); /* a default initial seed is used */

    for (kk=0;kk<this.N-this.M;kk++) {
      y = ([kk]&this.UPPER_MASK)|([kk+1]&this.LOWER_MASK);[kk] =[kk+this.M] ^ (y >>> 1) ^ mag01[y & 0x1];
    for (;kk<this.N-1;kk++) {
      y = ([kk]&this.UPPER_MASK)|([kk+1]&this.LOWER_MASK);[kk] =[kk+(this.M-this.N)] ^ (y >>> 1) ^ mag01[y & 0x1];
    y = ([this.N-1]&this.UPPER_MASK)|([0]&this.LOWER_MASK);[this.N-1] =[this.M-1] ^ (y >>> 1) ^ mag01[y & 0x1];

    this.mti = 0;

  y =[this.mti++];

  /* Tempering */
  y ^= (y >>> 11);
  y ^= (y << 7) & 0x9d2c5680;
  y ^= (y << 15) & 0xefc60000;
  y ^= (y >>> 18);

  return y >>> 0;

/* generates a random number on [0,0x7fffffff]-interval */
MersenneTwister.prototype.genrand_int31 = function() {
  return (this.genrand_int32()>>>1);

/* generates a random number on [0,1]-real-interval */
MersenneTwister.prototype.genrand_real1 = function() {
  return this.genrand_int32()*(1.0/4294967295.0); 
  /* divided by 2^32-1 */ 

/* generates a random number on [0,1)-real-interval */
MersenneTwister.prototype.random = function() {
  return this.genrand_int32()*(1.0/4294967296.0); 
  /* divided by 2^32 */

/* generates a random number on (0,1)-real-interval */
MersenneTwister.prototype.genrand_real3 = function() {
  return (this.genrand_int32() + 0.5)*(1.0/4294967296.0); 
  /* divided by 2^32 */

/* generates a random number on [0,1) with 53-bit resolution*/
MersenneTwister.prototype.genrand_res53 = function() { 
  var a=this.genrand_int32()>>>5, b=this.genrand_int32()>>>6; 

/* These real versions are due to Isaku Wada, 2002/01/09 added */
share|improve this answer

Use pre-generated textures, or put a perlin noise texture generator on a server and query it for perlin noise images.

share|improve this answer
I'm already doing this on the server, and I need the textures to be generated. –  Xeon06 Dec 11 '11 at 5:55
If you are doing this on the server, why the javascript requirement? What other technologies can you use? –  sam hocevar Dec 11 '11 at 10:28
@SamHocevar I'm doing it in JavaScript, on the server. Node.js. –  Xeon06 Dec 11 '11 at 17:00
@Xenon06: if you are after performance, I really think you will need native code; thankfully you can write Node.js extensions in C++. –  sam hocevar Dec 12 '11 at 0:57
@SamHocevar cool, thanks for the link, I'll check it out if my perf is bad –  Xeon06 Dec 12 '11 at 16:01

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.