Chris Herring

Perlin Noise can be a great way of adding some sequential random movement to an animation or an effect. Originally used in the used in the 1982 film Tron Perlin Noise is a procedural texture used by 3D Artists ever since to make large textures appear more natural.

Although we’ve not going to start texturing large areas, what we can produce in Flash with Perlin Noise is controlled and sequential randomness. Don’t laugh. The first thing to do is generate a Perlin Noise image with the following line of AS3 code.


var pNoise:BitmapData = new BitmapData( 550, 75);
pNoise.perlinNoise( 100, 80, 9, Math.random()*100, true, true )
addChild(new Bitmap(pNoise));


The above code generates a Perlin Nose image like this.

The next step is to get the pixel colour at 0, 0 on the Perlin Noise image, and convert it into a number. We can slowly move across the Perlin Noise image generating numbers which will form a pattern similar to this 0.62, 0.64, 0.66, 0.7, 0.66, 0.60, 0.58. The numerical pattern changes as the coloured clouds merge into each other, and due to this the pattern is sequential and coloured clouds controls the randomness. Therefore no anomalies are produced.

Below I’ve created a little Flash movie which draws a pixel line based upon the Perlin Noise. I’ve then multiplied this 4 times changing the colour and the result resembles a mountain stage in the Tour De France.

Flash is displayed here

Perlin Noise for controlled and sequential randomness!