Difference between revisions of "2D Graphics Board"

From Chessprogramming wiki
Jump to: navigation, search
(Created page with "'''Home * Programming * Graphics Programming * 2D Graphics Board''' File:machackdisplay02.jpg|border|right|thumb| Mac Hack [[Lawrence J. Krakauer#DEC3...")
 
Line 119: Line 119:
 
<span id="Unicode"></span>
 
<span id="Unicode"></span>
 
==Unicode==  
 
==Unicode==  
An alternative technique for piece drawing is the use of [https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode Chess symbols] in [https://en.wikipedia.org/wiki/Unicode Unicode] as scalable [https://en.wikipedia.org/wiki/TrueType TrueType][https://en.wikipedia.org/wiki/Font fonts] <ref>[http://www.talkchess.com/forum/viewtopic.php?t=38318 Unicode values for chessmen] by [[Steven Edwards]], [[CCC]], March 07, 2011</ref> <ref>[http://www.alanwood.net/unicode/miscellaneous_symbols.html Miscellaneous Symbols – Test for Unicode support in Web browsers]</ref> <ref>[https://en.wikipedia.org/wiki/Unicode Unicode] representations of [https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode Chess symbols] in two [https://en.wikipedia.org/wiki/Font fonts] ([https://en.wikipedia.org/wiki/Arial_Unicode_MS Arial Unicode MS] and [https://en.wikipedia.org/wiki/Tahoma_%28typeface%29 Tahoma]) by [https://en.wikipedia.org/wiki/User:Monedula Monedula],  [https://en.wikipedia.org/wiki/Wikimedia_Commons Wikimedia Commons]</ref>:
+
An alternative technique for piece drawing is the use of [https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode#Chessboard_using_Unicode_symbols Symbols] in [https://en.wikipedia.org/wiki/Unicode Unicode] as scalable [https://en.wikipedia.org/wiki/TrueType TrueType][https://en.wikipedia.org/wiki/Font fonts] <ref>[http://www.talkchess.com/forum/viewtopic.php?t=38318 Unicode values for chessmen] by [[Steven Edwards]], [[CCC]], March 07, 2011</ref>.
[[FILE:Chess symbols.PNG|none|border|text-bottom|link=https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode]]
+
 
 +
{| style="text-align:center;border-spacing:0pt;font-family:'Arial Unicode MS'; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 0pt"
 +
|-
 +
| style="width:12pt" | 8
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 1pt" | <span style="font-size:150%;">♜</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♞</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" | <span style="font-size:150%;">♝</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♛</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" | <span style="font-size:150%;">♚</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♝</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt" | <span style="font-size:150%;"></span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 1pt 1pt 0pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♜</span>
 +
|-
 +
| style="width:12pt" | 7
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" bgcolor="silver" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♟</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" | <span style="font-size:150%;">♟</span>
 +
|-
 +
| style="width:12pt" | 6
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" | <span style="font-size:150%;"><br></span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" bgcolor="silver" |
 +
|-
 +
| style="width:12pt" | 5
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" bgcolor="silver" | <span style="font-size:150%;"><br></span>
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver"|
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver"|
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" |
 +
|-
 +
| style="width:12pt" | 4
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" | <span style="font-size:150%;"><br></span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver" |
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" bgcolor="silver" |
 +
|-
 +
| style="width:12pt" | 3
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" bgcolor="silver" | <span style="font-size:150%;"><br></span>
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver"|
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver"|
 +
| style="width:24pt; height:24pt;" |
 +
| style="width:24pt; height:24pt;" bgcolor="silver"|
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" |
 +
|-
 +
| style="width:12pt" | 2
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" bgcolor="silver" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt;" | <span style="font-size:150%;">♙</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♙</span>
 +
|-
 +
| style="width:12pt" | 1
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 1pt" bgcolor="silver" | <span style="font-size:150%;">♖</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" | <span style="font-size:150%;">♘</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♗</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" | <span style="font-size:150%;">♕</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♔</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" | <span style="font-size:150%;">♗</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt" bgcolor="silver" | <span style="font-size:150%;">♘</span>
 +
| style="width:24pt; height:24pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 1pt 0pt" | <span style="font-size:150%;">♖</span>
 +
|-
 +
|
 +
| a
 +
| b
 +
| c
 +
| d
 +
| e
 +
| f
 +
| g
 +
| h
 +
|}
  
 
=See also=  
 
=See also=  

Revision as of 10:29, 14 March 2021

Home * Programming * Graphics Programming * 2D Graphics Board

Mac Hack display [1] [2] [3]

2D Graphics Board,
a 2D graphics image of a chessboard and the pieces of a chess position on a computer display, either fullscreen or board window of a chess GUI, or printer, similar to a chess diagram in print media. A 2D board window should be isotropic and quadratic, with all squares of same size.

Screenshots

GNU Chess

Xboard 4.2.7 on KDE 4.2.2 and Fedora 10.png

GNU Chess on XBoard [4]

MChess

Mchess35.gif

M-Chess Pro 3.5 (1993) [5]

IsiChess

IsiChess.jpg

IsiChess 2D board with vector graphics

Drawing Pieces

2D Vector Graphics

IsiKnight.JPG
The C++ code is based on the Windows Microsoft Foundation Class Library, a class extension of the Device Context of the Graphics Device Interface [6] , in conjunction with "handmade" polygons with coordinates in a x- and y-range of ±16 (positive values right and down), is used in IsiChess to apply vector graphics to draw the pieces in the board window or as figurine notation. For each piece an array of connected lines is declared, the first one a closed polygon, which is filled by the piece color [7] :
/* Piece Coordinates */
static POINT KnightPoint0[] = {
   { 10, 12},{ 11,  2},{ 10, -3},{  8, -6},
   {  6, -8},{  4, -9},{  1,-11},{  0,-12},
   { -1,-11},{ -2,-11},{ -3,-12},{ -3,-10},
   { -5, -8},{ -6, -6},{ -8,  0},{-10,  2},
   {-10,  4},{ -8,  6},{ -6,  5},{ -5,  4},
   { -4,  2},{ -2,  1},{ -1,  0},{  0, -2},
   { -1,  0},{ -1,  2},{ -2,  4},{ -6,  8},
   { -8, 12},{ 10, 12}
};

static POINT KnightPoint1[] = { { -3, -7},{ -4, -6} };
static POINT KnightPoint2[] = { { -8,  2},{ -9,  3} };

static POINT BishopPoint0[] = {
...

struct PIECEPOLY {
   unsigned int nPoints;
   const POINT *Points;
};

static PIECEPOLY KnightPoly[] = {
   {sizeof (KnightPoint0) / sizeof (KnightPoint0[0]), KnightPoint0},
   {sizeof (KnightPoint1) / sizeof (KnightPoint1[0]), KnightPoint1},
   {sizeof (KnightPoint2) / sizeof (KnightPoint2[0]), KnightPoint2}
};
...

struct PIECEIMAGE {
   int nPolys;
   PIECEPOLY *Poly;
};

static PIECEIMAGE PieceImage[] = {
   {0,  NULL},
   {sizeof (PawnPoly)   / sizeof (PawnPoly  [0]),  PawnPoly},
   {sizeof (BishopPoly) / sizeof (BishopPoly[0]),  BishopPoly},
   {sizeof (KnightPoly) / sizeof (KnightPoly[0]),  KnightPoly},
   {sizeof (RookPoly)   / sizeof (RookPoly  [0]),  RookPoly},
   {sizeof (KingPoly)   / sizeof (KingPoly  [0]),  KingPoly},
   {sizeof (QueenPoly)  / sizeof (QueenPoly [0]),  QueenPoly},
   {0,  NULL},
};

/* Drawing implemented as extension of Windows MFC Device Context Class CDC */
void CIsiDC::drawPiece(const CRect &r, int piece) {
   drawPiece(r, piece, m_sPieceColor[piece&1], m_sPieceBorderColor[piece&1]);
}

void CIsiDC::drawPiece(const CRect &r, int piece, COLORREF piececolor, COLORREF pencolor) {
   CPen pen(PS_SOLID, 1, pencolor);
   CBrush brush(piececolor);
   CPen* pOldPen = SelectObject(&pen);
   CBrush* pOldBrush = SelectObject(&brush);

   PIECEIMAGE *pim = PieceImage + (piece >> 1);
   int i; PIECEPOLY  *p;
   for (i=0, p = pim->Poly; i < pim->nPolys; ++i, ++p) {
      POINT points[64];
      transformPoints (points, p->Points, p->nPoints, r);
      if (i == 0) { /* closed polygon */
         BeginPath();
         Polyline(points, p->nPoints);
         EndPath();
         FillPath();
      }
      Polyline(points, p->nPoints);
   }
   SelectObject(pOldBrush);
   SelectObject(pOldPen);
}

void CIsiDC::transformPoints (POINT* target, const POINT* source, int nPoints, const CRect &r) {
   int width = r.Width();
   int height = r.Height();
   CPoint center = r.CenterPoint();
   while (nPoints--)
      *target++ = transfrom (*source++, width, height, 32, center);
}

POINT CIsiDC::transfrom (const POINT &c, int scalx, int scaly, int qxy, const POINT &trans) {
   return CPoint((c.x*scalx)/qxy, (c.y*scaly)/qxy) + trans;
}

Bitmaps

A more common way is to display pieces in form of bitmaps or pixmaps, small images of pieces, painted with an external program such as GIMP, Paint etc., stored as Raster graphics in an external file or resource format, such as Portable Network Graphics [8] or Windows BMP file format, which may be used in conjunction with Bit blit for scaling.

Unicode

An alternative technique for piece drawing is the use of Symbols in Unicode as scalable TrueTypefonts [9].

8
7
6
5
4
3
2
1
a b c d e f g h

See also

Publications

Forum Posts

External Links

Coordinates

Cartesian coordinate system
Curvilinear coordinates
Reflection (mathematics)
Rotation (mathematics)
Rotation matrix
Transformation matrix
Translation (geometry)

Geometric primitives

Toolkits, Libraries and APIs

Direct2D from Wikipedia
Direct3D from Wikipedia
DirectDraw from Wikipedia
DirectDraw Surface from Wikipedia
CDC Class - Device Context, Microsoft Foundation Class Library, MSDN
gtkmm from Wikipedia
Gtk Sharp from Wikipedia
lib-gwt-svg « vectomatic
vectomatic - standard dynamic 2D graphics in web browsers - Google Project Hosting
Graphics Programming - Introduction to OpenGL (pdf)
Comparison of OpenGL and Direct3D from Wikipedia
X11.app (XQuartz) from Wikipedia » OS X

References

Up one Level