Knurden Style: Mountains (Part 2)

In this posting, I'm going to work on recreating the mountain style used on the Knurden map, as shown in this excerpt:

The mountain outline here is pretty straightforward: A flattened vee with some concavity on the sides.  To get started, I'll grab some code from my existing mountains and delete out a lot of the details to get just the topline:

Well, at least it's a start!  I need to connect the tops of the sides and add some rounding.  I'll put in some size variety as well.

That looks close to the basic shape, but it's a little too jagged.  The Knurden mountains are very smooth and rounded, so I'll relax the curve I'm using to draw them.  I'll also make the proportions a little taller.

I know from experience I can make myself crazy chasing the perfect exact shape for a mountain, so I'm going to settle for this, which I hope is close enough. 

The shape is okay, but the quality of the line could be improved.  There's some width variation in the lines on the original map, and that's something I can already imitate.  The lines also tend to trail in and trail out (start small or end small) and that's something I can only do as a kludge, so this is a good opportunity to add that to my line drawing routine.  With that in place, I can have each line randomly trail in and out:

That adds some nice variation to the lines.

Next let me fill the mountains with a background color.

Okay, there may be a small problem here!  It looks like I'm not moving the baseline of the mountain when I move the rest of the mountain.  For mountains, I draw them in the center of the map at (0, 0) and then move them where they need to go.  In this case, I left the baseline (the invisible line that goes across the bottom of the mount) behind when I moved the mountains.  

That's better I suppose but apparently I still have something wrong.  As it turns out, I have some points in the baseline twice and one half of the baseline is backwards.  All that confuses the fill algorithm!  After straightening out the problem:

This is now mostly good.  You notice that I make the bottom of the mountain roughly convex and add some variation.  On this map that won't be too important, because the mountain matches the map color, but it helps sell the mountain as a 3D shape.  The area of the fill doesn't always match up precisely with the mountain outline (because the mountain outline is drawn with some jitter) but on the map the land behind the mountain will fill any gaps.

Now comes the more difficult job of shading the mountain.  I've magnified several mountains here to show in more detail how they are shaded:

It looks to me like the dark side of the mountain is shaded with some thick lines that start off parallel to the back side of the mountain and diminish as they go to the baseline (as noted in red).  On the light side of the mountain, there's a single broad stroke that goes 1/2 or less the distance down that side of the mountain (as shown in blue).  

Since the shadow side is below the lit side, I'll start there.  The first step is to try to get the shadow side of the mountain, duplicate it, and offset it into the inside of the mountain:

That looks okay so far, but the shadow line doesn't start up at the peak, so I need to shorten the top part of the line.

The next step is to draw the line in the shadow color, which is about 15-20% darker than the background color.

This causes the line to extend past the mountain baseline in some cases.  That's probably okay because the background will be the same color as the mountain.  More of a problem is that the line may be too big for some of the smaller mountains, but I'll wait to see before worrying about that.

For the bigger mountains, I need to add some additional lines of shadow.  After making a stupid mistake that took a while to find (nested for loops that were using the same loop variable) and adding some variation to the lines, I have this:

This looks pretty good on the largest mountains but the smaller mountains are a little messy.  I'll add some special cases for small mountains:

Okay, that looks reasonable.  Let me move on to the highlight.

The highlight is similar, but it is in a light color, on the other side of the mountain, and is wider and shorter.

That's an okay start but there are a few problems to address.  First, the color is not quite right.  This is evident if I put one of my mountains alongside one of the originals:

In the original, the color has been made more yellow to suggest sunlight.  I can do this by adding some green and taking away some blue:

That looks nicer.   The highlight is broader than the shadow, and closer to the outline, so it sometimes obscures the outline, as in the mountain above.  To fix this, I can draw the outline last so it is “on top" of the highlight.  I can also add a small blur to the highlights and shadows to soften their edges a bit.

This looks pretty good to my eye. 

I've added two new mountains to this map excerpt, see if you can spot them:

(Reviewing this several days later, I can't remember which ones they were!)

That's good enough for now, I think.  Next time I'll try them out on a map.