The 3e map features three wetland terrain types that all share a few visual features, despite different overall coloring. All of them use a double outline that is broken at random intervals, swamps and marshes share some stylized tufts of grass placed in concentric alignment. Moors are instead colored gray with some grainy green patches.

Swamps

The biggest challenge was to create the concentric swamp/marsh grass rings, and after several different approaches, I have to concede that creating these shapes with filters and turbulence patterns alone is too complicated. But let’s start at the beginning with the swamp terrain. Smoothing the outline of the shape with a blur/threshold operation is a given at this point. We can use the resulting rounded shape and some morphological filters to create two parallel outlines:

To get a quasi-random stippled outline we can use a thresholded turbulence filter. With the right parameters, this turbulence “mask” is made up of disconnected roundish blobs whose distance is controlled by the threshold value. Multiplying the mask with the outlines will cut out portions of random lenght. However, the gaps of the mask can sometimes be nearly parallel to the outline, resulting in tapering of the line rather than an on/off cut. To prevent this, the line needs to be kept as narrow as possible at the time of multiplication. It can then be dilated again to get the desired stippled line with round line-caps.

The fill gave me some headache. After several attempts to squeeze concentric distorted random dots out of turbulence filters, I had to give up and choose the more simple option of using svg patterns. Patterns allow you to define a shape that is repeated multiple times in X and Y direction, so the tricky part is the create one that tiles without too obvious gaps and repetition. I took the largest swamp, Rethild in the Dambrath area, as a model and recreated the individual tufts as svg lines. Afterwards I selected a square of the pattern and manually aligned additional features along the sides to form concentric shapes passing the pattern border. On a closer look, the Rethild swamp has a slightly lower density of features than smaller swamps so I moved the features slightly closer as a compromise. With a bit of a blur applied on the final tiling, the result is a good approximation:

Since the “tile” is as large as the largest shape at this zoom level, we do not have to worry much about repetition. However, this may need to be revisited later when generating zoomed detail maps.

Marshes

I followed the same process with the marshland pattern; grass tufts in this style are slightly taller:

Moors

Moors use green color blots on a gray as background texture. This is effect is very similar to the blots on the plains style, with the addition of some grainy noise added on top. The grain effect can be replicated with a displacement filter that offsets small areas of the image in random directions, by using a random high frequency turbulence image as input:

Unfortunately, the distribution and sizes of blot vary greatly from moor to moor, so accuratly recreating the styles with just one filter is not possible. I am therefore settling with settings that closely mimic the large moors and look somewhat okay on smaller ones.

A key take-away of the whole process is that patterns might be more useful than I originally thought, especially since the filter-based random dot patterns of the plain, jungle and forest styles do cause some problems with browser compatibility. I will revisit using patterns in those cases later on. For this reason all svg examples are currently rendered as 100 dpi raster images (previous posts will be amended).

Next, we’ll continue with a hike to the mountain terrain, which is shaping up to be the most complex style on the map. As it might require some automatic generation of shapes, there might be an intermission talking about svg processing in JavaScript.