Retreating to the Foothills

Instead of continuing to the automatic creation of mountain terrain shapes, I got sidetracked into approximating the visual style of the foothills that surround most mountain ranges of the map. While their style is relatively simple, hills are by far the most annoying type to trace due to their sheer number on the map (1681 to be exact) and their overlap with other terrain types. But let’s discuss the two visual elements of the style, outline and fill.

Outline

Hills are mostly defined by their dashed outline, which are effectively short versions of the flank lines of the mountains terrain. Together with the overall smooth round shapes of a majority of the hills, this means we can just use a wide line with an appropriatly spaced dash pattern to recreate the effect. Since the hill lines themselves have rounded ends in the original we have to apply a slight blur filter to achieve the same result in the svg style.

While this looks already somewhat decent, it is visually a bit too clean and misses the hand-drawn aesthetic. We can, again, take a trick from the mountain terrain and apply a slight random displacement filter to make lines less parallel.

In the original style lines also vary in length. This would be re-creatable by applying a mask shape with varying outline width to the dashed line, but the hill flanks seem acceptable even without this feature.

Fill

The internal color of a hill is basically a smooth bump illuminated from to top right. It turns out that the SVG standard already provides methods to create this kind of coloring effect, with the feSpecularLighting filter. It requires a heightmap of the 3D shape of the hill, which we can create by blurring the original shape. By setting a light direction and color, the fill automatically gets a light and a shadowed side.

Since we have to split the rendering of outlines and fill a new problem is rearing its head, overlaps.

Overlaps

Some hills on the 3e map are drawn very close together or even on top of each other. If every hill was just a single shape, overlaps could be resolved just by the order of drawing, where later hills would “overwrite” earlier ones. This does not work for the outline layer, all outlines are visible regardless of overlap. To resolve this we have to use an entire separate set of “preferred” hills, whose outline and fill are drawn on top of regular hills. Fortunately only one extra hills layer is enough to handle all overlap situations. (Unfortunately the region I choose did not have a good example of this, so I added an extra hill showcasing the overlap problem at the bottom of the image.)

Terrain interactions

Just like some mountains, hills change their coloring based on the terrain they are placed in. Originally, I planned to resolve this by separating hills into layers that correspond to these terrain types. However, there are some cases in which hills cross from one terrain type to another, e.g. from forest to plains. Single colored hills would cause visual artifacts in one or the other terrain. To overcome this issue, we can use the fact that the forest and jungle terrains have layers that represent their background color and pattern. Instead of treating these terrains like opaque shapes, we can use different blend modes to let objects under the terrain “shine through”. Here separating the border region of forests to their own layer allows us to better recreate the 3e style. This leads us to the final hills style:

There are some untested interactions with snow/glacier terrains, which are not yet implemented, but given the successful outcomes with forests there is no real worry that this would cause serious issues. There is also some inconsistency with hills in grasslands. They only get colored in the endless wastes region and will not get coloring treatment for now.

Next we will turn around again and tackle the final peaks of the mountains terrain.

Written on February 26, 2025