Changes

Jump to: navigation, search

2D Graphics Board

12,410 bytes added, 17:23, 26 May 2018
Created page with "'''Home * Programming * Graphics Programming * 2D Graphics Board''' File:machackdisplay02.jpg|border|right|thumb| Mac Hack [[Lawrence J. Krakauer#DEC3..."
'''[[Main Page|Home]] * [[Programming]] * [[Graphics Programming]] * 2D Graphics Board'''

[[File:machackdisplay02.jpg|border|right|thumb| Mac Hack [[Lawrence J. Krakauer#DEC340|display]] <ref>[http://ljkrakauer.com/LJK/60s/resign.htm I resign] by [[Lawrence J. Krakauer]]</ref> <ref>[http://ljkrakauer.com/LJK/60s/chess1.htm Chess stories] by [[Lawrence J. Krakauer]]</ref> <ref>see also [http://projects.csail.mit.edu/video/history/aifilms/63-chess.mp4 63-chess.mp4] hosted by [https://www.csail.mit.edu/ MIT CSAIL]</ref>]]

'''2D Graphics Board''',<br/>
a [https://en.wikipedia.org/wiki/2D_computer_graphics 2D graphics] image of a [[Chessboard|chessboard]] and the [[Pieces|pieces]] of a [[Chess Position|chess position]] on a [https://en.wikipedia.org/wiki/Computer_monitor computer display], either [https://en.wikipedia.org/wiki/Fullscreen fullscreen] or [[GUI#BoardWindow|board window]] of a chess [[GUI]], or [https://en.wikipedia.org/wiki/Printer_%28computing%29 printer], similar to a [[Chess Diagrams|chess diagram]] in print media. A 2D board window should be [https://en.wikipedia.org/wiki/Isotropy isotropic] and quadratic, with all squares of same size.

=Screenshots=
==[[GNU Chess]]==
[[FILE:Xboard 4.2.7 on KDE 4.2.2 and Fedora 10.png|none|border|text-bottom|640px]]
[[GNU Chess]] on [[XBoard]] <ref>[https://en.wikipedia.org/wiki/XBoard XBoard from Wikipedia]</ref>

==[[MChess]]==
[[FILE:mchess35.gif|none|border|text-bottom|640px|link=http://www.schachcomputer.info/forum/showthread.php?t=3531]]
[[MChess|M-Chess Pro 3.5]] (1993) <ref>[http://www.schachcomputer.info/forum/showthread.php?t=3531 Studie: Schachspielen mit ein 286er 12 MHz Laptop - Schachcomputer.info Community] by [[The Spacious Mind|Spacious Mind]], May 22, 2010 (German)</ref>

==[[IsiChess]]==
[[FILE:IsiChess.jpg|none|border|text-bottom|640px]]
[[IsiChess]] 2D board with [https://en.wikipedia.org/wiki/Vector_graphics vector graphics]

<span id="Drawing"></span>
=Drawing Pieces=
==2D Vector Graphics==
{| class="wikitable"
|-
| [[FILE:IsiKnight.JPG|none|border|text-bottom]]
| The [[Cpp|C++]] code is based on the [[Windows]] [https://en.wikipedia.org/wiki/Microsoft_Foundation_Class_Library Microsoft Foundation Class Library], a class extension of the [https://en.wikipedia.org/wiki/Graphics_Device_Interface#Technical_details Device Context] of the [https://en.wikipedia.org/wiki/Graphics_Device_Interface Graphics Device Interface] <ref>[http://msdn.microsoft.com/de-de/library/fxhhde73%28v=VS.100%29.aspx CDC Class - Device Context], [https://en.wikipedia.org/wiki/Microsoft_Foundation_Class_Library Microsoft Foundation Class Library], [https://en.wikipedia.org/wiki/Microsoft_Developer_Network MSDN]</ref> , in conjunction with "handmade" [https://en.wikipedia.org/wiki/Polygon polygons] with coordinates in a x- and y-range of ±16 (positive values right and down), is used in [[IsiChess]] to apply [https://en.wikipedia.org/wiki/Vector_graphics vector graphics] to draw the [[Pieces|pieces]] in the [[GUI#BoardWindow|board window]] or as [[Algebraic Chess Notation#FAN|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 <ref>Code by [[Gerd Isenberg]], written in about 2000</ref> :
|}
<pre>
/* 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;
}
</pre>

==Bitmaps==
A more common way is to display pieces in form of [https://en.wikipedia.org/wiki/Bitmap bitmaps] or pixmaps, small images of pieces, painted with an external program such as [https://en.wikipedia.org/wiki/GIMP GIMP], [https://en.wikipedia.org/wiki/Paint_%28software%29 Paint] etc., stored as [https://en.wikipedia.org/wiki/Raster_graphics Raster graphics] in an external file or resource format, such as [https://en.wikipedia.org/wiki/Portable_Network_Graphics Portable Network Graphics] <ref>[http://commons.wikimedia.org/wiki/File:Chess_bdl40.png File:Chess bdl40.png - Wikimedia Commons]</ref> or [[Windows]] [https://en.wikipedia.org/wiki/BMP_file_format BMP file format], which may be used in conjunction with [https://en.wikipedia.org/wiki/Bit_blit Bit blit] for [https://en.wikipedia.org/wiki/Image_scaling scaling].
<span id="Unicode"></span>
==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>:
[[FILE:Chess symbols.PNG|none|border|text-bottom|link=https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode]]

=See also=
* [[3D Graphics Board]]
* [[GPU]]
* [[Pieces]]

=Publications=
* [[Oliver Vornberger]] ('''2006'''). ''[http://www-lehre.inf.uos.de/%7Ecg/2006/skript/skript.html Computergrafik]''. [http://www-lehre.inf.uos.de/%7Ecg/2006/PDF/skript.pdf pdf] (German)
* [[Leen Ammeraal]] and [http://www.utdallas.edu/%7Ekzhang/ Kang Zhang] ('''2007'''). ''[http://home.planet.nl/%7Eammeraal/grjava2e.html Computer Graphics for Java Programmers, 2nd Edition]'', ISBN-13: 978-0-470-03160-5 / ISBN-10: 0-470-03160-3 by [http://eu.wiley.com/WileyCDA/Section/id-300022.html John Wiley]

=Forum Posts=
* [http://www.talkchess.com/forum/viewtopic.php?t=38318 Unicode values for chessmen] by [[Steven Edwards]], [[CCC]], March 07, 2011
* [http://www.talkchess.com/forum/viewtopic.php?t=57995 Piece graphics] by [[Harm Geert Muller]], [[CCC]], October 19, 2015 » [[XBoard]]
* [http://www.talkchess.com/forum/viewtopic.php?t=62315 MinGW AlphaBlend] by [[Harm Geert Muller]], [[CCC]], November 29, 2016 » [[WinBoard]], [[Windows]] <ref>[https://en.wikipedia.org/wiki/Alpha_compositing Alpha compositing from Wikipedia]</ref> <ref>[https://en.wikipedia.org/wiki/MinGW MinGW from Wikipedia]</ref>

=External Links=
* [https://en.wikipedia.org/wiki/2D_computer_graphics 2D computer graphics from Wikipedia]
* [https://en.wikipedia.org/wiki/Vector_graphics Vector graphics from Wikipedia]
* [https://en.wikipedia.org/wiki/Raster_graphics Raster graphics from Wikipedia]
* [https://github.com/oakmac/chessboardjs GitHub - oakmac/chessboardjs: JavaScript chessboard] » [[JavaScript]]
==[https://en.wikipedia.org/wiki/Coordinate_system Coordinates]==
* [https://en.wikipedia.org/wiki/Coordinate_system Coordinate system from Wikipedia]
: [https://en.wikipedia.org/wiki/Cartesian_coordinate_system Cartesian coordinate system]
: [https://en.wikipedia.org/wiki/Curvilinear_coordinates Curvilinear coordinates]
* [https://en.wikipedia.org/wiki/Coordinate_rotations_and_reflections Coordinate rotations and reflections from Wikipedia]
* [https://en.wikipedia.org/wiki/Euclidean_space Euclidean space from Wikipedia]
* [https://en.wikipedia.org/wiki/List_of_common_coordinate_transformations List of common coordinate transformations from Wikipedia]
* [https://en.wikipedia.org/wiki/Orthogonal_group Orthogonal group from Wikipedia]
* [https://en.wikipedia.org/wiki/Transformation_%28function%29 Transformation (function) from Wikipedia]
: [https://en.wikipedia.org/wiki/Reflection_%28mathematics%29 Reflection (mathematics)]
: [https://en.wikipedia.org/wiki/Rotation_%28mathematics%29 Rotation (mathematics)]
: [https://en.wikipedia.org/wiki/Rotation_matrix Rotation matrix]
: [https://en.wikipedia.org/wiki/Transformation_matrix Transformation matrix]
: [https://en.wikipedia.org/wiki/Translation_%28geometry%29 Translation (geometry)]
==[https://en.wikipedia.org/wiki/Geometric_primitive Geometric primitives]==
* [https://en.wikipedia.org/wiki/Arc_%28geometry%29 Arc (geometry) from Wikipedia]
* [https://en.wikipedia.org/wiki/B-spline B-spline from Wikipedia]
* [https://en.wikipedia.org/wiki/Bit_blit Bit blit from Wikipedia]
* [https://en.wikipedia.org/wiki/Bitmap Bitmap from Wikipedia]
* [https://en.wikipedia.org/wiki/B%C3%A9zier_curve Bézier curve from Wikipedia]
* [https://en.wikipedia.org/wiki/Circle Circle from Wikipedia]
* [https://en.wikipedia.org/wiki/Ellipse Ellipse from Wikipedia]
* [https://en.wikipedia.org/wiki/Line_segment Line segment from Wikipedia]
* [https://en.wikipedia.org/wiki/Image_scaling Image scaling from Wikipedia]
* [https://en.wikipedia.org/wiki/Pixel Pixel from Wikipedia]
* [https://en.wikipedia.org/wiki/Plane_%28geometry%29 Plane (geometry) from Wikipedia]
* [https://en.wikipedia.org/wiki/Polygon Polygon from Wikipedia]
* [https://en.wikipedia.org/wiki/Polygonal_chain Polygonal chain from Wikipedia]
* [https://en.wikipedia.org/wiki/Point_%28geometry%29 Point (geometry) from Wikipedia]
* [https://en.wikipedia.org/wiki/Point_in_polygon Point in polygon from Wikipedia]
* [https://en.wikipedia.org/wiki/Quadrilateral Quadrilateral from Wikipedia]
* [https://en.wikipedia.org/wiki/Rectangle Rectangle from Wikipedia]
* [https://en.wikipedia.org/wiki/Spline_%28mathematics%29 Spline (mathematics) from Wikipedia]
==Toolkits, Libraries and APIs==
{{Graphic and Widgets}}
=References=
<references />

'''[[Graphics Programming|Up one Level]]'''

Navigation menu