    <rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/">
     <channel>
        <title>ACCU  :: Building the Hexes</title>
        <link>https://members.accu.org/index.php/articles/999</link>
        <description>Professionalism in Programming</description>
        <dc:language>en-us</dc:language> 
        <dc:creator>Administrator</dc:creator> 
        <admin:generatorAgent rdf:resource="http://www.xaraya.org" /> 
        <admin:errorReportsTo rdf:resource="mailto:webeditor@accu.org" />
       <sy:updatePeriod>hourly</sy:updatePeriod>
       <sy:updateFrequency>1</sy:updateFrequency>
       <docs>http://backend.userland.com/rss</docs>




<div class="xar-mod-head"><span class="xar-mod-title">Programming Topics + CVu Journal Vol 12, #3 - May 2000</span></div>

<table border="0" cellpadding="1" cellspacing="0">
    <tbody>
    <tr>
        <td valign="top">
            Browse in :
       </td>
       <td valign="top">

                                            <a href="https://members.accu.org/index.php/articles/">All</a>

                     &gt;                         <a href="https://members.accu.org/index.php/articles/c13/">Topics</a>

                     &gt;                         <a href="https://members.accu.org/index.php/articles/c65/">Programming</a>
<br />

                                            <a href="https://members.accu.org/index.php/articles/">All</a>

                     &gt;                         <a href="https://members.accu.org/index.php/articles/c76/">Journals</a>

                     &gt;                         <a href="https://members.accu.org/index.php/articles/c77/">CVu</a>

                     &gt;                         <a href="https://members.accu.org/index.php/articles/c126/">123</a>
<br />

                                            <a href="https://members.accu.org/index.php/articles/c65-126/">Any of these categories</a>

                    -                        <a href="https://members.accu.org/index.php/articles/c65+126/">All of these categories</a>
<br />
</td>
   </tr>
   </tbody>
</table>




<div class="xar-error">
   <p>
 <strong>Note:</strong> when you create a new publication type,
the articles module will automatically use the templates
<em>user-display-[publicationtype].xt</em>
and <em>user-summary-[publicationtype].xt</em>.
If those templates do not exist when you try to preview or display a new article,
you'll get this warning :-)  Please place your own templates in themes/<em>yourtheme</em>/modules/articles . The templates will get the extension .xt there. </p>
</div>
<div class="xar-norm xar-standard-box-padding">
   <h1><strong>Title:</strong>&nbsp;Building the Hexes</h1>
