2D Graphics Board

Home * Programming * Graphics Programming * 2D Graphics Board

Mac Hack display

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

GNU Chess on XBoard

MChess

M-Chess Pro 3.5 (1993)

IsiChess

IsiChess 2D board with vector graphics

Drawing Pieces

2D Vector Graphics

The C++ code is based on the Windows Microsoft Foundation Class Library, a class extension of the Device Context of the Graphics Device Interface , 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  :

/* 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 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 .

8	♜	♞	♝	♛	♚	♝	♞	♜
7	♟	♟	♟	♟	♟	♟	♟	♟
6
5
4
3
2	♙	♙	♙	♙	♙	♙	♙	♙
1	♖	♘	♗	♕	♔	♗	♘	♖
	a	b	c	d	e	f	g	h

See also

• 3D Graphics Board
• GPU
• Pieces

Publications

• Oliver Vornberger (2006). Computergrafik. pdf (German)
• Leen Ammeraal and Kang Zhang (2007). Computer Graphics for Java Programmers, 2nd Edition, ISBN-13: 978-0-470-03160-5 / ISBN-10: 0-470-03160-3 by John Wiley

Forum Posts

• Unicode values for chessmen by Steven Edwards, CCC, March 07, 2011
• Piece graphics by Harm Geert Muller, CCC, October 19, 2015 » XBoard
• MinGW AlphaBlend by Harm Geert Muller, CCC, November 29, 2016 » WinBoard, Windows

External Links

• 2D computer graphics from Wikipedia
• Vector graphics from Wikipedia
• Raster graphics from Wikipedia
• GitHub - oakmac/chessboardjs: JavaScript chessboard  » JavaScript

• Coordinate system from Wikipedia

Cartesian coordinate system

Curvilinear coordinates

• Coordinate rotations and reflections from Wikipedia
• Euclidean space from Wikipedia
• List of common coordinate transformations from Wikipedia
• Orthogonal group from Wikipedia
• Transformation (function) from Wikipedia

Reflection (mathematics)

Rotation (mathematics)

Rotation matrix

Transformation matrix

Translation (geometry)

Geometric primitives

• Arc (geometry) from Wikipedia
• B-spline from Wikipedia
• Bit blit from Wikipedia
• Bitmap from Wikipedia
• Bézier curve from Wikipedia
• Circle from Wikipedia
• Ellipse from Wikipedia
• Line segment from Wikipedia
• Image scaling from Wikipedia
• Pixel from Wikipedia
• Plane (geometry) from Wikipedia
• Polygon from Wikipedia
• Polygonal chain from Wikipedia
• Point (geometry) from Wikipedia
• Point in polygon from Wikipedia
• Quadrilateral from Wikipedia
• Rectangle from Wikipedia
• Spline (mathematics) from Wikipedia

Toolkits, Libraries and APIs

• DirectX from Wikipedia » Windows

Direct2D from Wikipedia

Direct3D from Wikipedia

DirectDraw from Wikipedia

DirectDraw Surface from Wikipedia

• Fast Light Tool Kit (FLTK) from Wikipedia
• GDK / XLib from Wikipedia » Unix, Linux
• Graphics Device Interface from Wikipedia (GDI) » Windows

CDC Class - Device Context, Microsoft Foundation Class Library, MSDN

• GTK+ (GIMP Toolkit) from Wikipedia

gtkmm from Wikipedia

Gtk Sharp from Wikipedia

• Google Web Toolkit (GWT) from Wikipedia

lib-gwt-svg « vectomatic

vectomatic - standard dynamic 2D graphics in web browsers - Google Project Hosting

• List of widget toolkits from Wikipedia
• Motif (widget toolkit) from Wikipedia
• OpenGL from Wikipedia

Graphics Programming - Introduction to OpenGL (pdf)

Comparison of OpenGL and Direct3D from Wikipedia

• Quartz from Wikipedia » OS X
• QuickDraw from Wikipedia » OS X
• QT toolkit from Wikipedia
• S3 Texture Compression from Wikipedia
• Scalable Vector Graphics from Wikipedia
• Standard Widget Toolkit from Wikipedia » Java
• Swing from Wikipedia » Java
• Texture compression from Wikipedia
• Tk (framework) from Wikipedia
• Vector Graphics from Wikipedia
• Visual Component Library (VCL) from Wikipedia
• Widget toolkit from Wikipedia
• wxWidgets from Wikipedia
• X Window System (X11) from Wikipedia » Unix, Linux

X11.app (XQuartz) from Wikipedia » OS X

References

Up one Level