DEV Community

Add00
Add00

Posted on

Procedural Generation and Noise

Greetings,

For this most recent assignment we were tasked with contributing a larger feature to an open source project. During my time with the previous assignment I worked on a game engine called Litecanvas, inspired engine by libraries like raylib and p5.js/Processing.

Having gotten a better understanding of the engine and it's capabilities, I noticed that it was missing procedural generation. Procedural generation is a technique of creating pseudo-random values that form patterns or textures as apposed to pure randomness. Which looks well random... Honestly, it's easier to see what pseudo-random looks like visually:
Image description

Originally, my plan was to learn the math behind pseudo-random generator known as Perlin noise. Then create my own implementation, as I did with raycasting. However, it turns out that unlike raycasting which is composed of high-school level trigonometry. Perlin noise requires a lot more complicated math then I could understand or have the time to understand.

This led to my second plan addapt a C++ Perlin noise library creatively called PerlinNoise, into JavaScript to work with Litecanvas. So I made an issue asking if the engine author wanted this feature. They said they were fine with me working on this issue, but to look at the p5.js Perlin noise library for assistance.

Which led to the third plan, adapt the existing JS version! This while not being super easy was much better then writing a version from nothing or from a different language. So I began working on the adaptation, figuring out the correct way to interface with the engine was a bit troublesome, but there was many great examples that existed that I followed. Once compete I made a PR.

The PR is still awaiting approval as I only submitted it recently, to ensure the code was properly documented and commented. Through out this process I learned that not everything has to be done from a low level or from scratch. I can still learn a lot by working with code at a high level.

Top comments (0)