我无法在Javascript中生成平滑的单纯形噪声

我已经尝试了一切，阅读了互联网上关于柏林噪声或单纯形噪声的每一个链接，甚至剖析了一些我认为可以正常工作的Javascript示例

但我仍然得到非常随机的图像。。。基本上只是电视静电

我的代码如下。我使用了一个随机数生成器，这样我就可以给一个值设定种子，但我也尝试了Math.random

据我所知，不同倍频程下生成的不同图像插值不正确，或者我从噪波函数转换为RGB值的方式是错误的（我已尝试解决这两个问题…）

if（！this.Prng）{
var Prng=函数（）{
var iMersenne=2147483647；
var rnd=函数（种子）{
if（arguments.length）{
that.seed=参数[0]；
}
that.seed=that.seed*16807%iMersenne；
归还那颗种子；
};
var={
种子：123，
rnd:rnd，
随机：函数（种子）{
if（arguments.length）{
that.seed=参数[0]；
}
返回rnd（）/iMersenne；
}
};
归还；
}();
}
var CSimplexNoise=函数（r）
{
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]];
var p=[]；
对于（i=0；i<256；i++）
p[i]=数学层（r.random（）*256）；
this.perm=新数组（）；
对于（i=0；i<512；i++）
{   
this.perm[i]=p[i&255]；
}
}
CSimplexNoise.prototype.dot=函数（g，x，y）
{
返回g[0]*x+g[1]*y；
}
CSimplexNoise.prototype.GenerateSimplexNoise=函数（x、y、倍频程、持久性）
{
var合计=0；
对于（i=0；iy0）
{
i1=1；
j1=0；
}
其他的
{
i1=0；
j1=1；
}
var x1=x0-i1+G2；
变量y1=y0-j1+G2；
var x2=x0-1+2*G2；
变量y2=y0-1+2*G2；
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；
var t0=0.5-x0*x0-y0*y0；
if（t0<0）
n0=0；
其他的
{
t0*=t0；
n0=t0*t0*this.dot（this.grad3[gi0]，x0，y0）
}
var t1=0.5-x1*x1-y1*y1；
if（t1<0）
n1=0；
其他的
{
t1*=t1；
n1=t1*t1*this.dot（this.grad3[gi1]，x1，y1）；
}
变量t2=0.5-x2*x2-y2*y2；
如果（t2尝试采样simplexNoise。生成simplexNoise（x*0.05，y*0.05，5，0.5）
问题可能是样本之间的距离太远（这会导致明显的随机行为，因为单纯形噪声在采样之前可能会经过超过半个波长）

修订：更新以上数字。。。
实际上，您可能需要减少采样，以便在给定波长的单纯形噪声中有20个。大多数单纯形噪声的平均波长为1，因此0.05应该可以。此外，您可能希望首先只使用一个倍频程进行测试。
我同意，看起来初始频率为1，并且只随每个倍频程而增加，因此如果您采样对于整数，你永远看不到任何相干性。
if (!this.Prng) {
    var Prng = function() {
        var iMersenne = 2147483647;
        var rnd = function(seed) {
            if (arguments.length) {
                that.seed = arguments[0];
            }
            that.seed = that.seed*16807%iMersenne;
            return that.seed;
        };
        var that = {
            seed: 123,
            rnd: rnd,
            random: function(seed) {
                if (arguments.length) {
                    that.seed = arguments[0];
                }
                return rnd()/iMersenne;
            }
        };
        return that;
    }();
}

var CSimplexNoise = function(r)
{
    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]];
    var p = [];
    for(i = 0; i < 256; i++)
        p[i] = Math.floor(r.random()*256);
    this.perm = new Array();
    for(i = 0; i < 512; i++)
    {   
        this.perm[i] = p[i & 255];
    }

}


CSimplexNoise.prototype.dot = function(g,x,y)
{
    return g[0]*x + g[1]*y;
}

CSimplexNoise.prototype.GenerateSimplexNoise = function(x,y,octaves,persistence)
{
    var total = 0;

    for(i=0; i < octaves-1; i++)
    {
        var freq = Math.pow(2,i);
        var amp = Math.pow(persistence,i);

        total += this.InterpolatedNoise(x*freq,y*freq) * amp;
    }

    return total;
}

CSimplexNoise.prototype.InterpolatedNoise = function(x,y)
{
    var xInt = Math.floor(x);
    var xFrac = x - xInt;
    var yInt = Math.floor(y);
    var yFrac = y - yInt;

    var v1 = this.SmoothNoise(xInt,yInt);
    var v2 = this.SmoothNoise(xInt + 1,yInt)
    var v3 = this.SmoothNoise(xInt,yInt+1)
    var v4 = this.SmoothNoise(xInt + 1, yInt + 1);

    var i1 = this.LinearInterpolate(v1,v2,xFrac);
    var i2 = this.LinearInterpolate(v3,v4,xFrac);

    return this.CosineInterpolate(i1,i2,yFrac);
}

CSimplexNoise.prototype.LinearInterpolate = function(a,b,x)
{
    return a*(1-x) + b*x;
}

CSimplexNoise.prototype.CosineInterpolate = function(a,b,x)
{
    var f = (1 - Math.cos(x*Math.PI)) * 0.5;
    return a*(1-f) + b*f;
}

CSimplexNoise.prototype.SmoothNoise = function(x,y)
{
    var corners = (this.Noise(x-1,y-1) + this.Noise(x+1,y-1) + this.Noise(x-1,y+1) + this.Noise(x+1,y+1)) / 16;
    var sides = (this.Noise(x-1,y) + this.Noise(x+1,y) + this.Noise(x,y-1) + this.Noise(x+1,y+1)) / 8;
    var center = this.Noise(x,y) / 4;
    return corners + sides + center;
}

CSimplexNoise.prototype.Noise = function(xin, yin)
{
    var n0, n1, n2;

    var F2 = 0.5*(Math.sqrt(3)-1);
    var s = (xin+yin)*F2;
    var i = Math.floor(xin+s);
    var j = Math.floor(yin+s);

    var G2 = (3-Math.sqrt(3))/6;
    var t = (i+j)*G2;
    var X0 = i-t;
    var Y0 = j-t;
    var x0 = xin-X0;
    var y0 = yin-Y0;

    var i1,j1;
    if(x0 > y0)
    {
        i1 = 1;
        j1 = 0;
    }
    else
    {
        i1 = 0;
        j1 = 1;
    }

    var x1 = x0 - i1 + G2;
    var y1 = y0 - j1 + G2;
    var x2 = x0 - 1 + 2 * G2;
    var y2 = y0 - 1 + 2 * G2;

    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;

    var t0 = 0.5 - x0 * x0 - y0 * y0;
    if(t0 < 0)
        n0 = 0;
    else
    {
        t0 *= t0;
        n0 = t0 * t0 * this.dot(this.grad3[gi0],x0,y0)
    }

    var t1 = 0.5 - x1 * x1 - y1 * y1;
    if(t1 < 0)
        n1 = 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;
    else 
    {
        t2 *= t2;
        n2 = t2 * t2 * this.dot(this.grad3[gi2],x2,y2);
    }

    return 70 * (n0 + n1 + n2);
}



$(document).ready(function(){

    var context = $('#screen')[0].getContext("2d");
    var w = 100;
    var h = 100;
    var data = context.createImageData(w,h);

    var simplexNoise = new CSimplexNoise(Prng);

    for(y = 0; y < h; y++)
    {
        for(x = 0; x < w; x++)
        {
        //  var newVal = ((simplexNoise.GenerateSimplexNoise(x,y,5,0.25) - -1) / (1 - -1)) * (255 - 0);
            var newVal2 = simplexNoise.GenerateSimplexNoise(x,y,5,0.5)
            var newVal = Math.floor(newVal2*256);
            newVal = Math.abs(newVal * 2)-0.5;
            data.data[((h * y) + x) * 4] = newVal;
            data.data[((h * y) + x) * 4+1] = newVal;
            data.data[((h * y) + x) * 4+2] = newVal;
            data.data[((h * y) + x) * 4+3] = 255;

        }
    }

    context.putImageData(data,0,0);

})