For new mountains
reload the page

[Part 3] Building mountains: Creating the landscape

On the second part of this series, we learnt how we could create polygons that resemble mountains. Now, on the third part of this series we will tweak our algorithm to start generating random mountains

Building the first version of our terrain

The previous algorithm we had it would create basic mountains:

Illustration showing a pixelated mountain packing more “pixels” in it and giving a better impression of a mountain

What we are looking for now is to reuse that algorithm to create a more smooth terrain like shape:

Animated terrain creation with unpredictable lower bounds

Stacking the mountains

Now that we have created our basic shape of a terrain we can stack them together one above the other:

Animated stack of mountains where the first mountain can completely cover the one behind it

You may have noticed that if you click “Create terrain” enough times, the red mountain (the closer to you) might be tall enough that it will cover the one behind it. To solve that issue we will need to introduce the concept of a maximum height for the mountains.

Animated stack of mountains where the first mountain is shorter than the one behind it

Introducing the concept of flatness

The terrain we have built so far have extremely highs and lows. In order to solve that, we can introduce the new concept of chance of a part of the terrain to be flat.

Animated stack of mountains where the terrain is more plain without having too many highs and lows

Putting everything together to create the scene

Now that we have added multiple mountains to our scene, we can add a third mountain to give the impression of depth to our scene:

Animated stack of three mountains

We adjust the colors of the mountains and add an opacity to replicate our depth of view:

Animated stack mountains with correct color and opacity for each mountain

Now it’s a matter of adjusting our gradient, adding a few clouds and opacity:

Final version of the mountains with clouds, gradient and opacity added

Performance considerations

All of this runs in the browser, so performance depends on how much work we make it do. Generating the terrain is fast as long as we keep the number of points small. We do not need very detailed shapes to make it look good. The sense of depth comes from stacking a few layers, not from adding more detail.

SVG itself is fine, but updating too many things in the DOM is not. We should only update the shape data, not the whole component. Simple animations like opacity or small movements are cheap. Three or four mountain layers are enough.