<p><strong>Author:</strong>&nbsp;</p>
<p>
<strong>Date:</strong> 03 May 2000 13:15:36 +01:00 or Wed, 03 May 2000 13:15:36 +01:00</p>
<p><strong>Summary:</strong>&nbsp;</p>
<p><strong>Body:</strong>&nbsp;<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e18" id="d0e18"></a></h2>
</div>
<p>The board is composed of hexes which, in turn, are composed of
colored areas. The design of the hex will be considered first (this
includes the colored areas) and then the construction of hexes into
a board will be considered in the next article.</p>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e22" id="d0e22"></a>Hex
Requirements</h2>
</div>
<div class="informaltable">
<table width="100%" border="0">
&lt;colgroup&gt;
&lt;col&gt;&lt;/colgroup&gt;
&lt;tbody&gt;
<tr>
<td align="center">
<pre class="literallayout">
/|\     / \
/ | \   /   \
/  L  \ /\   /\
|  | |  |  \ /  |
|--| |--|   X   |
|  | |  |  / \  |
\  T  / \/   \/
\ | /   \   /
\|/\   /\ /
|  \ /  |
|   Y   |
|   |   |
\  |  /
\ | /
\|/
</pre></td>
</tr>
<tr>
<td align="center"><span class="bold"><b>Figure 1</b></span></td>
</tr>
&lt;/tbody&gt;
</table>
</div>
<p>As shown above, the Swamp game board is composed of hexes. In an
effort to make it easy for Francis to print diagrams of the hexes,
the article will use the notation above to show hexes. Each hex is
broken down into 3, 4, or 5 colored areas. A hex with 5 colored
areas is in the top left of Figure 1. A hex with 4 colored areas is
in the top right of Figure 1. A hex with 3 colored areas is in the
bottom center of Figure 1. One of the first requirements of the hex
design will be to print out hexes in this fashion so that board
diagrams can be printed for this article, but also so that users
without graphical screens can still play the game.</p>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 1:</span></dt>
<dd>
<p>Display hexes as shown in Figure 1 (for North External
orientation, which is described below).</p>
</dd>
<dt><span class="term">Requirement 2:</span></dt>
<dd>
<p>Hexes may have 3, 4, or 5 colored areas.</p>
</dd>
</dl>
</div>
<p>In addition it will be necessary to show what color is in each
region (don't worry, graphics guys, this is C++, so we can modify
the classes to handle wonderful graphics when the time comes). The
possible colors are brown (B) which represents dirt, green (G)
which represents lily pads, and blue (U) which represents water.
Placing these colors into Figure 1 at random, yields Figure 2.</p>
<div class="informaltable">
<table width="100%" border="0">
&lt;colgroup&gt;
&lt;col&gt;&lt;/colgroup&gt;
&lt;tbody&gt;
<tr>
<td align="center">
<pre class="literallayout">
/|\     /B\
/G|B\   /   \
/  L  \ /\   /\
|  | |  |  \ /  |
|--|B|--|G  X  U|
|  | |  |  / \  |
\  T  /B\/   \/
\B|G/   \   /
\|/\   /\B/
|  \ /  |
|   Y   |
|   |   |
\  |  /
\B|G/
\|/
</pre></td>
</tr>
<tr>
<td align="center"><span class="bold"><b>Figure 2</b></span></td>
</tr>
&lt;/tbody&gt;
</table>
</div>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 3:</span></dt>
<dd>
<p>Only the colors Brown, Green, and Blue are used in the colored
areas of the hexes.</p>
</dd>
<dt><span class="term">Requirement 4:</span></dt>
<dd>
<p>Colors should be displayed in hexes as shown in Figure 2.</p>
</dd>
</dl>
</div>
<p>Each of the colored sections covers only a portion of a hex. The
position of the colored portion of a hex relative to the rest of
the hex needs to be established. This information will be necessary
so that when hexes are placed together it is possible to determine
which colored areas are adjacent to one another. In the current
implementation of a hex, a colored area can occupy 1/3 of a side,
&frac12; of a side, an entire side, or the center.</p>
<p>In order to establish where the colored area is located on a
hex, it is necessary to know how many possible colored areas exist
and what portion of any given side contains that colored area. To
allow discussion to continue, consider Figure 3 which shows the
colored portion of each hex labeled with a number.</p>
<div class="informaltable">
<table width="100%" border="0">
&lt;colgroup&gt;
&lt;col&gt;&lt;/colgroup&gt;
&lt;tbody&gt;
<tr>
<td align="center">
<pre class="literallayout">
/|\     /1\
/1|2\   /   \
/  L  \ /\   /\
|  | |  |  \ /  |
|--|5|--|4  X  2|
|  | |  |  / \  |
\  T  /1\/   \/
\4|3/   \   /
\|/\   /\3/
|  \ /  |
|   Y   |
|   |   |
\  |  /
\3|2/
\|/
</pre></td>
</tr>
<tr>
<td align="center"><span class="bold"><b>Figure 3</b></span></td>
</tr>
&lt;/tbody&gt;
</table>
</div>
<p>It is also necessary to establish some sort of internal
orientation for the hex. This is necessary because the hex can be
rotated to any direction when placed into the game board, but
should have some internal absolute reckoning for determining the
different parts of a hex.</p>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 5:</span></dt>
<dd>
<p>Each hex must have an internal and external orientation.</p>
</dd>
</dl>
</div>
<p>Because of my background in games like Dungeons and Dragons, I
default to compass directions. Thus, the sides of a hex would be
related to compass directions as shown in Figure 4.</p>
<div class="informaltable">
<table width="100%" border="0">
&lt;colgroup&gt;
&lt;col&gt;&lt;/colgroup&gt;
&lt;tbody&gt;
<tr>
<td align="center">
<pre class="literallayout">
/ \
NW /   \ NE
/     \
|       |
W |   N   | E
|       |
\     /
SW \   / SE
\ /
</pre></td>
</tr>
<tr>
<td align="center"><span class="bold"><b>Figure 4</b></span></td>
</tr>
&lt;/tbody&gt;
</table>
</div>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 6:</span></dt>
<dd>
<p>The sides of a hex are denoted (in internal orientation) by NW,
NE, E, SE, SW, and W as shown in Figure 4.</p>
</dd>
</dl>
</div>
<p>In addition the external orientation of this hex is denoted in
the center of Figure 4. Thus the hex as a whole is pointing North.
The corners of the hex are also associated with directions for
determining the external orientation. Thus, a hex with the N corner
equating to North on the board would have a North external
orientation. A hex with the NE corner of the hex pointing toward
North on the board would have a NE external orientation.</p>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 7:</span></dt>
<dd>
<p>The corners of a hex are denoted (in external orientation) by N,
NE, SE, S, SW, and NW in keeping with the internal orientation
shown in Figure 4.</p>
</dd>
<dt><span class="term">Requirement 8:</span></dt>
<dd>
<p>The hex must have a way of storing the state of the external
orientation.</p>
</dd>
</dl>
</div>
<p>While this particular choice of nomenclature is not strictly
necessary for the implementation, it is going to be very important
to be able to talk about the nature of a hex consistently
throughout the rest of this article and those to follow. Thus the
need to make this nomenclature a requirement.</p>
<p>Now that we have an internal representation for the orientation
of a hex, it is possible to discuss the positions of the colored
areas. For this implementation of the hex, the division of a hex
into colored areas is fixed (this is to say that every 3 color hex
has the 3 colors in the same relative positions).</p>
<p>As an example, colored area 2 in a hex with 3 color sections has
1/3 of the NE side, all of the E side, and all of the SE side.</p>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 9:</span></dt>
<dd>
<p>The position of a colored area is denoted by the portion of a
hex side (using internal orientation nomenclature) that is within
the colored area.</p>
</dd>
</dl>
</div>
<p>Since the hexes will be side-by-side on the board, it is
important to say what color area is found on what portion of a
side. Thus, a hex needs to be able to return the colored portion
associated with a given portion of a side.</p>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 10:</span></dt>
<dd>
<p>The hex must return the color associated with a given portion of
a given side (identified using external orientation
nomenclature).</p>
</dd>
</dl>
</div>
<p>In order for the distribution of colored spaces to be properly
maintained, each type of hex must have an established ratio of
colors for the colored spaces. Putting the colors in BUG order
(Brown, Blue, Green), the ratios are shown in Table 1.</p>
<div class="table"><a name="d0e160" id="d0e160"></a>
<table summary="" border="1" cellspacing="0">
&lt;colgroup&gt;
&lt;col&gt;
&lt;col&gt;&lt;/colgroup&gt;
&lt;thead&gt;
<tr>
<th align="center">Hex Color Sections</th>
<th align="center">BUG Ratio</th>
</tr>
&lt;/thead&gt;
&lt;tbody&gt;
<tr>
<td align="center">5</td>
<td align="center">3:1:1</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">3:.5:.5</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">2:.5:.5</td>
</tr>
&lt;/tbody&gt;
</table>
<p class="title c2">Table 1. </p>
</div>
<div class="variablelist">
<dl>
<dt><span class="term">Requirement 11:</span></dt>
<dd>
<p>The Hex color sections should have the color ratios shown in
Table 1.</p>
</dd>
</dl>
</div>
<p>There are other requirements of the hex, but these requirements
will be addressed as other objects within the game are spelled out.
For now, this is a strong starting point from which to develop the
hex.</p>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e194" id="d0e194"></a>Hex
Design</h2>
</div>
<p>Now that the requirements for the hex have been completed, it is
time to consider how to design a C++ entity that will handle those
requirements. An initial observation is that there are three
variants on the hex (based on the number of colored sections), so
the hex class itself will be built upon by the hex3, hex4, and hex5
classes.</p>
<p>The first step is to identify the requirements which are common
to all types of hex, and incorporate those into the Hex parent
class. While the listing in Listing 1 actual shows an
implementation of the design, it is intended to capture all of the
design steps talked about here. The implementation of the class
<tt class="classname">Hex</tt> will almost undoubtedly change, but
it is worth showing as a listing to allow discussion without
excessive graphics.</p>
<p>All hexes will have an external orientation as described in
requirements 7 and 8. In Listing 1 this is accomplished with an
enumerated type. All hexes need to have a function allowing display
as described in requirement 1. In Listing 1 this is shown as the
virtual function, <tt class="function">draw_hex</tt>. All hexes
should have a number of colored areas which range between 3 and 5.
It seems inelegant to store the number of colored areas directly in
the hex. Hmmm&hellip;but wait, each hex HAS A set of colored areas.
It seems that it is going to be necessary to develop a colored area
object at this point.</p>
<div class="sidebar">
<p class="title c2">Listing 1: Partial definition of hex class</p>
<pre class="programlisting">
typedef enum external_orientation { 
  ENorth = 0, ENorthEast, ESouthEast, ESouth,
  ESouthWest, ENorthWest } EXTERNAL_ORIENTATION;
