Perlin noise

Processing visualization

Posted by alohaeee on February 19, 2020

Foreword

I have finally found time to play with p5js library. In short, this library really helps a lot with drawing into html’s canvas. Thank a lot to Coding train challenges made by incredible Daniel Shiffman for exciting videos on this topic.

Perlin noise

Often random generator produces numbers that don’t depend on each other. And it’s quite useful in many cases. But let’s challenge us to procedulrally generate some terrain, for example like in Terraria or Starbound. The main idea is to use random number as height of our ground. Unfortunately, straightforward implementation does not solve the problem:

Of course, we can play a little bit more with this technique, making rules, like how often we must generate new numbers and etc. But this way only makes everything more complicated.

To get more natural result you can use gradient noise instead of pure noise. In p5js this functions simply calls noise(). Perlin noise generates “smooth” sequence of random numbers. Here you can see Perlin noise changing values over time.


As you can see, we’ve got almost what we needed. You also can adjust noise with other math functions or even other noises.

What else?

Perlin noise is widely used in computer graphic and game development. Textures, modeles, animations, height map for 2d and 3d terrarian, shapes of caves, particles. I am sure that the list does not end there. And as always you are free to make your own way to use perlins noise.