JavaScript simplex / perlin noise

Question

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

(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:

• http://jsfiddle.net/GZCye/
• http://jsfiddle.net/Lk56f/ (based on this)
• http://pastebin.com/nMA40SrL (doesn't run in Fiddle for some reason, based on this

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

Answer 1

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: http://lencinhaus.github.com/canvas-noise

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, this configuration produces a texture very similar to the one you showed.

Hope that helps!