class hex {
private:
  EXTERNAL_ORIENTATION ext_face;
public:
  int virtual draw_hex();
};
</pre></div>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e214" id="d0e214"></a>OOPS! Color
Area Design</h2>
</div>
<p>The colored areas can only be one of three colors according to
requirement 3. This is handled, again, with an enumerated type as
shown in Listing 2. Requirement 4 describes that each color needs
to be printed using a single letter representation, so a function
needs to exist to perform this display, <tt class=
"function">draw_color</tt>. Each colored area touches sides (and/or
the center) of the hex. Thus, there needs to be a way to denote the
sides of the hex and this is given by requirement 6. Listing 2 has
another enumerated type to handle the sides of the hex.</p>
<p>Since it is possible that the color only extends along a portion
of the side, then the portion of the side along which the color
extends needs to be included as well. There are many different ways
to handle the storage of this data, but for now it will just be a
map as shown in Listing 2, <tt class="varname">sides_touched</tt>.
In keeping with requirement 10, it is necessary for the colored
area to determine if it is touching a certain portion of a given
side, so the function, <tt class="function">touching_side()</tt>,
is included in Listing 2.</p>
<p>The definition of the class is incomplete, but it encompasses
the requirements discussed so far and that is the intent. A more
complete version of the class will need to be developed at detailed
design.</p>
<div class="sidebar">
<p class="title c2">Listing 2: Loose definition of colored area
class</p>
<pre class="programlisting">
typedef enum hex_color { 
  Brown = 0, Green, Blue }HEX_COLOR;
