Land - A plain affair

“Cleared/Mix” (which i like to call “plains” for simplicity) is the default style for land areas on the Faerun map. Only some of the smallest islands avoid using this style, though arguably it is still present below the native terrain of e.g. the frozen isles of the Sea of Moving Ice. Visually, plains are made up of two main elements: the beige background with its faint darker-colored blots and the randomly placed dots covering the area. “Grasslands” use the same style with a light green tint.

Background Blots

Let’s start from the simple land style with smoothed path outlines and a coastline (i.e. the results of the oceans - deep dive post). Plains are filled with a light beige (#fbefdf) background color, with the other two features displayed on top.

The blots have a bulgy shape, reminiscent of stains from water drops. In the middle of a landmass they seem to be placed randomly with varying sizes and shapes. To generate a similar looking effect we can use the turbulence filter effect to generate a pseudo-random noise gradient over the entire land shape. Then we treshold the pattern to keep the brightest white areas of the greyscale noise. This results in a random pattern of blots, but some of them might have pointy shapes so a slight morphologic dilate is applied to round things out. Coloring the blots with the outline color (#f2e6d9) of the original map gives us this image:

After the dark outline the blots gradually brighten up again, but not quite to background brighness. I initially tried to recreate this with a Component Transfer filter to have full control over the color gradient. However, manipulation 768 individual float values was too tedious. Instead, creating a second set of slightly smaller blots from the same noise texture and coloring them with the inner color (#f5ebdb) also does the trick.

Lookin at the target map it becomes obvious, that blots occur much mure frequently at the coastline and the outline of non-plain regions. For now we only have the coastline to work with, but we can use it as proof of concept for other outlines. To increase the number and size of blots along the coast, we can simply manipulate the noise pattern in the areas close to the land border before the threshold opteration. The width of the border region, soothness of the blur and the amount of intensity added allows for enough finetuning to create the desired visual effect:

Dots

Just like the blots, the small dark dots are scattered over the entrie land area. We use the same turbulence filter technique to create them, though with a more extreme threshold value. By choosing a high value, only the highest intensity peaks of the noise gradient are shown as sparse amall dots. Blurring and thresholding them a second time ensures that they are circular and gives some control about the dot size (if you are using Firefox you will most likely not see anything here, please check the examples at the end of the section):

Combined with the blots we get a pretty acceptable overall style:

Firefox renders filter effects differently from Webkit browsers like Chrome/Internet Explorer and seems to miss fine details like the dots more easily at various zoom levels. Therefore the visibility of dot features needs to be boosted for a given zoom level (i.e. this does not work well with browser zoom):

Currently, all these effects are applied as a combined filter on the land polygon, though it might be necessary to split the blot and dot effects onto their own layers once the have to interact with other terrain types.

Grasslands

One of these terrain types are the grasslands, which are basically a light green variation of the plains. By placing a green colored semi-transparent svg path over the basic plains, we can get a good approximation:

Blots are more feint, like in the original, but the dots are also less visible. Ultimately, we might need to place dots on an individual layer that is shown on top of the grasslands shape. However, I’ll leave this on the todo list until i can assess if it is visually notable on a whole map.

Again, here is the Firefox-corrected style:

Coming up next is a trip to the forest and jungle terrains.

Written on May 10, 2024