blocks|key|248733|text|这是我为2D+/+3D+Perlin噪声而结束的代码。请注意，它使用的是RequireJS的AMD模块语法，但如果您不使用AMD加载器，则可以将其去掉。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248734|define(
++++[],
++++function()
++++{
++++++++function+fade(t)
++++++++{
++++++++++++return+t+*+t+*+t+*+(t+*+(t+*+6+-+15)+%2B+10);
++++++++}

++++++++function+lerp(t,+a,+b)
++++++++{
++++++++++++return+a+%2B+t+*+(b+-+a);
++++++++}

++++++++function+grad(hash,+x,+y,+z)
++++++++{
++++++++++++//+Convert+lo+4+bits+of+hash+code+into+12+gradient+directions.
++++++++++++var+h+=+hash+&+15,
++++++++++++++++u+=+h+<+8+?+x+:+y,
++++++++++++++++v+=+h+<+4+?+y+:+h+==+12+%7C%7C+h+==+14+?+x+:+z;
++++++++++++return+((h+&+1)+==+0+?+u+:+-u)+%2B+((h+&+2)+==+0+?+v+:+-v);
++++++++}

++++++++function+scale(n)
++++++++{
++++++++++++return+(1+%2B+n)+/+2;
++++++++}

++++++++var+p+=+new+Array(512);

++++++++var+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+(var+i+=+0;+i+<+256;+i%2B%2B)+{
++++++++++++p[256+%2B+i]+=+p[i]+=+permutation[i];
++++++++}

++++++++return+{
++++++++++++/**+Returns+a+number+between+0+and+1.+*/
++++++++++++noise3d:+function(x,+y,+z)
++++++++++++{
++++++++++++++++//+Find+unit+cube+that+contains+point.
++++++++++++++++var+X+=+Math.floor(x)+&+255,
++++++++++++++++++++Y+=+Math.floor(y)+&+255,
++++++++++++++++++++Z+=+Math.floor(z)+&+255;
++++++++++++++++//+Find+relative+x,y,z+of+point+in+cube.
++++++++++++++++x+-=+Math.floor(x);
++++++++++++++++y+-=+Math.floor(y);
++++++++++++++++z+-=+Math.floor(z);
++++++++++++++++//+Compute+fade+curves+for+each+of+x,y,z.
++++++++++++++++var+u+=+fade(x),
++++++++++++++++++++v+=+fade(y),
++++++++++++++++++++w+=+fade(z);
++++++++++++++++//+Hash+coordinates+of+the+corners.
++++++++++++++++var+A+=+p[X++++]+%2B+Y,+AA+=+p[A]+%2B+Z,+AB+=+p[A+%2B+1]+%2B+Z,
++++++++++++++++++++B+=+p[X+%2B+1]+%2B+Y,+BA+=+p[B]+%2B+Z,+BB+=+p[B+%2B+1]+%2B+Z;

++++++++++++++++//+Add+blended+results+from+8+corners+of+cube.
++++++++++++++++return+scale(
++++++++++++++++++++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+%2B+1],+x,+y,+z+-+1),
++++++++++++++++++++++++++++++++grad(p[BA+%2B+1],+x+-+1,+y,+z+-+1)
++++++++++++++++++++++++++++),
++++++++++++++++++++++++++++lerp(
++++++++++++++++++++++++++++++++u,
++++++++++++++++++++++++++++++++grad(p[AB+%2B+1],+x,+y+-+1,+z+-+1),
++++++++++++++++++++++++++++++++grad(p[BB+%2B+1],+x+-+1,+y+-+1,+z+-+1)
++++++++++++++++++++++++++++)
++++++++++++++++++++++++)
++++++++++++++++++++)
++++++++++++++++);
++++++++++++},

