2D+Graphics+Board

toc
 * Home * Programming * Graphics Programming * 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.
 * 2D Graphics Board**,

=Screenshots=

Mac Hack

 * [[image:machackdisplay02.jpg width="443" link="http://ljkrakauer.com/LJK/60s/resign.htm"]] ||
 * Mac Hack, DEC 340 display, 1968 ||

GNU Chess

 * [[image:517px-Xboard_4.2.7_on_KDE_4.2.2_and_Fedora_10.png link="https://en.wikipedia.org/wiki/XBoard"]] ||
 * GNU Chess on XBoard ||

MChess

 * [[image:mchess35.gif link="http://www.schachcomputer.info/forum/showthread.php?t=3531"]] ||
 * M-Chess Pro 3.5 (1993) ||

IsiChess

 * [[image:IsiChess.jpg]] ||
 * IsiChess 2D board with [|vector graphics] ||

 =Drawing Pieces=

2D Vector Graphics
code format="cpp" /* 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} };
 * [[image: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], 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 : ||

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; } code

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 [|TrueType][|fonts]  :

=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= > [|Vector graphics from Wikipedia] > [|Raster graphics from Wikipedia]
 * [|2D computer graphics from Wikipedia]
 * [|Chess art] by Maurizio Monge » Pieces, XBoard
 * [|GitHub - oakmac/chessboardjs: JavaScript chessboard] » JavaScript

[|Coordinates]
> [|Cartesian coordinate system] > [|Curvilinear coordinates] > [|Reflection (mathematics)] > [|Rotation (mathematics)] > [|Rotation matrix] > [|Transformation matrix] > [|Translation (geometry)]
 * [|Coordinate system from Wikipedia]
 * [|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]

[|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
include page="Graphic and Widgets to include" =References= =What links here?= include page="2D Graphics Board" component="backlinks" limit="40"
 * Up one Level**