CodeDevStack

The time I created procedural mountains

February 04, 2020

Last night I was going through my old repositories on github and found this old project of mine.

Apparently, four years ago, I saw an image like this one

Nice hand drawn mountains

and decided I wanted to try and create that same style using JS and SVG. These kind of mountains are used in fantasy maps, like for D&D or the ones from Lord of the rings.

The images generated by the script are not even close to the inspiration image, but I think they are a good starting point and with a little extra work I can get something much better looking out of it.

Some of them look ok (you can actually see the ridges going haywire on the right) Kind of ok procedural mountains

but other times the generator just goes crazy, with ridges overlapping each other, and the whole thing starts to break down. Kind of not ok procedural mountains

After reading my code over a few times, I was able to figure out what it is doing:

  1. According to how many peaks I want, the script creates a very rough outline of the mountain range, with peaks and valleys

            *                   *           *
                                    *
    .*                       *                           *
  2. Next we proceed to add extra resolution between these vector points. Maybe 100 extra control points between each peak and valley.
  3. Once we have more resolution to work with, we go ahead and displace it using simple perlin noise. We are using three different scales for this perlin noise, so we’ll get features of different sizes which add more interesting shapes to the mountains.
  4. Once we have the general shape of the mountain rage, we draw it.
  5. Next we go ahead and find the peaks. I guess I was working on finding every local peak instead of just the ones defined in step 1. This seems to be the reason why every small, local peak has a ridge coming out of them later on.
  6. We create a ridge from every peak. Just a simple line going down, displaced with perlin noise.

I don’t remember why I stopped there, because the results were promising! I’m going to try and work a little bit on it this year, maybe with a new approach, and see if I can get a step closer to the drawings and maps that inspired me.

Feel free to checkout the repository here and give it a go!