New Mountain Style (Part 3)

In the previous posting, I walked through the construction of the new mountain icons:

The red line is the topline, the blue line is the ridgeline, the green line is a secondary topline, and the orange line is a secondary ridgeline.  In this posting I'll look at how to draw this onto the map.

I'll start with drawing the topline.  How are the toplines drawn on the reference map?

The above excerpt shows a number of typical mountains.  The toplines for these mountains are pretty consistent in width and color.  Some of the toplines “fade off" on the shadow side of the mountain by becoming lighter in color or by introducing gaps.

The first approximation is to draw the topline in the base color.

Now I will add a fade to the shadow side.  I only want the fade on the last part of the line, so the first thing I have to do is split the line near the end to isolate the part I will fade:

In a previous posting, I worked on fading river borders into coast borders.  This required me to implement lines with gradient fill -- a non-trivial task in SVG but I eventually got it working fairly well.  Now I can reuse that same capability to fade the right end of the topline:

To make this look less mechanical, I can add in some variety on the length of the fade, the width of the fade line and so on.

There's also the possibility of a stutter at the end of the right side topline.  Implementing this is more of a challenge.  To account for the breaks and fade segments, I have to split the line four times.  Here's a first cut:

This is the right idea, but the lengths need to be tweaked.  Here it is with somewhat better lengths:

It's hard to isolate any skips from the reference map for comparison, but I think these are acceptable.  I'll see how they look on the map and decide then whether to keep them or change them.

One problem with my approach becomes apparent when I use a red background:

I've been changing the line color to white where the line fades out, but this only works on a white background.  To make this work right, I really need to use a gradient opacity.  I don't have that implemented in my line drawing routines, but since it's just a variant of the color gradient the code isn't too difficult to add.

In general, it's best to do fades with opacity if you can.

I'm predisposed at this point to generalize this into a kind of “pen pressure" mechanic that would let me vary the opacity of the line along it's length, which I could then vary slightly to mimic hand-drawing.  But that's the sort of thing I'm trying to avoid in this implementation, so I'm resisting the temptation!

But if I *did* add that I could probably also use it for the next feature of toplines, which is a heavier emphasis on the lines near the mountain peak:

Here you can see that the taller mountain peaks and some of the others have a heavier line near the top of the peak (and often somewhat longer and heavier on the sunlit side).

While I could use opacity to capture this effect, I will instead overlay a darker, thicker line on top of the top part of the mountain:

Here I'm using a line that starts narrower than the base topline and fades in while becoming wider and darker.  I've also added a small amount of random displacement at the peak end of each line, so they don't always precisely overlay the original line.  Altogether I think it's a pleasingly hand-drawn effect.

I added some code to let the emphasis line be longer on the lit side of the mountain, and I realized that I needed to refactor the code so that the lit side could be on the left or the right.  (It's on the left on the reference map, but Dragons Abound usually has it on the right.)  Likewise I refactored the code so that the emphasis line would work for any color (not just gray).  This works by taking the baseline color and reducing the luminance.

The last effect I want to add is shown in this excerpt:

Some mountains have small texture markings coming down from the lit side of the topline.  There are usually a couple of them in a small area, pointing somewhere between vertical and perpendicular to the topline.

I'm not sure at this point whether I like these or not, but for the moment I'll trust the artist.  Here's a mix of mountains with the current settings:

This seems like a pretty good start and a good place for a break.  Next time I'll tackle the ridgelines.