2D Graphics Board

Home * Programming * Graphics Programming * 2D Graphics Board



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
/* 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 Chess symbols in Unicode as scalable TrueTypefonts  :

=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

Coordinates

 * 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
=References=

Up one Level