++++++++++++/**+Returns+a+number+between+0+and+1.+*/
++++++++++++noise2d:+function(x,+y)
++++++++++++{
++++++++++++++++//+Find+unit+square+that+contains+point.
++++++++++++++++var+X+=+Math.floor(x)+&+255,
++++++++++++++++++++Y+=+Math.floor(y)+&+255;
++++++++++++++++//+Find+relative+x,y+of+point+in+square.
++++++++++++++++x+-=+Math.floor(x);
++++++++++++++++y+-=+Math.floor(y);
++++++++++++++++//+Compute+fade+curves+for+each+of+x,y.
++++++++++++++++var+u+=+fade(x),
++++++++++++++++++++v+=+fade(y);
++++++++++++++++//+Hash+coordinates+of+the+corners.
++++++++++++++++var+A+=+p[X++++]+%2B+Y,+AA+=+p[A],+AB+=+p[A+%2B+1],
++++++++++++++++++++B+=+p[X+%2B+1]+%2B+Y,+BA+=+p[B],+BB+=+p[B+%2B+1];

++++++++++++++++//+Add+blended+results+from+the+corners.
++++++++++++++++return+scale(
++++++++++++++++++++lerp(
++++++++++++++++++++++++v,
++++++++++++++++++++++++lerp(
++++++++++++++++++++++++++++u,
++++++++++++++++++++++++++++grad(p[AA],+x,+y,+0),
++++++++++++++++++++++++++++grad(p[BA],+x+-+1,+y,+0)
++++++++++++++++++++++++),
++++++++++++++++++++++++lerp(
++++++++++++++++++++++++++++u,
++++++++++++++++++++++++++++grad(p[AB],+x,+y+-+1,+0),
++++++++++++++++++++++++++++grad(p[BB],+x+-+1,+y+-+1,+0)
++++++++++++++++++++++++)
++++++++++++++++++++)
++++++++++++++++);
++++++++++++}
++++++++};
++++}
);|code-block|syntax|javascript|248735|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's what the code I ended up with for 2D / 3D Perlin noise. Note that it uses RequireJS's AMD module syntax, but you can strip that away if you're not using an AMD loader.

<pre><code>define(
 [],
 function()
 {
 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)
 {
 // Convert lo 4 bits of hash code into 12 gradient directions.
 var h = hash &amp; 15,
 u = h &lt; 8 ? x : y,
 v = h &lt; 4 ? y : h == 12 || h == 14 ? x : z;
 return ((h &amp; 1) == 0 ? u : -u) + ((h &amp; 2) == 0 ? v : -v);
 }

 function scale(n)
 {
 return (1 + n) / 2;
 }

 var p = new Array(512);

 var 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 (var i = 0; i &lt; 256; i++) {
 p[256 + i] = p[i] = permutation[i];
 }

 return {
 /** Returns a number between 0 and 1. */
 noise3d: function(x, y, z)
 {
 // Find unit cube that contains point.
 var X = Math.floor(x) &amp; 255,
 Y = Math.floor(y) &amp; 255,
 Z = Math.floor(z) &amp; 255;
 // Find relative x,y,z of point in cube.
 x -= Math.floor(x);
 y -= Math.floor(y);
 z -= Math.floor(z);
 // Compute fade curves for each of x,y,z.
 var u = fade(x),
 v = fade(y),
 w = fade(z);
 // Hash coordinates of the corners.
 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;

 // Add blended results from 8 corners of cube.
 return scale(
 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)
 )
 )
 )
 );
 },

 /** Returns a number between 0 and 1. */
 noise2d: function(x, y)
 {
 // Find unit square that contains point.
 var X = Math.floor(x) &amp; 255,
 Y = Math.floor(y) &amp; 255;
 // Find relative x,y of point in square.
 x -= Math.floor(x);
 y -= Math.floor(y);
 // Compute fade curves for each of x,y.
 var u = fade(x),
 v = fade(y);
 // Hash coordinates of the corners.
 var A = p[X ] + Y, AA = p[A], AB = p[A + 1],
 B = p[X + 1] + Y, BA = p[B], BB = p[B + 1];

 // Add blended results from the corners.
 return scale(
 lerp(
 v,
 lerp(
 u,
 grad(p[AA], x, y, 0),
 grad(p[BA], x - 1, y, 0)
 ),
 lerp(
 u,
 grad(p[AB], x, y - 1, 0),
 grad(p[BB], x - 1, y - 1, 0)
 )
 )
 );
 }
 };
 }
);
</code></pre>

blocks|key|3135198|text|我知道这很古老，但也许它对其他人仍然有用。我已经构建了一个javascript应用程序，可以将Perlin和单工噪声渲染到HTML5画布上，在这里查看它：http://lencinhaus.github.com/canvas-noise|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3135199|该应用程序允许调整噪声计算和渲染中涉及的每个参数，并保存生成的纹理。它还会将参数添加到URL，以便可以共享。例如，this+configuration会生成与您显示的纹理非常相似的纹理。|3135200|希望这能有所帮助！|3135201|entityMap|0|LINK|mutability|MUTABLE|url|http://lencinhaus.github.com/canvas-noise|1|http://lencinhaus.github.com/canvas-noise/#seed=noize&color=greyscale&independent=false&gradientStart=ff0000&gradientEnd=00ff00&noiseFunction=perlin_improved&smoothing=quintic&scale=54&size=256&octaves=1&persistence=0.5&lacunarity=2&octaveFunction=absolute&customOctaveFunction=return%2Bn;&sumFunction=none&customSumFunction=return%2Bn;&sineFrequencyCoeff=1&modularAmplitude=5^0|25|15|0|0|1L|I|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

