Tuesday, April 30, 2019

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

No comments:

Post a Comment