World Map Looking at the World through HSL colored glasses

[DeletedUser867]

[Summary] - The use of a Hue/Saturation/Luminance color space is proposed as a means for providing an Elvenar World Overview Map that's tightly integrated with the Rankings popup window.

[Details] - A display that's very much like the Color Picker that's used in Excel, and a great many other applications, could be effectively and efficiently used as a World Overview map.

• Hue would be the angle to a city sector, relative to the center of the map, with a range of 0 degrees to 360 degrees.
• Saturation would be the square root of the underlying City Score divided by the square root of the current maximum underlying City Score, rounded up, to obtain a range from 0% to 100%. Using an integer value will provide some edges, and thereby provide a strong pattern that exhibits how the various cities are progressing.
• Luminance would be the upgrade level of the city sector, multiplied by 6 to obtain a 6% to 90% range, so that the user would have some notion regarding the upgrade level of a city sector.
• Your current location would be shown on the Overview Map as the tail of an arrow, with the center of the map as the default location for the head of the arrow.
• The Overview would be tightly integrated with the Rankings roster. Any other city on the map could be selected by searching for and/or selecting a player's name in the roster OR the reverse; clicking on the overview map would select the related sector in the roster. In either case the head of the arrow would point to the newly selected location.
• While the proposed Overview Map does not depend on any particular approach to optimizing the neighborhoods on the World Map, the HSL Overview will exhibit a VERY strong pattern if the neighborhood optimization uses the general approach suggested in
  https://beta.forum.elvenar.com/index.php?threads/climbing-the-penrose-stairs.2312/

Rankings.jpg, ColorPicker.jpg, and Bell Mountain.jpg

​

The 3 dimensional variant is only shown for illustration, but it's what the Overview would look like if the City Score (Saturation) was plotted as the vertical axis. The most vivid colors would be at the top of the mountain, thereby indicating the location of the most advanced city sectors, while the fringes of the map would taper off to a medium gray, because the lowest scoring city sectors would have the lowest saturation values.

[Reasons for implementing] - We currently have no tools, other than jumps to our own city and a current scout location, for finding things on the World Map.

[Impact on other game features] - The proposed Overview is tightly wound into the method by which the World Map neighborhoods are optimized, and the Rankings roster.

If you'd like some additional background about the history of color, or if you'd like to dig into the technical underpinnings of an HSL color space, do please take a look at the subsequent posts in this thread.

 

[DeletedUser867]

The HSL model was developed in the 1970s, and has been widely accepted as a more intuitive approach than the hardware oriented Red,Green,Blue and Cyan,Magenta,Yellow,Black models.

In the HSL (Hue, Saturation, Luminance) model, Saturation is often the most confusing of the concepts, but here's the way to think about it.

• White light is a mix of all three primary colors
• If you are equidistant from all of the primary color sources, if you're near the rotational axis in other words, you'll get an equal mix of colors which is perceived, strangely enough, as Black, Gray, or White, with no "color" at all.
• So a 128,128,128 RGB triple is a medium gray color, which is located at the exact center of the HSL color space.
• As you get closer and closer to the source of a primary color, on the outer edge, that color will begin to dominate the mix of colors.
• Saturation, therefore, is a measure of how much the "color" is dominated by a single primary color or color pair, because the presence of a third primary color, necessarily on the opposite side of the rotational axis, will always reduce the saturation and thereby gray out the color.

hsl.png and ExcelHSL.jpg​

Did you notice the HSL in the Excel rollbar selector? You can think of the Excel Color Selector display as a Mercator projection looking down on a horizontal slice at the equator of the HSL color space.

• Moving left to right in the color picker is the same as moving clockwise along the equator, from 0 degrees to 360 degrees. North is hidden behind the HSL Double Cone, and is in the upper left corner of the color picker. Just ignore the backwards Hue arrow that's used in the HSL color space; because most applications use the standard compass notations.
• The bottom edge of the color picker is the rotational axis (0% Saturation), while the top edge is the equator (100% Saturation).
• The slider moves you up and down the rotational axis, from black (0% Luminance) to white (100% Luminance).

If you're interested in the history of color there's a HUGE literature, so I won't go into any more detail. There's one site, however, that does a spectacular job of explaining things, and they have a wonderful slider bar tool that's VERY easy to play with, which will help you get your mind around the various concepts. I definitely recommend a visit to http://colorizer.org.

colorizer.jpg​

Dessert for Geeks

Please note that the HSL Double Cone and the proposed Overview map are NOT anywhere close to being the same thing. In the proposed Overview, and in the standard color picker, the HUE rotates around the central axis, that's the same, but Saturation is inverted. The most vivid colors, and the sectors with the most intense luminosity, are at the CENTER of the Overview map, not on the outer edges at the equator.

Likewise, don't get sucked in by the fact that the city distribution LOOKS like a bell curve with a Gaussian distribution. It's not. The highest population areas will actually be about a third of the way up the mountain, with a long fat tail on the fringes of the map and a short skinny tail at the peak of the mountain.

