Question

I’ve tried everything and read every single link I can see on the internet regarding Perlin Noise or Simplex Noise and even dissected a few Javascript examples that I see work fine.

But I still get very random looking images… essentially just TV static.

My code is below. I’m using a random number generator so that I can seed a value, but I’ve tried with Math.random as well.

As near as I can tell, the different images generated at the different octaves aren’t interpolating properly, or maybe the way I’m converting from the Noise function to RGB values is wrong (I’ve tried to fix both of these issues…).

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);

})

Answer 1

Try sampling simplexNoise.GenerateSimplexNoise(x * 0.05, y * 0.05, 5, 0.5)
The problem may be that your samples are too far apart. (this would result in apparently random behavior, since the simplex noise might go through more than half a wavelength before you sample it)

REVISION: Updated numbers above…
You may actually need to reduce the samples so that there are 20 in a given wavelength of the simplex noise. The average wavelength of most simplex noise is 1, so 0.05 should do the trick. Also, you may want to test with just one octave at first.