City Symbols (Part 17): Some New Icon Styles

Having recreated some of the icon styles from my reference maps, I'll now work on creating some new styles.

One thing I'd like to try is to create a silhouette style, something like these skylines:

There a couple of ways to do this.  One way is to generate a city icon as normal, and then go through and change the fill and line colors for all the components to black.  Another way is to take the union of all the elements in the icon to create an outline, and then fill that outline.  (And in fact, I already have some of this implemented for the Skies of Fire style icons so that I could put a heavy outline on those icons.)

Of these two choices, it turns out that the second is a little problematic.  One reason is that there are many pieces to the icons:  building fronts, building sides, roofs, roof sides, roof backs, building attachments, flags, bridges, and so on.  Iterating through all of them is non-trivial.  The second reason is that -- in general -- taking the union of two polygons doesn't result in a single polygon.  For example, the polygon representing a flag is connected to the rest of the city by a line.  Since a line doesn't have any width, the union of the flag with the rest of the city results in two polygons -- the city and a separate flag.  Not only would that look a little odd, but I've been trying to avoid having multiple polygon unions, because it makes the code to deal with them complicated.

I might eventually have to deal with unions the “right way" and allow multiple polygons, but in this case I've got an easier alternate solution, so I'll use that.

There are a couple of problems with these silhouettes.  The first is that silhouettes look better with some separation between buildings so that the silhouette isn't just an undifferentated blob.  So let me add more distance between the buildings.

A little better, but icons where the buildings are completely separated like Shimmiid look wrong.  I can fix that by putting a short wall along the base of the icon to connect up all the buildings.  I'll also shrink down the icons:

Which I think looks pretty good.  Of course, I need to be able to color the silhouettes by the territory color.

This looks okay, but it's hard to distinguish some of the colors without making them jarringly bright.  An interesting variant is to add an outline to the icon:

This makes the icons a little more distinct on the map.  I tried reversing the colors as well:

But that doesn't seem very effective to my eye.

Another thing I'd like to try is to make the height of the icon follow a particular shape rather than be determined randomly by the height of the buildings.   And in particular to have a sort of semi-circular icon.

Pardon the poor quality of the illustration, but you get the idea.

To do this, I essentially need a function that determines the height of a building based upon it's position in the icon.  I'd also like to have a little more precision than just 1, 2 and 3 story buildings.  So I'll vary the height of the building as well as the number of stories, so I can get a range of total building height.

For large cities this often works fairly well, although the special fantasy builds can throw it off.

Now that I've written the code to vary the floor height as well as the number of floors, I can add an option for icons to keep adjacent buildings from being the same height.