Monochrome Map Competition

A notice recently came across my RSS feed for the Monochrome Mapping Competition from Daniel Huffman (aka Something About Maps).  It's just an informal competition, and I'm sure not intended for mapmaking programs, but I thought it would be an interesting challenge to generate a monochrome map for the competition.  In this blog post I'll run through how I configured Dragons Abound to produce the map I entered.

To start with, I used the same seed I've been generating while developing map borders, since that's a fairly interesting land shape.  Here's what that looks like:

I want to keep the same terrain but display it as a monochrome map.  To start this process, I have an “old gray" map style that sets a bunch of parameters to create a gray map:

There are various problems or areas I want to adjust in this map, so let me start working through them.

First of all, the map has the test border from my work on map borders:

That's fine -- it's a nice showy border and I'm happy to use it.  But it has some colors in it.  One of the parameters in the “old gray" map style puts a filter on the map to force everything to gray scale, but the border is not included because it's not actually part of the map.  I can't include it in the map (because it's largely outside the map's boundaries).  The quick fix is to change the border so that it doesn't use colors.

Another problem is that the page title is getting printed on top of the border.  (You can see it just above “Meat Point.")  Dragons Abound allocates a fixed amount of space around the map for the page sides, but when I implemented map borders I've started getting elaborate borders that intrude into this space and clash with the elements there.  The fix -- resizing the page appropriately after the map is created -- is on my list but not yet implemented.  The quick fix is to add enough margin to make the title work even with a map border.

You'll notice in this image that the ocean has both a background pattern and horizontal lines around the coastlines.  These two features don't work very well together, so I should probably turn off one or the other.  Although I really like the ocean pattern, it isn't procedurally generated, so it seems like a bit of a cheat to use it, so I'll turn that off.  However, the coast stripes (the horizontal lines) are not one of the better coast decorations in my opinion, so I'll try one of the others.

This looks better, but now there's less visual separation between the land and the sea. With a monochromatic map, we generally want a brightness contrast between the land and the sea to help visually separate the land from the sea.  The ocean pattern created this distinction.  Without that, I need to give the ocean some color to create the distinction.  But it doesn't take much of a contrast difference:

Dragons Abound has an option to shade deeper water to create a little variance in the ocean, but I don't think it works well on this map:

While I'm dealing with the ocean, the windrose lines on the compass can look a little cluttered on a monochromatic map that already has a lot of linework.  So I'll turn those off. I also like a bolder compass; the current one is getting a little lost against the linework on this map.

Turning now to look at the land, I don't like the heavy black rivers, and I think the forests can use some tweaking (or perhaps a different forest style).  First let me switch to a more traditional river style. 

That looks better.  Now let me see about forests.  Before I tried tweaking the forest mass, I tried turning on the alternate forest visualization that uses individual trees:

That actually revealed a bug in my gradients code, but once that was fixed I kind of like this look.  I'm keeping it for now, might delete later.

The mountains right now are being styled with a variant of the mountains on the Iskloft map. 

This style is a bit too bold for the way this map is shaping up, and I want to at least try removing the mountain color.  I also softened the mountains, and with a little tweaking, that gets me to this:

I think this looks pretty good and matches the map style nicely.

I'm going to make a few more tweaks.  First, I'm going to turn on the faux-3D land styling that adds some shadows and highlighting to the whole land mass:

Next I'm going to tweak the biomes so that I have a nice mix of the different biome types.  The default here is pretty good, but I'd like a little more deep grass.  I'll also turn off the borders, which I think are too distracting on this map.  This gives me some patches of deep grass near the forests:

The last steps are to tweak a few names and adjust some labels.  Here's the final map I will submit:

Click through for larger version.  Note that some changes in the terrain generation eliminated the compass and led to a few other changes.  But I like the overall feel and balance of the map.

Map Borders (Part 9)

Returning now to map borders to do some odds & ends and play around a bit.

---

One feature I want to implement is to add stars to the geometrical figures that can be seen in a pattern.  To do that, I steal this code from Stackoverflow and adapt it to work with Dragons Abound:

Hmm.  That's not really a star.  But at least it has the right number of sides!  A little debugging suggests that it actually is a star, but with very short arms.  Let's make them longer:

Okay, that's reasonable.  With more arms:

And with short but not too short arms:

Here's a star in a map border:

Here's an interesting one:

There's a weird eclipse effect caused by the off-center placement of the stacked star.  After fixing that it becomes apparent that stacking stars doesn't work very well in most cases.  The default parameters yield stars that have too many thin arms, and become unreadable when stacked:

For stacking I need fatter stars:

So far I've generated all the stars in the same orientation, but I can also give them a random orientation.  This isn't clearly visible except when zoomed in:

But if you look carefully you can see that the stars all point in different directions.  However, I've learned the hard way not to spend too much effort on little details that aren't really visible at the default map scale, so I'll leave this turned off.

---

Of course, if you're going to have stars, you need to have moons too.  Obviously I can do circles for full moons, but I want the more picturesque crescent moon, and ideally to be able to display all phases of the moon.  There's actually a Javascript library for creating the phases of the moon, but unfortunately it's not really usable in Dragons Abound.

Drawing a moon requires two arcs.  One is half of a circle, and the other is the inside edge:

As the phase of the moon changes, the inside arc moves to the right until it's the other half of the moon's edge.  At this point the moon is full, and then the left half starts shrinking down towards the right side until the moon is new.  And then it repeats.

Let me start by seeing if I can at least draw a crescent moon shape.

That's a start.  The crescent moon is horizontal because the only code I have for an ellipse is for an axis-aligned ellipse.  The parametric equation for that is pretty easy.  The parametric equation for a rotated ellipse is not so easy.  So instead I'll rotate the elliptical arcs after drawing them -- as it happens I already have a routine to rotate a polyline around a point.

That works fine.  I have to rotate the moon by π/2 to make it vertical, and then a little bit more to make it lay over on its side a little bit, which looks better.  Note the optical illusion on the left border.  Because the crescent moon isn't symmetric, it looks off-center.  But if you imagine the missing piece of the moon, you'll see it is actually “centered."  Here it is interspersed with stars:

The same optical illusion makes it look as if the elements aren't evenly spaced.

Making the moon change phase is a little tricky.  If the phase goes from 0 to 1, then the moon starts out as full at 0, wanes to a new moon at 0.5, and then waxes from the other side to another full moon at 1.  Getting that worked out takes a little experimenting.  I also want the moon to change smoothly over the course of the pattern, so I need to advance the phase a bit every time I draw a moon.  Fortunately, I already draw patterns clockwise around the border so I don't need to fix that.

In this case I've created the pattern so that the phases wrap correctly all the way around the map.  In general this won't be the case -- the phases will continue smoothly around three of the corners but they won't necessarily match up when they get back to the starting point.  This is less obvious when the moon is part of a pattern:

As long as I have changing moon phases perhaps I should be able to intersperse random stars betwixt the moons.

The moon is a little bit of gimmick.  I'll use it occasionally but it's really just a change of pace.  But fun!

---

On another topic, I have a couple of example maps that use hatching of one sort or another in borders, such as this example from Western Realms by Diamond:

Dragons Abound doesn't currently implement that kind of broken hatching (TODO list :-), but it can fill an area with a straight-forward diagonal hatch.  (This is one of the options for shading mountains.)  However, my line drawing routine doesn't know how to fill with a hatch.  It can only fill using the usual SVG options -- colors and gradients and so on.

The easiest way to add a custom fill is to draw a line with no fill, get the whole area of the line as a polygon, and then fill the polygon with hatch in a second step.  Before I can do that, I have to modify the line drawing routine to also return the outline of what it drew.  That's an extensive change because the routine is used throughout Dragons Abound.  However, I've had other occasions where it would be nice to have the outline of a line (!), so I think it's a worthwhile fix. With that in place, I can now hatch in that outline:

I can also do a cross-hatch by overlaying a second hatch at a different direction:

These are somewhat interesting.  I'm going to have to think about how to incorporate it into the map border generation rules, because it doesn't work well with gradient fills and other elements:

That's kind of a mess.  But it's certainly a reasonable choice for a plain border or as the background for some patterns.  At the moment I'll restrict it to use in a simple filled border:

Since I'm playing with hatching, I thought I'd try using it to fill pattern elements.  The results are not all good, but sometimes interesting:

This is at actual size.  Hatching on bigger elements works okay.  On the smaller and stacked elements it isn't really visible as hatching at this size, but it's not entirely an ugly effect.  Here's one where it works pretty nicely:

A cross-hatched ellipse looks like a pineapple:

Restricting hatching to the bigger pattern elements (bars and ellipses) seems like a good compromise.

Next time ... more borders :-)

