Search code examples
javascriptjquerydictionaryperlin-noise

Using perlin noise to make a map?

I have this perlin noise code, which i've got up on a js fiddle:

http://jsfiddle.net/g3760y90/1/

As you can see the produced image is closer to random noise than perlin noise, but why? Shouldn't perlin noise produce it more... distinctive areas of 'mountains' and 'valleys' like so: enter image description here

It would be great if someone could give me some pointers to get a more 'maplike' noise.

Solution

  • You are zoomed out too much change your line to

    var height = PerlinNoise.noise(x/10, y/10, 0.3)

    Note that I'm dividing your x any y by 10 and not multiplying to get something like this:enter image description here

    updated fiddle: http://jsfiddle.net/g3760y90/2/

    Also, the image you have posted seems to have multiple perlin noises added together to create the effect of multiple resolution noise