Typedef enum hex_sides { 
  W_side = 0,
  NW_side,
  NE_side, E_side, SE_side, SW_side,
  Center_side } HEX_SIDES;
class colored_area {
private:
  HEX_COLOR color;
  std::map&lt;HEX_SIDES, float&gt; sides_touched;
public:
  int draw_color();
  boolean touching_side(HEX_SIDES side, float portion);
};
</pre></div>
<p>Now that the colored area is defined, it is possible to continue
on with the design of the hex.</p>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e239" id="d0e239"></a>Back to Hex
Design</h2>
</div>
<p>Since it is necessary for a hex to determine the color
associated with a given portion of a given side (requirement 10),
then it is necessary to add another function to the hex class. The
function, <tt class="function">get_color()</tt>, shown in Listing 3
handles this requirement.</p>
<p>It is not, however, possible to perform this function without
being able to take a side represented in external format and being
able to convert it to internal format. This process is handled by
<tt class="function">externtointern()</tt> and the reverse
<tt class="function">interntoextern()</tt>. Both of these functions
are shown in Listing 3 as well.</p>
<p>According to Requirement 11, it is necessary for the ratio of
colors within a hex to meet a specification. Thus, as colors are
assigned to the colored areas within a hex, these colors need to be
assigned in a regular way which adheres to the specification. Color
assignment within a hex is handled by the function <tt class=
"function">build_colors()</tt> which is a <tt class=
"literal">virtual</tt> function within the hex class. This means
that each derived hex needs to implement the function based on the
appropriate ratios.</p>
<div class="sidebar">
<p class="title c2">Listing 3: Loose definition of a hex</p>
<pre class="programlisting">
class hex {
private:
  EXTERNAL_ORIENTATION ext_face;
  int color_count;
  HEX_SIDES&amp; externtointern(HEX_SIDES side);
  HEX_SIDES&amp; interntoextern(HEX_SIDES side);
  boolean virtual build_colors();
public:
  int virtual draw_hex(); 
  colored_area&amp; virtual get_color(
      HEX_SIDES extern_side, float portion);
};
</pre></div>
<p>At this point it is possible to add the colored area class to
the hexes. Since the number of colored areas changes depending on
the type of hex, hexes which contain a colored area will have to be
derived from the hex class. This allows the appropriate number of
colored areas to be explicitly stored. An example of this type of
derivation is shown for a three color hex in Listing 4.</p>
<div class="sidebar">
<p class="title c2">Listing 4: Loose definition of a hex3</p>
<pre class="programlisting">
class hex3 : public hex {
private:
  colored_area colors[3];
  boolean build_colors();
public:
  int draw_hex();
  colored_area&amp; get_color(HEX_SIDES extern_side, 
              float portion);
};
</pre></div>
<p>At this point design (considering only what the hexes need of
themselves) has been started. The next step will be a detailed
design which fills out the loose definitions given in the listings
and generates algorithms for the functions which have been
conceived so far. I guess you know what is coming next&hellip;</p>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e277" id="d0e277"></a>Homework</h2>
</div>
<p>The homework for this issue is to flesh out the loose
definitions into full definitions (although not implementations,
yet, so don't get too hung up on whether a <tt class=
"classname">std::map</tt> function has sufficient performance to be
used) and generate the algorithms for the functions that have been
defined so far. Yes, the implementation of a hex will change (it
should be obvious, for example, that there will need to be an
indicator for whether a colored area is occupied by an animal), but
this will be an iterative development process.</p>
</div>
<div class="sect1" lang="en">
<div class="titlepage">
<h2><a name="d0e285" id="d0e285"></a>Footnote</h2>
</div>
<p>The ratio of colors within a board were determined after
extensive play testing of a wide variety of board configurations.
There has been no mathematical verification that these ratios
represent an optimal ratio, however, this configuration has done
quite well within play tests and &quot;feels&quot; right. Anyone want to
figure out how to mathematically calculate the ideal (most fair
from any starting position) ratio?</p>
</div>
</p>
<p><strong>Notes:</strong>&nbsp;</p>
<p><em>More fields may be available via dynamicdata ..</em></p>
</div>
</channel>
</rss>
