Search code examples
javascriptnoiseperlin-noise

Porting classic Perlin Noise to JavaScript: Getting periodic pattern. Why? (JsFiddle example)

I try to port classic Perlin Noise (src: http://mrl.nyu.edu/~perlin/doc/oscar.html#noise) to JavaScript - for scientific purposes. I don't know why, but my code generates a periodic pattern instead of a random pattern.

You can find my full code with an example drawn to canvas here (stripped down to one dimension): http://jsfiddle.net/YL77D/

I think the problem can be found within the "noise1" function:

sx = s_curve(rx0);

u = rx0 * g1[ p[ bx0 ] ];
v = rx1 * g1[ p[ bx1 ] ];

return lerp(sx, u, v);

If my x-seed is 10.1, 10.2, 10.3, etc. I think u and v should be the same number (u should be based on 10 and v should be based on 11 - so sx is somewhere between). Am I right? But in my code u and v is allways different.

Any ideas? Thank you very much.

Solution

  • One problem might be the way you use Math.Random:

    p[i] = p[j = Math.floor(Math.random() % B)];

    In javascript Math.Random returns a floating point value between 0 and 1.
    random in C returns an integer value between 0 and RAND_MAX.

    p[i] = p[j = random() % B];