Perlin noise with Javascript

In Three.js a version of the Perling noise algorithm is used. They called it improved Noise. The noise-function is used in the terrain landscaps.

The Math.random()-Funktion produces other results, that we can't use in dynamic computer graphics.

In our simple example we assume a quite small and simple landscape.
For every point in the landscape we have to calcualte a third value the height.

It starts by gennerating a random number.
var z = Math.random(100);

The noise-function is called with 3 parameters,
var perlin = new ImprovedNoise();
perlin.noise(x,y,z);




69;70;72;73;75;76;77;78;79;80;
69;70;72;73;75;76;77;78;79;80;
69;70;72;73;75;76;78;79;79;80;
69;70;72;73;76;77;78;79;80;80;
69;70;73;74;75;77;78;79;80;80;
69;71;72;74;75;76;77;78;79;80;
68;71;72;73;75;76;77;78;79;79;
68;69;72;73;74;76;77;77;78;77;
68;69;70;73;74;74;75;76;77;77;
68;69;70;71;72;73;75;74;76;76;




   // http://mrl.nyu.edu/~perlin/noise/  
   var ImprovedNoise = function () {  
     var p = [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 (var i=0; i < 256 ; i++) {  
       p[256+i] = p[i];  
     }  
     function fade(t) {  
       return t * t * t * (t * (t * 6 - 15) + 10);  
     }  
     function lerp(t, a, b) {  
       return a + t * (b - a);  
     }  
     function grad(hash, x, y, z) {  
       var h = hash & 15;  
       var 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);  
     }  
     return {  
       noise: function (x, y, z) {  
         var floorX = ~~x, floorY = ~~y, floorZ = ~~z;  
         var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;  
         x -= floorX;  
         y -= floorY;  
         z -= floorZ;  
         var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;  
         var u = fade(x), v = fade(y), w = fade(z);  
         var 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], xMinus1, y, z)),  
             lerp(u, grad(p[AB], x, yMinus1, z),  
                 grad(p[BB], xMinus1, yMinus1, z))),  
             lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),  
                 grad(p[BA+1], xMinus1, y, z-1)),  
                 lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),  
                     grad(p[BB+1], xMinus1, yMinus1, zMinus1))));  
       }  
     }  
   }  
   function generateHeight( width, height ) {  
     var data = Float32Array ? new Float32Array( width * height ) : [];  
     var perlin = new ImprovedNoise();  
     var size = width * height;  
     var quality = 2;  
     var z = Math.random() * 100;  
     for ( var i = 0; i < size; i ++ ) {  
       data[ i ] = 0  
     }  
     for ( var j = 0; j < 4; j ++ ) {  
       quality = quality * 4;  
       for ( var i = 0; i < size; i ++ ) {  
         var x = i % width;  
         var y = ~~ ( i / width );  
         data[ i ] += Math.floor( Math.abs( perlin.noise( x / quality, y / quality, z ) * 0.5 ) * quality + 10 );  
       }  
     }  
     return data;  
   }  
   var data = generateHeight(10,10);  
   for ( var i = 0; i < 100; i ++ ) {  
     var x = i % 10;  
     var y = ~~ ( i / 10 );  
     document.write(data[i]+";");  
     if (x == 10) {  
       document.writeln("<br>");  
     }  
   }  

Some more text...