Decorating the Ocean (Part One)

Oceans can create large empty spaces in a map, so you often see embellishments added to create some visual interest and/or to break up the empty space.  For example, one of the things you'll often see on fantasy maps is some embellishment where the ocean meets the land.  Here's an example:

Here the map maker added a series of contours around the edge of the coast to suggest the ocean getting shallower inland.  In this series of postings I'll discuss various approaches that Dragons Abound uses to illustrate, decorate and label oceans and coastlines.

---

The default ocean rendering in Dragons Abound is to use a single flat color:

The only mildly interesting thing here is how Dragons Abound selects a color for the ocean.  I want to have a variety of possible ocean colors.  Initially I created an array of RGB color values that worked well as oceans and chose randomly from that array, but eventually I wanted a wider selection of colors.  I also found that the random ocean color often didn't work well with the random land color.

The key insight was to select randomly in the Hue - Saturation - Luminosity (HSL) color space rather than the Red - Green - Blue (RGB) color space.  The colors that work well for oceans are all in a single stretch of the hue space, from slightly green-blue (0.50) to slightly violet-blue (0.60).  And the clash between ocean and land colors is not a hue problem, but occurs when there is a mismatch between the Saturation or the Luminosity of the colors.  So by choosing randomly in the hue space of 0.50 to 0.60 and matching my Saturation and Luminosity appropriately to the land color, I end up with an ocean color that usually looks pretty good.

A flat ocean color is a little boring for a fantasy map, but it works well on something like a geopolitical map:

---

You'll notice that the example map at the top of this posting has a grain texture added to the ocean. This seems like a fairly simple embellishment, but SVG is a vector graphics format, and things like texture that are fairly straightforward in a raster-based format are more challenging in SVG.  You can get some texture effects using SVG's filter system, but it isn't simple to figure out. After some experimentation, I have this:

I'm not entirely happy with how it looks and so it continues to be a work in progress.

It's so difficult to find good information on SVG filters that it might be helpful if I mention a few resources I use.   Two tutorials I've looked at a lot are from Smashing Magazine and from Creative Bloq.  Neither of these has anything to do with maps, but both have a lot of interesting material and give you a good idea of the versatility of SVG filters.

Another good resource is Inkscape.  Inkscape is an open-source vector (SVG) graphical editor.  It includes a large number of filters, so it's often useful to take a look at the filters there and if you find something useful, look at the source of the filter to see how it is constructed.

Finally, there's filtered, an open-source SVG filter editor.  It allows you to compose a filter and see what it looks like on an image.  It's old and seems to be abandoned, but it still works fine for me and can be a quick way to try out different parameters, settings and compositions.

---

Moving on from the grain effect, the next embellishment I looked at was to mottle the ocean.  The idea here is to add some subtle texture to the ocean color.  (You can see some use of this in the example map at the top of this post.) This helps break up a large stretch of unrelieved color on the map and adds some visual interest.

This is fairly straightforward because I don't color the ocean as a single big polygon.  Instead, I color each of the world locations that make up the ocean individually and then apply a slight blur to merge them together.  So mottling is accomplished by coloring the individual locations differently.  Here's an example where I give each ocean polygon a slightly randomized color:

This is more interesting than the flat ocean, but overall not really that good.  Mottling works best when the effect is subtle (so that it doesn't distract from the map content) and not obviously patterned or random.  The above map uses random mottling that only changes the shade of the ocean color. This looks okay but obviously mechanical.

Here's a version using noise:

This isn't as obviously mechanical as the purely random mottling, but has a tendency to look like clouds, which can be distracting.  There's a lot of room for experimentation here, and much probably depends on your particular tastes.

I have also experimented with mottling by changing the hue instead of the shade.  For example, by making parts of the ocean greener or more purple.  That doesn't seem to work as well; or at least is difficult to do well for an arbitrary color.  Since the oceans on my maps can be a variety of shades from green-blue to purple-blue, I have not been able to get this working to my satisfaction, so it's not currently an option.

---

Another interesting embellishment is to indicate deep water by using a darker color and outlining the deep water areas.  This is a sort of "continental shelf" effect that shows where the open ocean starts:

Here you can see at the bottom middle the dotted darker area of the deep sea.  In ancient and medieval times, this would mark the area of dangerous sailing, away from the shallower and calmer shore waters.  I implement this by coloring the deep area a shade darker than the shallow area, but there are a few tricks to doing this well.

The first is figuring out the threshold depth for deep water: Where does "deep" start? One approach is to look at a bunch of maps and figure out a good typical depth value.  This has the advantage that you'll sometimes get a map with a lot of deep water and sometimes a map with no deep water, so you automatically get some variety.  The disadvantage is that you have no control over when deep water shows up, since it's a side-effect of the terrain generation.  An alternate approach is to randomly generate (or select) how much deep water should appear on the map, and then set the threshold depth accordingly.  So if you want about 30% of your ocean to be "deep water", then sort all the ocean depths and pick the one that is 30% from the bottom of the ocean to be the threshold for "deep water".

The second trick is to relax (smooth) the contour between the shallow water and the deep water.  The coast is an example of a depth contour (it separates the positive height land from the negative height land), and you can see that it is very wiggly and fractal.  The same level of detail doesn't look good as a water depth contour:

It's harder to map ocean depths than coastlines, so our eyes expect to see less detail in these sorts of contours.  The fix is to apply fairly heavy smoothing to the contour line before drawing it.

The third trick is to generate the color of the deep water by reducing the luminosity of the base ocean color.  This looks good, and it works well for any color, which lets me use random ocean colors without having to worry about the corresponding deep ocean color.  (As an aside, it turns out to be very useful to have a utility routine for changing the luminosity of a color.  The deep ocean here is the ocean color with less luminosity; the same thing is done for the darker shade around the edge of the forests.  You can do this by converting your standard Red-Green-Blue (RGB) color into a Hue-Saturation-Luminosity (HSL) color, reducing the luminosity, and then converting it back.)

---

An obvious extension of this deep water embellishment is to shade all of the water by depth, making the shallow areas lighter and the deep areas darker, essentially a depth map.  Here's an example of what that looks like:

(I'm showing more of the map here so that you can get a sense of the ocean depths.)

Interestingly, this looks a lot like the noise-based mottling.  If you know it's a depth chart then you can see it makes sense, but at a glance you'd probably just take it to be decorative.

When making the depth-based map I temporarily turned off the normal blurring of the ocean colors, and although the ocean above looks pretty smooth, if I zoom in far enough you can see the individual triangles that make up the ocean:

Finally, here's a map combining grain, mottling and ocean depths:

Next time I'll start talking about decorating the coastline.