Decorating the Ocean (Part Four)

A simple coastline embellishment is to darken the water around the coastline:

This is easily done by drawing a darker line around the coast and blurring it into the ocean, and creates subtle effect that helps create visual interest and a break between land and ocean.  It's sometimes seen combined with the horizontal lines embellishment:

The gradient and the shading lines reinforce each other, in a way very similar to the mountain shading used above.

Interestingly enough, this effect also looks pretty good if the water is lightened around the coastline:

This doesn't create as compelling a contrast between the land and the ocean, but it does suggest a surf line (or shallows) which is nice.

A variant of this embellishment is to turn the dark edge into a drop shadow by making it more distinct and offsetting it opposite the light direction:

This creates the impression that the land is floating above the ocean; not my favorite effect but it is dramatic and works well on certain sorts of maps.

This map demonstrates another lovely ocean decoration:

This is an Oriental-inspired map by Ilanthar at the Cartographer's Guild.   He has decorated the ocean in this map by overlaying it with a Japanese-inspired wave pattern.  It adds a lot of interest and character to the ocean.

In SVG, to overlay a pattern of some sort onto a graphic, you use a filter that composes the base image with the overlay image.  If the image is small, you can tile it using an feTile filter. The whole stack looks like this:

// Create a new filter
<filter>   
  // Bring in the overlay pattern
  <feImage>   
  // Tile the image to repeat over the whole area   
  <feTile>   
  // Blend the pattern into the background via "multiply"   
  <feBlend mode='multiply'>
</filter>

You have to take some care when doing this to pick sizes that display and tile correctly.  Non-square patterns also offer some challenges.  If you're just using one pattern, you can work out the proper values and hard-code the solution, but if you're picking between multiple patterns it gets a bit tricky.

Here's an example of a map using a pattern on the ocean:

Keen-eyed observers may detect a tiny little problem:  There's a noticeable gap between the repeats of the pattern!  Bad programming?  No.  It turns out I have discovered yet another bug in Chrome. Perhaps not unsurprisingly, I seem to be testing the limits of what SVG can do in the browser and uncovering areas that no one else has explored.

The work-around (and it took me an embarrassingly long time to think of this) is to tile the pattern myself into an image bigger than my map size and then use that as the pattern.  This also has the advantage that it eliminates some of the fussing to make tiling work, although you are limited to the tiling that you create in the big pattern.  And obviously this can break if the map size gets bigger than the pattern, but for the moment is fine:

One unexpected hurdle for this decoration is finding good patterns.  The pattern that Ilanthar used in his original map and I re-used above can be found fairly easily on the Internet, but there's not a great deal of other usable patterns to be found.  (Even, so far as I can tell, in paid resources.)  Here's an example of another pattern:

Ilanthar has another map where he uses an ocean pattern; in this case it's a more of wave texture than a graphical pattern.  It also doesn't seem to tile perfectly, creating some artifacts.

Here's a quick attempt to re-use this pattern:

Some artifacts are visible here, as I haven't yet put a lot of effort into cleaning up this pattern.

There's a lot of flexibility with ocean patterns and probably some nice opportunities to create interesting effects.  For example, using the wave pattern above at a much smaller scale has the effect of creating a water texture rather than a graphical pattern:

And just to suggest more possibilities, this example map has an interesting approach:

It uses the horizontal lines decoration on the coast, but the rest of the sea is decorated with dots.  That could be easily done with a pattern.