Iskloft Mountain Style

I occasionally like to take a reference map that I like and see how closely I can match the style.  A map I recently saw and liked a lot was Iskloft by Nate from wasd20.net.  You may be familiar with his YouTube channel as well, where he's done a number of videos on drawing fantasy maps.  Iskloft is a Viking-themed map for an RPG book.  I'm not going to replicate the entire style in this posting, but I wanted to see if I could replicate his mountain style, as seen here:

This is a pretty simple, bold style.  The outlines are heavy and even thickness, with fairly straight mountain sides.  There is usually just a single center ridge line, and shading is provided by heavy lines.  Although the whole map is monochromatic, the mountains have white at the top to indicate snow.

I haven't played with mountains for a while so it takes a bit to get the testing code working again, but after that I set it up to generate some sample mountains at roughly the same scale:

Here I'm just using random parameters.  Let me set the base color to gray and make the outline a little thicker:

Here randomly I didn't get any shading, so let me force shading to be on.  The type of shading used in the Iskloft map -- straight lines slanting lines in the shadowed areas -- is called “contour" shading in Dragons Abound.

Dragons Abound defaults to using contour lines a little darker than the base color of the mountain.  On the Iskloft map, the contour lines are black and about as thick as the mountain outline.

That's a pretty striking style just like that, but the Iskloft style is a little different.  There's more space between the shading lines -- usually just three per mountain.

