“Hand-drawn" D&D Style

 I had a note in my TODO list to look at applying the pencil filters I developed earlier in the year to my D&D style.  The D&D style is intended to make maps look like I had drawn them back in high school when I ran a D&D campaign.

As it is, the lines on these maps look a little too good, and one of the reasons I played around with trying to create an SVG pencil effect was to improve on these.

When I went back to try the D&D style a few things were broken (mostly new features I'd added since the last time I used that style) and I got a little sidetracked fixing those and creating a D&D style that looked like Bic Pen:

I made a couple of fixes creating this.  I added some typewriter fonts for creating the caption at the bottom of the map.  I also spent quite a bit of time debugging some problems with coffee stains (which don't show up on this clipped view of the map) as well as creating a map template for an island that wouldn't run off the edge of the page.  I also created a new version of city icons that look more like hand-drawn (and hand-filled) circles.  I'm not sure any of these details will show up well in the image above but at 100% size they do help “sell" the map as hand-drawn, although it isn't perfect.  The gray shading around the edges of the continent was an accident but it looked so much like pencil added to the pen drawing that I left it in.

I posted this map to /r/mapmaking with the title “An Old D&D Map from High School" with the real explanation in the comments.  It got quite a few upvotes and you can read the comments here.

Switching over to the pencil version of the style got me this:

This is before the pencil filter has been added, and like the example map at the top of the posting looks a little too good.  I'll put the pencil filter on all the drawn lines.  A close up demonstrates how this changes the lines:

The filtered lines are on the left and the original lines on the right.  You can see that unlike the original lines, the filtered lines have fuzzy borders and some speckled color variations. The filter also makes the lines somewhat darker and thicker.  To compensate for that I can make the unfiltered lines a little lighter in color and thinner.

The lines are now a pretty good match to the original lines but with more of the texture and feel of a pencil-drawn line.

Another thing I can do to make the pencil effect a little more believable is add some grain to the paper by overlaying a texture:

This makes the image a little darker but adds some grain that explains the pencil texture.  It's hard to get this texture right, and there's a problem if the image I'm using for the paper itself shows grain.  So I go back and forth on whether to use this and/or how strong to make it.

I want to do a couple of things to distinguish the pencil version from the Bic Pen version, so I'll switch to a different type of paper, turn off the 3D coast effect and I'll turn on forests.  I'll use the style that draws forests as little circles for individual trees.  And I'll turn off trunks so that it's just the circles.

That looks pretty good and the pencil filter looks good on the little trees. The trees are a little too uniform, so I'll try adding some more variety to them and also make them closer together.

Okay, that's a little too close together.

That's better, but it might look more hand-drawn with more variation in the tree circles.  The code is currently set up to use a consistent tree size, but that's easy to change.

That looks a little better, I think.

To continue to distinguish this from the pen version, so I'm going to add a compass.  With this land type (a small island) there's plenty of room to fit a compass.  I have a couple of hand-drawn compasses I've collected from /r/mapmaking so I'll use one of those.  I have to tweak the color of the lines in the compass to better match the graphite color I'm using on the map.

The style match isn't perfect here (the letters don't match for one thing), but it looks okay.

I thought about turning on what I call “coast stripes" which is common decoration for coast with horizontal lines coming out of the coast into the sea:

But there are a couple of problems with that.  First, my implementation of those lines isn't very good.  (It's on the list to improve.)  More critically, the lines will clash with labels, as can be seen above with the “West Loon Bay" label.  Normally, labels get a halo around them that blocks out things like these coastlines so that the label is readable.  But I can't use that on a D&D style map and I don't have the logic to avoid coast lines around labels.  So I'm going to leave this off.

Another thing worth trying is a map border.  DA has extensive map border capabilities, but in this case I'm going to want a fairly simple one to keep with the D&D character of the map.  I'll try a double neatline:

That looks okay.  Maybe I should create a border grammar for D&D style maps.  I suppose if I generate a lot of them for some reason I might.

I also wanted to change the map caption from a typewriter font to a handwriting font that looks like  someone trying to look “fancy".  I settled on this one:

which I like fairly well.  This is another choice that looks fine too:

One thing that might make this look more hand-made is to add some smudging.  When you use a pencil on paper, some of the graphite gets embedded in the paper but some is simply stuck to the top of the paper.  When you draw your hand (or anything else) across the pencil marks, you pick up some of that loose graphite and smear it across the paper.  Artists do this intentionally to create and blend shades, but it's easy to do unintentionally as well, and most of us probably have memories of smeared pencil drawings and a gray smudge on the side of our hand where it rested on the paper.

Here's an example of smudging on a (lovely) hand-drawn pencil map from /r/mapmaking:

You can see that the artist has deliberately used smudging on the land shading, but he also has a lot of unintentional smudging in the empty parts of the map like the ocean.

I haven't been able to find anyone else who has tried to reproduce this kind of smudging effect, and I'm dubious of my ability to create a convincing effect, but I'll at least give it a shot.

My initial thought was to create a blur or smudge filter to apply to the drawn elements of the map.  I think that could work well for the kind of smear you might give if someone swiped their hand across the map.  But the kind of smudging you see above is the result of repeatedly tracking graphite around the map as you lift and put down your drawing hand.  It's looks a lot like noise, so I'm going to try to create a noise overlay that (perhaps with some blurring) looks reasonable.  This can (hopefully) be done entirely in an SVG filter.  SVG filters aren't my strong suit, so I expect a lot of “exploration" before I get this right, so I'll set up a little test that I can play with:

There's actually a noise filter already on this image; that's what is producing the paper grain.  I can start by making the noise much coarser and darker so that I can work with it more easily:

Now I tweak the noise parameters, the lighting, the blur, and how the blur gets added to the image trying to find something that looks like pencil smudges.  After a few minutes of experimenting I have this:

I've tried to err on the side of subtlety here, so I've picked parameters that keep the smudged areas relatively small and not too dark.

I intend to add the smudge to the underlying image of a page, so let me do that now:

However, I don't really want the smudging on the whole page.  One thing I can do is mask out the edges of the smudging, so it is in the center of the page:

But the hard edges make that pretty obvious.  I can apply a blur to the mask so that the edges aren't apparent:

Here's what that looks like with a map:

I've purposely kept this somewhat subtle.  The drawback of this approach is that the smudges aren't correlated with the pencil lines, so you don't (for example) have heavier smudging in the forest areas where you might expect it.  The way to address that would be to create a mask for the smudges based upon the map, but in actuality the map is mostly white space, so this would probably just eliminate most of the smudges.  At any rate, I'm happy enough with how the smudges look here.

One last thing I'll do here is try to improve the label placement.  As I mentioned above, labels normally have a halo around them that masks out the background to make the labels more readable when they (say) cross a coast line.  Haloes aren't really feasible to hand-draw, so I've turned them off in this map style.  To compensate for this, I want to adjust the label placement weights to further discourage labels crossing coastlines and other features.  I can always hand-adjust a few labels, but this will help most labels find better positions.

Compare to the map above, and you'll see how the city labels across the bottom of the map have shifted to more readable positions.  Unfortunately, the “Pardoner Gose's Ledge" label has moved to a more confusing position, but that's really just a difficult label placement more than anything.

I tweaked a few labels and posted this map to /r/mapmaking and you can see it there in full resolution.  It's not quite indistinguishable from a real D&D pencil map, but I'm happy that it's pretty good!