It just barely matters whether we use hexagonal packing or octagonal packing, but there are 9 unique city+relics arrangements so 3x3 is a natural fit, wherein each city has 8 neighbors that will EACH have a different assortment of nearby relics, as you can see by looking closely at the 9 cities that are highlighted by Ci and connected by lines. Square arrays are also a bit more efficient from a programming point of view.

3x3grid.jpg​

Ordering Rank on a square spiral, as suggested in https://beta.forum.elvenar.com/index.php?threads/climbing-the-penrose-stairs.2312/,
provides us with some nice practical magic.

• The square root of your monotonic rank, rounded up, will always be:
  - an even number that's somewhere around 5 o'clock on your ring
  - an odd number that's exactly at noon on your ring
• As a sanity check, the current Beta has 4548 players, so the square root, rounded up, is 68. We could support that population with only 34 rings, so we're well within the ballpark for a Overview map that shows the entire world, as the diameter of our Overview would only be 70 sectors. For comparison, the color picker that we showed earlier has a diameter of 13 sectors.
• As your underlying City Score and your Rank are highly correlated, using a normalized ratio of square roots rounded up to an integer value allows us to use the City Score to drive saturation on the ranked Overview map, which ensures that we'll have a nice 2% jump between the rings on the square Rank spiral, most of the time, which will provide us with a strong visual pattern because the human eye is quite proficient at detecting edges.
• For most players it will merely be intuitive that the color (primarily the Hue) of their city sector will shift as they go around and around the mountain, will become more vivid (Saturation due to their underlying city score), and will become brighter (Luminosity due to the upgrade level of their Main Hall) as they progress toward the center of the Overview map.

There are, by the way, a wealth of excellent tools for measuring the correlation between two series of ordinal numbers. At the moment, Rank is just an ordered list of City Scores, but if Rank becomes more interesting, then http://en.wikipedia.org/wiki/Spearman's_rank_correlation_coefficient
nicely describes some of the major tools that could be used to determine how effectively an optimization has converged Rank and City Score. When a neighborhood optimization algorithm is first released it may be wise to iterate it several times, until the correlation becomes high enough for a comfortable degree of stability from week to week.

 

[DeletedUser867]

A number of related suggestions have already been made, but none of them suggested how an overview might be implemented.

Please take a look at the following threads.
World Map Ideas at
http://beta.forum.elvenar.com/index.php?forums/ideas-and-suggestions.11/&prefix_id=25

World map ideas/how to find players on the map at
http://beta.forum.elvenar.com/index.php?threads/world-map-ideas-how-to-find-players-on-the-map.563/

Find a player on the world map at
http://beta.forum.elvenar.com/index.php?threads/find-a-player-on-the-world-map.66/

Players X<Y Coordinates at
http://beta.forum.elvenar.com/index.php?threads/players-x-y-coordinates.1092/

It's a popular topic, and we very much need an Overview map.

 

[DeletedUser118]

To be honest, I'm not really sure if I understood what you are trying to tell us. Do you mind explaining it for dummies like me in a somehow easier way? ^^;

 

[DeletedUser867]

• Search for your friend's name in the roster to get an arrow on the Overview that points from your current location to her city.
• Click on the overview map to get more roster information about who lives in the area of interest.

 

[DeletedUser]

I understand better now
Well, I like that idea , and also how you explain

 

[DeletedUser]

I don't want to have a colored world map. Wait, what did I say? I mean I want to keep the current world map in looks just as it is. And whoever wants to change it will have to go through me.

 

[DeletedUser867]

How about the World Map OVERVIEW, not the one with all of the Cities and Relics and ummmm?? I guess that's it, huh?
The overview is necessarily too small to contain any interesting detail, so it might as well be really good at providing an
... wait for it
Overview.

It will be tempting, and perhaps even wise, to restrict the color palette to earth tones. The tradeoff is that it would become harder to visually differentiate between the city sectors, because using the full color pallet means that you'll have the strongest edges. What I'd prefer to avoid is an overview that wastes half of the available space in order to outline the sector boundaries

It's the sort of thing that you need to fiddle with and look at, literally, during the design process. If 47 shades of brown and green will do the trick, that's fine with me. I'll happily depend on the graphics artists to continue their excellent work in providing us with a game that's aesthetically pleasing.

 

[DeletedUser867]

It occurs to me that we can use Hue to advantageously differentiate between Elven and Human cities.

• Elven Sector Hue = modulo 360 ( Degrees/2 + 90 degrees ) would blend through Yellow-Green-Blue
• Human Sector Hue = modulo 360 ( Degrees/2 - 90 degrees ) would blend through Blue-Red-Yellow

Conceptually this would provide earth tones for Elven cities and industrial tones for Human cities.

Visually, the sectors on a given radial would be exactly complementary, which would provide maximum color contrast between adjacent sector of opposite races, thereby greatly enhancing the visible granularity of the Overview map.

 

[DeletedUser]

I got most of your other threads, but this one has lost me. As long as the art is just as good I will go along.

 

[DeletedUser867]

Electrical Engineers are terrible that way. We'll use whichever coordinate system makes the problem easy to understand.
When it comes to colors, the Hue,Saturation,Luminance color space is far more descriptive than Red,Green,Blue.

But yeah, I've definitely baited the hook for the graphics artists.