Download Simplex.as and test class. The test class also shows the spread and speed of both Perlin (left) and Simplex (right).

- oh but wait -

I just notice the great Toxi (aka Karsten Schmidt) also has taken Stefan Gustavson’s version and improved/modified it a bit in his Toxiclibs. And this one is in 4D!!! (I was wondering why Sean McCullough wasn’t doing anything with the simplex lookup table).
K… let’s see what this one does in as3…

Alrighty… new version here. It’s not much faster but it does have 4D!

Ps: I’ve also changed the first link in this post, old link is this.

…so after some hours of coding, debugging, testing, refactoring playing around I’ve got two nice noise implementations. Apart from the obvious speed increase the comparison is rather striking.

If you’re really interested, the first thing you should read (or skim through) is this pdf. What you don’t see in the example is that the simplex noise is a bit denser, which is probably caused by the triangulating way the noise is calculated. I’ve corrected this in the canvas output by multiplying it by 1.5 (that number is nothing more but a wild guess, it looks ok though).

Also very obvious is the range of the noise. The simplex noise low and high values approach 0 and 1 more often. I’ve run some tests between the two types to find the lowest and highest values with different octave and falloff values. The classical Perlin noise does go near 0 and 1 but it just seems more mediated, or the simplex one is more evenly spread. Altogether, the simplex version seems more chaotic than the classic. So in theory you’d need less octaves for a similar visual effect.

Click here to download the example, and feel free to comment or mail if you have any ideas for improvement.

Well, I guess I’ll go and port the simplex to as3 now.

What started as a simple excersize to put theory to practice has once again spun out of control. Well I’ve just come off three months of programming actionscript 3 so I needed the distraction (frankly I like js better than as). Plus I never really got into the HTML5 canvas thing and I needed to check that out to. And off course those idiots Apple and Adobe (turning into a bad marriage) are making me feel I should focus on HTML5/js a bit more (doesn’t anybody realize HTML5 isn’t even ready yet?).

After a bit of playing I decided to make a good Perlin noise generator in javascript. First I did a quick port from my actionscript class to javascript. But because others had probably preceded me I roamed the web for other implementations. I had to mangle them a bit to get them to work but here they are.

• 

  sjeiti

  url: sjeiti
  authors: Ron Valstar and Mario Klingeman
  speed: 60 ms

• 

  lonelypinkelephants

  url: lonelypinkelephants
  author: Jason LaPorte
  speed: 10 ms

• 

  bankseanClassical:

  url: bankseanClassical:
  author: Sean McCullough
  speed: 33 ms

• 

  bankseanSimplex:

  url: bankseanSimplex:
  authors: Sean McCullough and Stefan Gustavson
  speed: 22 ms

• 

  slimeland:

  url: slimeland:
  author: Slime
  speed: 34 ms

• 

  processingJs:

  url: processingJs:
  author: John Resig
  speed: 270 ms

The first thing you’ll probably notice that these are all only one octave. Because the banksean and slimeland versions did not implement more octaves I set the others to one octave as well (plus my own quick port had weird artifacts dealing with multiple octaves). I also put in a pseudo random number generator into the ones that used Math.random (we do want to seed it).

I’m a bit disapointed by the one from the one by processingJs. Granted: I did have to hack it a bit to get it to work and from the looks of the comments it’s not fully implemented yet. But it’s still very slow and looks a bit squared.

But the curious one is lonelypinkelephants: 10 milliseconds! It’s even worse that that: running for six octaves it is only three milliseconds slower (see image to the left). And only 50 lines of code! What the fuck dude?! Well, actually it’s a very smart cheat. Where others calculate and store random numbers and then interpolate between these before drawing, the lonelypinkelephants version simply makes a dummy canvas, draws the random numbers and resizes the result onto the final canvas. Letting the interpolation occur somewhere in the native drawImage method. Come to think of it, this may be exactly the reason why Flash’s native Perlin noise function is so much faster than the as3 class.

Unfortunately the lonelypinkelephants version is quite useless for a number of reasons. The first being that the drawImage method is implemented differtly in different browsers. I test all my stuff in Chrome, but I ran the test through Safari just now and the lonelypinkelephants noise looks really different! Secondly, I really want to be able to use x and y offset which is kind of tricky to implement in it’s current form. Lastly we do want that extra dimension (which was exactly the reason I did that Java to as3 port some years ago).

I think I’ll fork the bankseanSimplex version with some octaves and falloff to see if its much faster and prettier than my own quick port. I’ll keep you posted.

To run the tests yourself download code here (and sorry for the mess).

– small update –

On the other hand… well see for yourself… I did the test in four browsers:

• Chrome

  

• Firefox

  

• Safari

  

• Opera

  

Isn’t that great?! All of them render differently!!! (yes even Chrome and Firefox). Didn’t I hear something about someone wanting to trade in Flash for HTML5? And look at that (self proclaimed fastest browser) Opera. It looks like it just wraps pixels around the threshold (%). And what’s that first row of pixels doing in the processingJs version?

It looks like I have to do some more figuring out before I decide which noise to use. Or maybe just skip HTML5 altogether and wait for XHTML2.

and

http://android.processing.org/