Knurden Style: Basic Map (Part 3)

Last time I wrote the code to generate mountains in the Knurden map style; this time I want to set up a basic map style corresponding to the Knurden map and display the mountains on it.  Here's a reminder of the Knurden map style:

So let me work on some of the basic map settings to match this map.

I can start by setting the basic land and ocean colors.  The ocean is mottled, and Dragons Abound already supports that.  (The land has a special mottling that I'll get to.)

The ocean looks rather dark in comparison to the original map because the original map has wide band of lighter colors around the coast.  This is something I can try to replicate using my existing coast decoration specification.  One problem is that I don't have a specification to blur the coast decorations, but that's easily added.  I'll also add in the same number and spacing of “wave" lines around the coasts.

After some experimentation (and fixing a couple of bugs I found in how the coastline was being masked) I ended up with this.  It's not perfect but at least has a fairly similar feel.

Moving on from the ocean, one difference in the maps is that the Dragons Abound maps have rivers that are the ocean color, rather than white (or the coastal water color) as in the Knurden map:

Dragons Abound has an option to pick up the coastal water color but it seems to be turned off.  (Probably some change broke it and I haven't fixed it yet.)  Fortunately, I can also just force a particular color:

(This river has some other problems, but I'm not going to tackle those at the moment.)

The land on the Knurden map has an interesting texture applied to it:

Horizontal streaks of (alternating) slightly darker and slightly lighter colors have been blended into the map's base land color.  Let me see about adding that.

As usual, I start with the “minimal viable product" as they would say in agile development circles.  (Although I guess I'm both the developer and the customer.)  Here I've just overlaid alternating dark and light bands on the map and applied a hefty blur.

As a first step to refining this texture, I'll break the lines up into segments and some variation in line length, thickness, tapers and so on.  I also set the opacity of the lines to roughly 50% and toned down the dark/light adjustment.  I've turned off the blur as well so I can see better what I've got:

Straight horizontal lines don't look very convincing.  When people draw horizontal lines, they tend to have an arc to them because our arms pivot on our elbows.  And right-handed people often draw on an upward angle.  I'll also add in some more random variation in spacing.

This looks pretty good, and not too different from the original map.  This is the sort of thing I can (and do) spend endless time tweaking, so I'll call it a success for now.  (At some point I'll have to think about how to draw a “brush stroke" in SVG, although lines with width variations are not a bad subsitute.)

Now let me switch over the mountain style on this map to use the Knurden-style mountains.  Dragons Abound is set up with some routines that fill areas with mountains (possibly with mountain chains embedded) that work with generic routines to create, move and draw single mountains.   So all I really need to do is call the mountain filling routines with pointers to the Knurden-style mountain functions. This exposed some bugs that I needed to fix, but with that done I have this:

Which I think looks pretty good and recreates the original's style well.

So that finishes off mountains, and next time I'll tackle the forest style.

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.

Knurden Style: Overview (Part 1)

 I recently came across a map on Cartographer's Guild I liked quite a bit:  The Kingdom of Knurden by Daniel Hasenbos.  I've followed Daniel for a while and he's an excellent artist.  This map has an almost “comic book" style that blends bright primary colors with simple, bold graphical representations for forests and mountains:

(There are really two different styles on this map, because Daniel has rendered the northern part of the map quite differently, but I'm focused on the southern part as shown above.)

This is quite different from the styles that Dragons Abound currently implements, so I thought it would be a fun challenge to try to reproduce this style.  There are a number of different design elements that contribute to the overall style, and I'll be implementing them piecemeal over the following blog posts, but I wanted to start with a high-level analysis of some of the most interesting elements.

Hills and mountains both are represented by simple shaded, rounded vee shapes:

The inside of the mountain shape has two shading areas, based upon the background color.  The lighter shaded area is to the “lit" side of the mountain and is typically smaller; it is a rounded rectangle that starts at the top of the mountain (extending down a bit on the unlit side) and runs parallel to the line that defines the lit side of the mountain.  The darker shaded area is below the lighter shaded area and to the “unlit" side of the mountain.  Hills are simply small versions of the larger mountains.

Overall, the design of the mountains is simple, but creates a pleasing sense of perspective and mass.  Especially where the mountains overlap, the shading creates a nice illusion of depth.  The rounded shapes used for both the mountain outline and the shading give the mountains a smooth contour that suggests welcoming old mountains worn down by erosion and time.  (In contrast, the mountains in the northern part of the map are shown as sharp, connected ridges that seem much more forbidding.)

Forests are represented by masses outlined by individual trees:

The individual trees are simple upright ovals, with a two-tone shading scheme very similar to the mountains.  There is a highlight on the top and lit side of the tree, and a bigger shadow on the unlit side of the tree.  Unlike the mountains, the trees also cast a gray shadow on the ground.  (Which, oddly, doesn't seem to quite align with the highlights.)  A forest is depicted as a circle of these individual trees, with the interior filled with a formless color.  In this color there are two types of decorations.  The first are blotches of the tree highlight and shadow colors, as if you were glimpsing tree shapes within the undifferentiated mass.  The second are disconnected tops of individual trees, as if they were sticking up from the undifferentiated mass.  In addition to the forest mass, there are individual trees scattered nearby.

The design of the forests is more complex than the mountains.  The use of small individual elements within the forests (as well as the decorations) produces a textured feel that the mountains lack, but the use of the same highlighting scheme makes them harmonious with the mountains.  Of all the elements on the map, only the trees and forest shapes cast a shadow.  This makes them seem more representational and distinct than the other elements.  (The city icons in particular seem flat and symbolic in comparison.)  Depicting the interior of the forests as a solid mass gives the impression of a dense, thick, unrelieved forest, particularly in comparison to the individual trees scattered about the edges of the forests.  The line of individual trees around the edge of the forest creates a very specific demarcation.  There's no gradual transition from grasslands to forest, but rather an abrupt transformation.

Something I haven't seen before is the land texture:

Horizontal strokes of lighter and darker colors have been added to a base color to create a land texture.  The color differences are subtle but it adds some interest to what would otherwise seem very flat.

The treatment of the coast line also features something I haven't seen before:

Like many maps, the water features some closely placed wave lines.  But there's also a wandering, fanciful line on the inside of the coastline.  This line loosely follows the coast, occasionally interrupted by a bigger “loop".  The coastline also features a small shading line underneath this line.

The upper part of this map transitions into a realm of snow and ice that is also imaginatively drawn but I'll focus on the lower part of the map.  In the following posts I'll try to capture something of the flavor of this map by implementing some of these features.