Go to:  Davar site entry | Davar site contents | Davar site index | Go selection | Text bottom

Go  Presentation  Elements

In order to present information about Go on this web site it was necessary to have a set of images that could be used as elements for such presentation.  For quite a long time I was trying to find ready elements on the web, but couldn't get anything satisfactory.  Attempts to scan stone photos were not much of success either; besides stones themselves were only small part of what was needed.  Finally I turned for help to my children, and to my complete amazement my daughter Natalia virtually pulled out of a thin air the stone images that I needed so much (she was using Adobe PhotoShop).  I did a quick breakdown of Go board into 20 basic elements (only two of them were Black and White stones); and pretty soon she had completed the graphics design, and I could go into working on Go section pages.

It was quite obvious from the beginning that it would be necessary to "assemble" the required image from a set of basic elements.  Overlaying stone images on the board image might be another approach, but, since it is necessary to have images not only of basic boards, but also of different pieces of the board (for illustrations in Go texts), those background images themselves got to be "assembled" from smaller basic elements.  And once image "assembling" was anyway unavoidable, it made sense to use it as the only tool for building compound Go images.  (The method of image "assembly" from a set of basic elements is not quite compatible with a fancy feature of casting stone shadow, which had to be sacrificed in order to keep the number of base elements reasonably small.)

Entire Davar web site is designed for screen resolution of 800x600 pixels, which provides both good quality, and big enough images, being at the same time available on most systems.  Lower resolutions yield poor quality, while higher resolutions result in smaller images.  In view of that 800x600 pixels resolution looks to me like a "golden middle" between two extremes, and all pixel calculations for this web site are based on it. 

The size of the element (size of the stone) was determined initially for 13x13 Go board, which is a medium size between 19x19 and 9x9 boards.  Most of Go problems planned for presentation could fit into one corner of full board that is smaller than the size of 13x13 board.  With 13x13 board in mind the size of an element was chosen basing on the following considerations:

It's easy to calculate that 33 pixels is the maximum size satisfying all of the above conditions.  This is the basic element size for the medium (basic) set of elements to be used for presentation of 13x13 full board, 19x19 board corner (Go problems), and for illustrations in Go texts.  The names of the elements of basic set are referred as basic names (which means that names of other sets get derived from them).  Below is the summary of medium (basic) set size calculations.


   +------------  - Medium (basic) element size
   ¦     +------  - Medium (basic) border width
   ¦     ¦
   33*13+8*2=445  - 74.2% of total vertical size of 600
      ¦    ¦
      ¦    +----  - Number of borders
      +---------  - Number of elements
  

Go board can be broken into 16 basic elements as outlined below.  8 of them represent variations of empty grid line intersection points on the edge of the board (4 sides and 4 corners).  Remaining 8 elements represent variations of border pieces (source of imaginary light is supposed to be located above board top-left corner).  Border elements are not required by functionality, but serve to add a 3-dimensional flavor to the board image.  2 more pieces represent internal (center) elements — empty grid intersection and hosi points.  And finally, there are 2 elements for the stones (Black and White).  Each stone element can be placed into any position on the board — stone diameter is equal to the element size and whatever the grid lines of the element might be they are entirely closed by the stone.  All this sums up to 20 Go board elements with the use of which any Go board or position can be presented.


   *TL        *T        *TR     Contents (*):
      +----------------+
      ¦                ¦            E - Empty point (edge or center)
      ¦                ¦            R - bordeR element
      ¦                ¦
   *L ¦       *C       ¦ *R     Position:
      ¦                ¦
      ¦                ¦            T - Top    edge
      ¦                ¦            B - Bottom edge
      +----------------+            L - Left   edge
   *BL        *B        *BR         R - Right  edge
                                    C - Center

   8 edge   elements (4 sides + 4 corners)
   8 border elements (4 sides + 4 corners)

   EC - Empty Center
   HS - HoSi (empty only, center only)

   BS - Black Stone
   WS - White Stone
  

All elements are *.JPG images that can be used either as foreground, or as a background, depending on the specific need.  Foreground is a predominant usage simply because its specification is shorter (foreground is a default).  If it is necessary to mark an element by some symbol (there are examples at the bottom of this page), the element image is specified as a background, while the required symbol is a foreground.  This permits to avoid the necessity for specifically marked additional elements (such as marked stones, marked territory, or dame points) — the set of available symbols is more than sufficient to mark anything on the Go board.

In the process of working on Go content using the medium size elements for all three sizes of Go boards it became evident that it would be beneficial to have two additional sets of Go elements: small — for 19x19 board, and large — for 9x9 board.  The idea here was the same as one behind the design of the medium set — to achieve maximum possible filling of 75% of the vertical size of 800x600 pixels screen, while trying to minimize the necessity for vertical scrolling.  It is always possible, of course, to enforce resizing of the basic elements on the fly by the browser (by specifying required WIDTH and HEIGHT for the element image).  This simple approach, however, has two major drawbacks: it takes additional time for the browser to resize the elements, which slows page loading, and resultant images become somewhat fuzzy as most of the things done on the fly are often far from their best.  Those arguments were convincing for my daughter, and she had casted for me two additional sets of elements: small and large.

