Pixels are basic graphic elements that make up almost every computer graphic.

Published on 12/06/2015, updated on 03/25/2019

Let's start with the basis of every computer graphic: the pixel!
These are pictures elements. In the English-speaking region, however, pictures are often abbreviated - pics, or, stylised, pix. From this follows: pix elements - or, combined, pixel!

Now that we know why pixels are called pixels, we turn more precisely to the meaning of a pixel. A pixel is a single element within a two-dimensional matrix - a table of rows and columns. A single pixel usually contains color information (but not necessarily limited to this) and indirectly a (virtual) position via the matrix.

The following diagram shows how this was once again the case with the dimensions:

However, the axis labeling is variable - so it does not have to be done as illustrated. The labeling used is only a common interpretation. The following applies within this article:

  • x = 0 is left and moves to the right as x increases
  • y = 0 is up and moves downwards with rising y
  • z is NOT used within this article.

The number of dimensions determines decisively in which directions information can be stored. A single dimension is a ray of numbers on which you can move back and forth and which has - more or less - fixed position units.

Using this picture from Super Mario, I illustrate a pixel matrix of 16×16 pixels. So just by arranging certain colors within this grid, the image of the most famous plumber in the world is created.

It should be emphasized further: the image only results from the use of the correct matrix size, since the individual pixel only contains the color information. If we were to draw this image incorrectly in a matrix of 12×16 pixels, the result would be a relatively broken image:

p denotes the position within the underlying data structure.

So if you compare p between the two images, you will notice that the same color will be found in identical values of p. Since the computer cannot store image data in two-dimensional form, but only in one-dimensional form, it needs a definition of how the data should be projected to draw.

Images that are created with the help of dimension specifications can be projected into other representations! So it is also possible to display three-dimensional graphics on our two-dimensional screens - and the computer can also create a one-dimensional representation from an n-dimensional representation, with which it works itself.

The following formula(s) can be used to convert a memory address into coordinates:

y = floor(p / xRes)
x = p % xRes

floor is a function that always rounds off a value - or truncates any decimal digits that appear (depending on the data type used).
% stands for the modulo operator that specifies the division remainder.
xRes stands here for the horizontal resolution - in the case of Mario 16 (pixels).

The following formula can be used to convert a coordinate into a position:

p = (y * xRes) + x

Because of this native representation (i.e. "the representation in which the computer works"), p is a kind of offset that can easily be converted into a memory address in conjunction with a data type.

So for the computer, Mario actually looks something like this:

Since the computer is a computer, it cannot do much with color names. The computer works internally with numbers - so also the colors are represented as numbers. But there are innumerable variations of representation and interpretation. The conversion takes place by means of the so-called pixel formats.

Please note:
The character Super Mario is in character and representation intellectual property of the company Nintendo and protected worldwide in many countries accordingly.
The graphic was used for illustrative and educational purposes in the sense of Fair Use.


add a comment

Your comment may not be displayed immediately and will be moderated for spam prevention reasons.