Perlin Noise with P5.JS
I am continuing to work on my new favorite hobby — P5.JS. Today, I look at using a slightly better random number generator — Perlin Noise. In fact, as I was working on this, I found out that Perlin Noise is an invention of Ken Perlin. The technology was used first in one of my favorite movie — Tron.
Note: Due to the really old visuals of Tron, I find it hard to watch. Fortunately, I am a big fan of Tron Legacy, and without Tron, there would be no sequel. So, I love Tron, in the sense that it gave us the more modern, really cool sequel movie, some 30 years later.
Note2: The code used to generate this is available here — https://github.com/Jay-study-nildana/P5JSForStudents/tree/main/PerlinNoisePartZero
So, what is the story with Perlin Noise and why is it so important?
From what I understand, using random numbers is really cool to generate some cool art. For instance, here is what I did with just random numbers, previously.
That looks really cool. A lot of things in life are random. For instance, the movement of leaves and birds and even people. However, using a true random number generator is ‘unnatural’. The solution to this problem is to have a random number that is more ‘natural’ while still being random.
This is the problem that Perlin Noise solves. It gives us random numbers that are more ‘natural’ and hence mimics real life.
Final Note
P5.JS has become like my favorite library amongst all those dozens of JavaScript libraries. The nature of code book has become a life changer for me.
These Perlin visuals were obtained from the introduction chapter alone. I wonder what else is in store for me, in the future chapters.
I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash.
