Perlin Noise

Back when I was first getting into procedural generation, I wrote this little demo. It layers multiple sinusoidal waves on top of each other, and the constructive and deconstructive interference patterns makes a nice looking landscape. This is known as procedural generation.

I learned a lot from this project, both about JavaScript and Perilin noise. For future work, I would like to add trees, birds, and maybe even give the user the ability to choose where they go in the world instead of just randomly scrolling. This probably reminds you a lot of games like Minecraft or Terraria, and it is using some very similar algorithms, albeit much simpler.

I had quite a few failed attempts while making this, especially since at the time I was really new to javascript. On more than one occasion, I thought I was done, only to run the code and realize I had a LOT more work to do. Failure isn’t all that bad though, oftentimes failures can be beautiful in their own way. Here are a couple of my favorite failed trial runs.

Here the different sized circles represent different points the algorithm was SUPPOSED to draw lines between… Safe to say it did not do that. It turned out that I wasn’t properly providing the drawing function with the correct points, I was skipping somehow. Even though it failed, it certainly looked like something really complicated, maybe some sort of particle physics simulation or a cryptic language? Either way I eventually corrected that (and several other less interesting bugs) and made it to the final version which you (bugs permitting) should be able to view here.

A natural question might be: what values of waves should we pick to make a nice looking landscape?

Interestingly, the answer is not as obvious as it might seem. It’s obvious we need more than one wave, otherwise we would just get a simple sin wave as a landscape, but which frequencies should we pick? If we pick two values that are too close together, we are likely to get a pretty bad looking beat pattern.

Another issue might be the maximum and minimum heights. Suppose we want to ensure our wavelenghts, when combined, never produce a height above or below a specific value, is there an easy way to check?

Well, we can pretty easily take the derivative of our sin waves, find all the points where the derivative is zero, and then check each one to see if it’s a maximum, a minimum, or neither, but this might be a long process if we had, say, a million waves (though in practice, you would likely never need that many).

At first glance, it seems like we might be able to circumnavigate the whole problem by just adding up all the maximum heights, surely if two waves have different frequencies, at some point their maximums will line up, right?

Actually, no, for example, consider a sin wave with a frequency of 1hz, combined with a sin wave of frequency 2hz. The first wave hits a maximum value of 1 at \(\frac \pi 4\), and every \(2 \pi\) after that. The second wave hits a maximum value of 1 at \(\frac \pi 2\), and every \(4 \pi\) after that. So the two will never actually both be at a maximum value at the same time, this limits the maximum height of the combined waveform.

I’d be interested to know if anyone manages to come up with a single equation that, given two (or more) sin waves, can spit out either the maximum height, or the x coordinates of that maximum height.

Another thing to consider is how long until the landscape repeates itself. This can be found by taking the lowest common multiple of the frequencies. For example, if you pick the frequencies 4hz, 11hz, and 20hz, the lowest common multiple is 220hz, so the waveform would repeate after 220 seconds.

This is all interesting academically, but practically, you can typically pick values at random, check the landscape, and change the values a bit to suit your needs.