Random Pink Hula
Published in

Random Pink Hula

Perlin Noise with P5.JS

it’s basic perlin noise usage. image on my behance profile.

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.




In this publication I document and narrate my adventures in making digital art. I use everything from P5.JS to Daz 3D to real world photography with Photoshop. I want to mix and match all these things and see where it gets me.

Recommended from Medium

How JavaScript Works (Visually Explained)

Making a Video Search web app using Youtube V3 API.

Array functions in JavaScript

That sort of thing…

JavaScript Frustration

Rewind and Preview

Angular vs. React: The CLI

What I Learned Building a Todo Application With React & Go

Screenshot of my todo application created with React and Go.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Freelance Tutor — Coding, Generative Art and Photoshop. Full Name : Vijayasimha BR

More from Medium

How to Upload Flutter Project on GitHub | Bring Remote Repo Locally | A — Z | 2022

Single-Page Apps: Advantages, Pitfalls, and Best-for Suggestions

3D Modeling 101: Comprehensive Beginners Guide — Wow-How Studio — Video Production, 2D & 3D…

How To Sync A Facetime Camera On A Mac With A PC To Livestream on OBS