Thursday, December 22, 2016

Two Mountains Are Better than One

In my previous posts, I described how Dragons Abound creates hand-drawn mountains like these examples:
I think these look pretty good individually, but I'd like to put them together into groups as well.  To start off, the simplest case is just to overlap mountains.  This requires that a mountain cover over anything that's already there when it is drawn.
So the mountain on the right appears to be in front of the mountain on the left.  When drawing mountains on a map, we can draw them from top to bottom, so that the overlap properly reflects how far away the mountains are from the viewer's eye.
This looks fine, particularly at map scale, and this is how you'll see a lot of maps done at the Cartographer's Guild.  But some artists merge mountains, as in these examples:
I like how that looks, and I'd like to be able to do the same thing. In the examples above, there are basically two styles of merging.  In one of the styles, the two mountains overlap, but the line that defines the front mountain is removed where it overlaps the rear mountain:
I can generate two overlapping mountains by hand and eliminate that line in Photoshop to see how that would look:
Pretty good, I think.  It actually doesn't look bad to erase only part of the line, either, as in this Photoshopped example:

So I'll keep in mind that I might want that as an option.

But in the simpler case, basically all I need to do is to arrange the two mountains appropriately, find the intersection of the left mountain's right side with the right mountain's left side (!) and then delete the left mountain's right side from that point to the end.  However, there are a couple of complications.

One is that the right mountain (particularly the shading) might stick out underneath the left mountain.  Generally when mountains overlap this isn't a problem because the baseline of the back mountain is higher than the baseline of the front mountain.  But in this case the mountains have the same baseline.  I can address this by extending the left mountain's mask downward.

A second possible complication is that if the right mountain is steeper and/or narrower than the left mountain, it might intersect the left mountain again lower down.  In that case, I need to erase the line only between the two intersections:
Actually the real case is even worse -- because both mountains are jaggedy, there can be multiple intersections with both the left and rides sides of the right mountain!  But in general I think I can walk down the left mountain's right side from the top, start erasing when I hit an intersection and stop erasing if I hit another intersection.  This does break the line up into multiple lines, which is a minor pain.

Here's some examples of that algorithm in action:
Overall, that looks good.  But here are some examples where it didn't work as well:
In the first mountain, the left mountain intersected the right mountain on an upward jag, and then immediately jigged downwards, leaving a kind of odd cut-off piece of shading.  This is just an example of how the random shapes will sometimes combine in awkward ways.  In the second two bad examples, the right sides of the two mountains are nearly parallel, creating various problems.  One problem is that my algorithm assumes that when two mountain sides intersect, they cross.  That seems reasonable, but there's an edge case when the intersection is the end point of a segment.  In that case, the next segment can reverse direction and the lines don't end up crossing:
In this example, the black line doesn't cross the red line, it just touches in one spot.  If you're an avid reader of this blog, you may recall I had a similar problem with intersecting scribbles.  I haven't had any brilliant ideas since then about how to deal with this, so I'll let it go for the moment and use geometries that avoid the problem as much as possible.

(Note:  Okay, to be fair, I realize that the "right" solution might be to make use of a good library for boolean polygon operations.  Maybe at some point I'll bite that bullet.)

One neat thing is that I can use this algorithm twice to combine three mountains:
So far these results look pretty good.  Let me see now if I can add the second style I showed above, where the mountain side continues on for a while after the intersection.  Here's some examples:
The algorithm here is pretty simple.  Instead of cutting off the line at the point of intersection, I cut it off about 2/3 of the distance to the end of the mountain.  I thought something more complex would be needed, but this works surprisingly well.

Now I'll tackle the other way of combining mountains, as illustrated by these examples:
What seems to be happening here is that the right mountain is in front of the left mountain, but the shaded side is cut off at the point where the mountains intersect along a line parallel to the ridge line.  Pfew!   Perhaps an example will make this clearer:
The top shows the two separately generated mountains.  The middle shows them overlapped normally, with the right mountain in front.  In the bottom, they are overlapped, but the right mountain has been cut off along a line from the intersection of the two mountains to the bottom roughly parallel to the ridge (shading) line.  The effect is that the right mountain is sticking out of the face of the left mountain, rather than just overlapping.

This should be too hard to implement -- I have at least some of the tools already written.

(Sounds of typing and muttering.)

Okay, a little bit harder than expected.  There were a few issues I didn't anticipate and it took a while to find an approach that looked good.  To my eye, in many cases putting the mountains together this way just looked like two overlapping mountains, one with a rather steep side.

It works a little better if the right mountain shading narrows to the bottom to make it look like a cleft:
I'm probably going to be tweaking this for a while before I'm totally satisfied, but here are some examples of mountains with all the options in play:
I think next I'll spend a little time putting these onto a map to see how they look in a map context.

1 comment: