jQuery Perlin

First, a demo for you to play with. To really get a feel for what is going on, crank the opacity all the way up to 1, and play with the grid spacing.

Perlin noise is "coherent" noise, random noise with a bit of underlying order that gives it a subtle texture. The noise is created by setting up a grid of vectors that push and pull at the points on a surface, creating a collection of self-similar whorls and patterns. Ken Perlin developed this in the late 80's, and it's important enough in computer animation that they gave him an Academy Award for it.

The use in web design should be obvious. Instead of downloading a bunch of poorly-compressed subtly-textured background images, most modern browsers can just download twelve kilobytes of Javascript and do the work themselves. The plugin should also speed up the development process, as design changes become a matter of just tweaking some parameters in Javascript.

This library only works on browsers that support the canvas element, and even then, really large tile sizes will break under IE 9. To handle this, the library can load an optional background image when attempts to render the noise fail.

More advanced applications of Perlin noise involving iterative application of the results, as well as three and four dimensional renderings that can be used to create animated sequences, are left as an exercise to the reader.

I consider myself neither a Javascript expert nor a graphics expert, and I wrote this code specifically to take me just a little bit out of my comfort zone. I have done some dumb canvas tricks, like that Gaussian blur code I have lying around somewhere, but this was still a fun learning experience. Feedback is thoroughly welcome. The algorithm I used was shamelessly cribbed from Matt Zucker's excellent Perlin noise math FAQ, and the idea of a jQuery plugin was directly inspired by Daniel Rapp's Noisy jQuery Plugin. Daniel's Javascript code was, in particular, a pleasure to read.

You can find the code and documentation on github.