In Dragons Abound, the shading fills the shaded side of the mountain,  On the Iskloft map, the shading often only fills the shaded side partway.  I don't have that capability, but I can somewhat fake that look by tapering the shading line so that it disappears part way across the shaded area:

That's an interesting look but not really that similar to the Iskloft mountains.

Another major difference in shading is that in Dragons Abound the contour lines have the same general slope as the side of the mountain.  In the Iskloff mountains, the contour lines are generally at a shallower angle.  That can look nice, and I might think about adding it at some point.

As I mentioned earlier, the Iskloft mountains generally have snowy peaks.  Dragons Abound has an option for snowy peaks, but it works off the height of the mountains to only put it on the highest mountains.  I need to finagle it a bit to use it consistently:

The Iskloff mountains are fairly simple shapes, so I will turn off most of the embellishments that Dragons Abound adds to mountains:

That's a little too regular to my eye, so let me add some more perturbations:

The ridge lines on the Iskloff mountains are pretty heavy and fairly straight.  They're also present on every mountain.

Lastly, the Iskloff ridge lines slant back to the shaded side of the mountain.

(Here I've also flipped the shaded side of the mountain to match the Iskloff map.)  Overall I think that now looks pretty close.  I took one of the mountains and pasted it back into the Iskloff map.  Can you spot it?

Not terribly hard to spot, but it fits in fine.  At some point I might try to replicate the rest of the map -- but I'll have to add runes to my map borders :-).