Weekend adventures in noise

Perlin noise in Gnash

My graphic design skills are poor, a fact all the more frustrating because I have a good enough eye to recognize when something looks bad, but not the aptitude to improve it.

Unlike less restrained people, I haven't inflicted the unreadable crimes of Word Art on my fellow humans since I was a teenager (though as previous work on implementing gradients for the MovieClip drawing API shows, when you have an excuse, playing with garish gradients is still fun!). But along with other design-incompetents, I'm fascinated by adventurous graphics and patterns.

Over the last months I've gradually implemented support for the BitmapData ActionScript class in Gnash. BitmapData objects encapsulate a bitmap. You can load images, capture MovieClips, or start with a blank canvas. It provides features such as flood fill, merging and copying or simple noise.

But for amateur admirers of fancy graphics, it has one function to beat them all: the BitmapData.perlinNoise() function. Ken Perlin created the algorithm in 1982 to generate computer graphics for movies. It creates noise with a natural appearance, so that, if you know what you are doing, you can use it to create textures resembling clouds, nebulae, flames, terrain, and many other amazing patterns. You can find some interesting examples of the algorithm in action on Ken Perlin's site.

For an excellent explanation of how Perlin noise works, see Matt Zucker's FAQ. In summary, the algorithm creates a fixed grid with pseudo-random gradients assigned to each grid point. For each point (x, y) within the bounds of that grid, the noise value is determined by the gradients of the surrounding four grid points. The strength of the effect of each grid gradient (what Zucker terms the "influence") on (x, y) depends on how close (x, y) is to the grid point.

Over the weekend I implemented the Perlin noise function in Gnash, so now you can use Gnash to create the pretty patterns you can see in the screenshot. The SWF is also available. Note, though, that because it's pseudo random, you will get similar but not identical patterns in the Adobe player.

A slightly more realistic usage is this cloud SWF with screenshot, and the same idea but with moving clouds.

And if you're interested in Gnash's BitmapData source code, it's available on Savannah.