Arduino Adafruit GFX Library Coordinate System

Displays, Pixels and the Adafruit GFX Graphics Library

When you purchase a TFT display,  the resolution of the display is expressed by the number of pixels that are displayed horizontally and the number of pixels displayed vertically.

In the context of a display used with your Arduino,  these pixels can be thought of a little squares that are told to display a color.   In fact, I often think of a pixel as a color container that I instruct to display a particular color.   Or I think of it as a piece of graph paper with squares that I fill in with colored pencils.

The Adafruit GFX Library is a freely available graphics library that makes it easy for us to tell these pixels what color we want them to display.

Don’t Have or Haven’t used a TFT Display?

I show how to wire and configure a low cost TFT Display HERE.  The article has a link to the library and a programming example.

You can buy the display I use in my tutorials at any of the following locations:

eBay      Amazon     Ali-Express

The Adafruit GFX Coordinate System

Each pixel is defined by two values that define the horizontal and vertical position of the pixel.  These values are passed to graphics procedures (or commands) in what is known as integer pairs.

Thus the two values 6, 11 described an actual pixel.

The first value defines the pixel’s X position and it identifies the horizontal position of the pixel and the second value defines the Y Position.

The illustration below shows how the position of the pixels are defined.  It is important to understand that number in both the X and Y directions start with 0.   Notice that the Upper Left Pixel is shown as 0, 0.   Also see that the Bottom Right Pixel 15,15.

Adafruit GFX Coordinates

If the display we had were different,  the bottom right value would change.  The display below is larger.   Notice how its Bottom Right Value is 127, 63.

Pixel Width and Height3Pixel Coordinates are Integers that Define Space

A pixel is not point on a number line.  Instead, a pixel contains space and the graphics routines we use tell that space to display a color.

This is important to understand,  because if affects how a display creates lines, curves and how the math that we may use to find the middle of line or an area in our display.

Pixels in the Exact Middle

Lets assume that we want to light a pixel in the exact middle of a 16 x 16 display.   Because we start our numbering with 0,0, we might decide that the pixel we want to address is 7,7.    The illustration below shows that pixel 7,7 is not the exact middle and that there is no pixel that represents the exact middle.

Adafruit GFX Coordinate Exact Middle

Pixels and Lines

When define a line,  we select and X and Y starting point and we select an X and Y ending point.    The math that allows us to plot the pixels to fall on this line can yield fractional values.   Because pixels are integers,  the graphics routine has to convert them to the nearest integer value.  This results in jagged lines like the one illustrated below:

Adafruit GFX Coordinate Lines


In other words, depending on what is we’re drawing, we get an illusion of a line.   This is one of the reasons that pixel size, pitch and resolution are important when assessing the suitability of a display.  Very generally speaking,  the smaller the pixel and the higher the resolution,  the more realistic the display will look.

Beyond that, using bitmaps that were generated with powerful anti-aliasing and dithering algorithms may be necessary.