I know this is pretty old, but maybe it can still be useful for someone else. I've built a javascript app that renders Perlin and Simplex noise to an HTML5 canvas, check it out here: <a href="http://lencinhaus.github.com/canvas-noise" rel="noreferrer">http://lencinhaus.github.com/canvas-noise</a>

The app allows to tweak every parameter involved in noise calculation and rendering and to save the resulting texture. It also adds the parameters to the URL, so that it can be shared.
For example, <a href="http://lencinhaus.github.com/canvas-noise/#seed=noize&amp;color=greyscale&amp;independent=false&amp;gradientStart=ff0000&amp;gradientEnd=00ff00&amp;noiseFunction=perlin_improved&amp;smoothing=quintic&amp;scale=54&amp;size=256&amp;octaves=1&amp;persistence=0.5&amp;lacunarity=2&amp;octaveFunction=absolute&amp;customOctaveFunction=return+n;&amp;sumFunction=none&amp;customSumFunction=return+n;&amp;sineFrequencyCoeff=1&amp;modularAmplitude=5" rel="noreferrer">this configuration</a> produces a texture very similar to the one you showed.

Hope that helps!

blocks|key|247505|text|我想出了这个解决方案，它为我的用例提供了更好的结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247506|http://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html|offset|length|247507|它使用了一个很大的排列矩阵：|247508|var+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
];|code-block|syntax|javascript|247509|将其用作：|247510|pn+=+PerlinNoise()
n+=+pn.noise(+random_x,+random_y,+.8+)|247511|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|21|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

I came up with this solution which gave better results for my use case:

<a href="http://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html" rel="nofollow noreferrer">http://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html</a>

It's using a big permutation matrix:

<pre><code>var 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
];
</code></pre>

Use it as:

<pre><code>pn = PerlinNoise()
n = pn.noise( random_x, random_y, .8 )
</code></pre>

I'm trying to create a perlin / simplex / value noise function in JavaScript that will give results similar to the following:

<img src="https://i.stack.imgur.com/EBqMH.jpg" alt="enter image description here">
(Note: this image has already had a treshold applied. I want it without the treshold.)

I've been looking all over the internet for 2 days now. There are plenty of links explaining noise and a lot of code, but none in JavaScript, and whenever I try to convert it, I get weird results. Here are some of my attemps:

<ul>
<li><a href="http://jsfiddle.net/GZCye/" rel="noreferrer">http://jsfiddle.net/GZCye/</a></li>
<li><a href="http://jsfiddle.net/Lk56f/" rel="noreferrer">http://jsfiddle.net/Lk56f/</a> (<a href="http://freespace.virgin.net/hugo.elias/models/m_perlin.htm" rel="noreferrer">based on this</a>)</li>
<li><a href="http://pastebin.com/nMA40SrL" rel="noreferrer">http://pastebin.com/nMA40SrL</a> (doesn't run in Fiddle for some reason, <a href="http://stephencarmody.wikispaces.com/Simplex+Noise" rel="noreferrer">based on this</a></li>
</ul>

I think part of the problem might stem from the use of the bitwise operators in JavaScript, where it is difficult to enforce the type of a number.

What I'm looking for is an example of working, JavaScript noise (whatever type).

I'd also be willing to grant a bounty for any information pertaining to the parameters that could lead to a pattern similar to the image I posted (before threshold) or any optimization tips since I'll need this to run as fast as possible (in JavaScript nonetheless).

JavaScript simplex / perlin noise

HTML5

我尝试在JavaScript中创建一个perlin / simplex / value噪声函数，它将产生类似于以下结果的结果：​(注意:此图像已经应用了treshold。我想要不带发夹的。)我已经在网上找了两天了。有很多解释噪音和大量代码的链接，但在JavaScript中没有一个，每当我尝试转换它时，我都会得到奇怪的结...

问JavaScript单工/珀林噪声
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript单工/珀林噪声EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript单工/珀林噪声
EN