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 :-).