The small set of elements was designed to be used for presentation of 19x19 full board and for 19x19 board half.  Both the size and the names of the elements of small set were derived from those of medium (basic) set.  Small set names are those of the medium set names prefixed by S.  Below is the summary of small set size calculations.


   13 is 68.4% of 19
      33*0.684=22.6 - 23 is the most close odd integer (higher than actual)
       8*0.684= 5.5 -  6 is the most close higher integer

   +------------  - Small element size
   ¦     +------  - Small border width
   ¦     ¦
   23*19+6*2=449  - 74.8% of total vertical size of 600
      ¦    ¦
      ¦    +----  - Number of borders
      +---------  - Number of elements
  

The large set of elements was designed to be used for presentation of 9x9 board.  Both the size and the names of the elements of large set were derived from those of medium (basic) set.  Large set names are those of the medium set names prefixed by L.  Below is the summary of large set size calculations.


   13 is 144.4% of 9
      33*1.444=47.7 - 47 is the most close odd integer (lower than actual)
       8*1.444=11.6 - 11 is the most close lower integer

   +------------  - Large element size
   ¦    +-------  - Large border width
   ¦    ¦
   47*9+11*2=445  - 74.2% of total vertical size of 600
      ¦    ¦
      ¦    +----  - Number of borders
      +---------  - Number of elements
  

After some experimentation with the grid lines it became clear that it would be impossible to increase their thickness in proportion with the element size.  As everything else their thickness should be odd number of pixels, which means that it should go 1–3–5 for small-medium-large elements, but 3 pixels is already way too thick, to say nothing of 5 pixels.  So the width of grid lines was left to be one pixel for all three element sizes while hosi "radius" got incremented by 1 pixel for each board size increment.


        Small                Medium                  Large

          x                     x                      x
          x                     x                      x
          x                     x                      x
          x                     x                     xxx
          x                    xxx                   xxxxx
         xxx                  xxxxx                 xxxxxxx
   xxxxxxxxxxxxxxx       xxxxxxxxxxxxxxx        xxxxxxxxxxxxxxx
         xxx                  xxxxx                 xxxxxxx
          x                    xxx                   xxxxx
          x                     x                     xxx
          x                     x                      x
          x                     x                      x
          x                     x                      x

  

All three Go element sets are presented by a reference table each. You can view reference tables and download Go element sets for your own use.

Small size elements   – For 19x19 Go board and Go problems on half of full board size.
Medium size elements   – For 13x13 Go board, Go problems on quarter of full board size, and descriptive Go texts.
Large size elements   – For 9x9 Go board.

Go element files available for downloading are self-extracting ZIPs (converted to EXEcs using ZIP2EXE utility).  Their only executable part is ZIP self-extractor program (bundled with compressed data in one file).  To extract data files from the self-extracting ZIP place it into required directory and run it.  Data files will be extracted to the same directory after which the source file can be deleted.  You might, however, have a concern (and for a good reason) against running a downloaded executable on your computer.  If it is more preferable, you can extract data from those EXE files using PKUNZIP, WinZIP or WinRAR.

Below there are shown Go boards of all three sizes, each size being presented both as a table of separate elements and a single joined image.  Stones are marked with numbers, and several characteristic points of each board are marked with letters.  These images illustrate the way Go board gets assembled from image elements to form a contiguous image that can be easily manipulated by placing appropriate information into the cells of an array representing the compound image.



19x19  Go  Board  (Full  Size – 361  Points)

Table cell spacing for the composite image below is set to 1 pixel
(breaks the entire Go board into separate building elements).

Sorry,
Essential functionality of this page
depends on availability of JavaScript.
Your JavaScript is either disabled,
or not supported by your browser.
Please enable JavaScript
and [Reload] this page,
or use [Back] to exit.

Table cell spacing for the composite image below is set to 0 pixels
(all separate elements are joined together into contiguous image).




13x13  Go  Board  (about Half  Size – 169  Points)

Table cell spacing for the composite image below is set to 2 pixels
(breaks the entire Go board into separate building elements).


Table cell spacing for the composite image below is set to 0 pixels
(all separate elements are joined together into contiguous image).




9x9  Go  Board  (about Quarter  Size – 81  Points)

Table cell spacing for the composite image below is set to 3 pixels
(breaks the entire Go board into separate building elements).


Table cell spacing for the composite image below is set to 0 pixels
(all separate elements are joined together into contiguous image).



Three Go boards shown above have the same measurement size and different grid pitches only for the convenience of their presentation on computer screen; the real Go boards have different measurement sizes and the same grid pitch — one that matches the size of a Go stone.


Go to:  Davar site entry | Davar site contents | Davar site index | Go selection | Text top