Perlin noise is a type of gradient noise developed by Ken Perlin in 1983 as a result of his frustration with the “machine-like” look of computer graphics at the time. (From Wikipedia)
In general, the function of perlin noise is to make a noise which looks more natural. It is often used in games and visual media such as the generation of terrain and fires.
The realization of perlin noise consists of the following steps:
- Generate a random value and gradient for each integral point.
- For points between the points, use interpolation to generate the value.
- Using ease curve to make the result looks more natural.
var ctx = canvas.getContext('2d');
Instead of the array perlin used in his essay, I generate the value and gradient in a totally random way. This may take more spaces, but the result is better and looks more natural.
Also, I use a recursion way to write the code so it can be extended to any dimension, not only 2D, you can generate a 3D, 4D… perlin noise. Of course, I generate a 2D perlin noise as the example for the limitation of 100 lines.
The original perlin noise looks like below
when we accumulate the original result of perlin noise, which is a fractal, we can see the result below
If using sin to the accumulation result, that will be
This is just what I wrote in the code.
An easy way to make the picture looks like fire is using reflex. You can reflex the black to white color to the color strip showed below.
Many wood texture are generated by perlin noise as well
Of course, when it comes to a 3D perlin noise you can use one dimension as time line, to make the texture changes with time
I have put this page on my friend’s personal blog. You can see it on
A realization of Perlin Noise