By Alex Hanson-White
http://www.alexhw.com
Last Updated: July 18, 2017
The information provided may be used for educational purposes as long as appropriate credit is given to the author.

Table of Contents

 

The Pixel Aesthetic / Paradigm?

This document serves as a place to put my observations related to pixel aesthetics. If you are already familiar with pixels, feel free to skip ahead to the next section.

The pixel is considered to be a square shaped block of colored light with equal sides and equal angles. These blocks are arranged side by side across a grid. Each coordinate on the grid represents a single pixel. The following image shows a grid illustrating how pixels are organized; each square represents one pixel.

(1) (2)

Each pixel unit on a display device involves the use of small red, green, and blue lights, also referred to as sub-pixels, and their structure can vary. The following image shows how the red, green, and blue lights (sub-pixels) are structured for a liquid-crystal display (LCD) and cathode ray tube (CRT).

(3) (4)

By altering the red, green, and blue values of these lights, the impression of color the pixel emits as a single unit will change. Additive color mixing of the red, green, and blue lights allows the addition of cyan, yellow, magenta, and white color to be observed in the pixel. Image (4) is an example of how these lights are organized on an LCD screen.

The grey R, G, and B rectangles in image (4) represent a red, green, and blue light for a single pixel. If an image is zoomed in, multiple pixels would be used to represent one pixel so that it gives the illusion of appearing larger on the screen. By changing the resolution of your computer monitor, you are affecting how many pixel units display a single pixel.

Position

Every pixel has a position, and the RGB values of the pixel will bring it either into focus or out of focus by creating more or less contrast with neighboring pixels. Two pixels that appear to dissolve an edge will appear bound together whereas two pixels that share a corner will appear linked. Bound pixels have a broad connection covering more surface area whereas linked pixels have a narrow connection. The images below show the two ways pixels connect with each other (edge and corner).

(5) (6)

Image (6) shows the center of side-bound pixels are closer together than the center of corner-linked pixels. The proximity with each other influences whether the connection feels tight or loose.

Formation

The square geometry of a pixel provides an orderly way to construct larger shapes. In principle, each side of the pixel sits flush against the side of another pixel and every corner of a pixel touches the corner of three other pixels. This allows up to eight pixels to surround one pixel, and how similar their r, g, and b values are will determine their cohesiveness as a group. These groups where pixels dissolve the edges between themselves will be referred to as pixel facets or faces.

Put simply, a pixel facet or face is a formation of space consisting of pixels with similar RGB values. It is appropriate to use the term facet rather than face when referring to a small group of pixels that lack any Laced pixels (this will be discussed later). A facet occurs when the sides of two or more pixels appear to encapsulate a single space. Side-bound pixels are the only type that can create pixel facets. Corner-linked pixels connect two spaces without forming a facet between them, and a single pixel without side-bound or corner-linked pixels will not form space with any other pixel and thus is facetless.

(7) (8)

In image (7), we have examples of a couple facets as well as a facetless pixel. A and B are true facets. If we take a look at facet B, it has a pixel that is corner-linked with A and C. C is facetless because it is a single pixel that does not emphasize a form greater than itself. Facet A has a pixel that is corner-linked with facet B.

It is also worth pointing out that facet B creates a shape that is concave. Concavity of a facet occurs when a corner or side points inwards. The rectangular shape is diminished when that happens. On the other hand, facet A and pixel C are convex (all the corners and sides point outwards), having a rectangular appearance.

Large pixel facets, more appropriately referred to as faces, are interpreted in a broader way that can avert attention away from the corners and pull attention towards the space the faces represent. The pixel face in image (8) is concaved even though the overall shape the face expresses appears convex like a circle. It is concaved because there are corners that point inwards.

*note to self: maybe figure 8 should be considered convex when referred to as a face and concave when referred to as a facet? This would help emphasize faces as being more generally viewed whereas facets are more precise?

Order

Pixel order occurs where side-bound or corner-linked pixels continue the same connection with consecutive pixels. Image (9) illustrates these two types of ordering and each type has two possible directions their order can be arranged. The two convex facets on the left of image (9) convey side-bound ordering, producing a horizontal and vertical arrangement of pixels. On the rightside of image (9) the two corner-linked orders result with diagonal arrangements.

(9) (10)

Linking multiple side-bound orders or binding multiple corner-linked orders will produce sub-orders that convey intermediate angles as shown in image (10). Sub-order A consists of two side-bound facets linked together via corner-linked pixels. Sub-order B consists of three side-bound facets linked together with corner-bound pixels. Notice how corner-linked pixels can also function as side-bound pixels. All the pixels of sub-order D are both side-bound and corner-linked (assuming the line continues indefinately).

All pixels of sub-orders A, B, C, and D are part of a facet, a characteristic that is not shared in E, F, and G. Sub-order E consists of two diagonal order of pixels bound together so as to create a facet between them. Sub-order F consists of three orders bound together resulting with two facets where they connect. Sub-order G consists of four orders bound together resulting with three facets.

As shown, sub-orders A, B, C, and D have their orders linked together (connected at the corners), whereas E, F, and G have their orders bound together (connected at the sides).

Direction

Pixel orders and sub-orders provide a way to convey lines. However, sub-orders are not completely straight. Observed from a distance sub-orders give the illusion of a straight line. Where pixel orders connect in a sub-order the line shifts slightly as illustrated in image (11). In this image, a dotted line is drawn from the center of each pixel to illustrate how the direction changes. Image (12) shows the averaged direction that is implied when observed from a distance.

(11) (12)

Exaggerating the shift in direction by changing the sub-ordering creates the impression of an angle in the line. Below is an example of how two sub-orders with very different directions connect together.

(13) (14)

Image (13) illustrates the directions involved per pixel via a dotted line through their center, whereas image (14) illustrates the directions averaged across the sub-orders. Changing the sub-ordering multiple ways result in a variety of shapes.

(15) (16)

A triangle and pentagon shape is illustrated in the images above. The perimeter of each shape consists of many sub-orders. The spaces the sub-orders enclose in image (16) have been filled in, resulting with large pixel faces. Using the term face versus using the term facet helps to differentiate between pixels that encapsulate space from pixels that do not. The sub-orders in image (16) may be more difficult to see, but they can be interpreted along the edges of each pixel face.

Sub-orders that gradually change will result with lines that appear to curve as illustrated in the image below. Can you identify the different types of sub-orders in these images?

(17) (18)

Value

Adjusting the RGB values of a pixel affects how much light gets emitted from the sub-pixels. When all three sub-pixels are set to their maximum value, the pixel will appear white due to additive blending. When all the values are set to zero, no light will be emitted and thus the pixel will appear black. Image (19) illustrates these cases, along with a pixel that has sub-pixels set at fifty percent. In this case, the pixel would appear grey. Similar to how pixel orders have sub-orders that blend multiple orders together to produce intermediate angles, a grey acts like an intermediary value between black and white.

(19) (20)

Intermediate values can transition more or less drastically, just like sub-orders would when angling or curving a line. This allows the value to step up or down to create a sharp or smooth change. Image (20) illustrates how the transition between black and white is quicker for A than for B; A uses one intermediate value whereas B uses three. Since B provides a more gradual change between black and white, the transition feels smoother than A. C and D show the same transition using sub-orders. C has a sharper change whereas D is smoother because D utilizes more intermediate orders (sub-orders).

Ratio

A pixel that has its values set at fifty percent will appear to have a balance of black and white. If the values are raised, the pixel will appear to be more white than black. If instead of being raised the values are lowered, then the pixel will appear to be more black than white. This ratio between black and white, between one side and its' opposite side can also be found in sub-orders.

Pixel orders can either consist of side-bound pixels or corner-linked pixels as was illustrated in image (9) and sub-ordering is the result of linking or binding these orders with each other. Each sub-order has a ratio of side-bound pixels to corner-linked pixels. Image (21) illustrates the side-bound order represented as white and the corner-linked order represented as black. By adjusting the ratio of side-bound pixels to corner-linked pixels in the sub-ordering they reveal a gradation of orders between the white and black (side versus corner).

(21)

The order on the left is one-hundred percent side-bound and the order on the right is one-hundred percent corner-linked. By alternating between side-bound and corner-linked at different rates/frequencies they produce the impression of something in-between, a blur that appears to combine the two into one. The two orders become part of one sub-order. Another way of describing it is the side-bound order has higher frequency towards the left, and transitions to a lower frequency on the right. Like-wise, the corner-linked order has higher frequency on the right and transitions to a lower frequency on the left.

Weight

By overlapping the order of pixels, it provides thickness. Image (22) shows what happens when two sub-orders are combined. When combined together they produce a long facet. Line A is the original, and B is a section of it. C and D are the two sub-orders that makeup B. Notice how the pixels become linked and bound in more than one way. Assuming the line extends indefinately, each pixel is bound twice and linked once, or bound twice and linked twice in this case. The more bound and linked a pixel becomes, the more laced it is. We use this term to describe the pixels that fill a space. A completely laced pixel is a pixel that is linked and bound on all sides and corners.

(22) (23)

Image (23) displays a couple more examples of thicker lines/shapes. Line A is stacked three times to produce B. Line C is also stacked together to produce D. Notice that B and D have become a set of faces due to their edges (sub-orders) encapsulating an area of space. The grey area within B and D represent pixels that are both linked and bound in more than one way. These are referred to as the laced pixels and they are differentiated from the pixels on the perimeter that have a specific order. Laced pixels are described more in the next section.

Space

Each pixel occupies a space on the grid. As mentioned in the previous section, when pixels of similar value neighbor each other and become linked and bound in more than one direction, each pixel becomes locked together as one larger space. These laced pixels create broad flat areas of color. Where laced pixels of one space border with laced pixels of another space, value changes at the perimeter reveal the pixel orders and sub-orders.

(24) (25)

In image (24) and (25) the linked, bound, and laced pixels of spaces are illustrated. The white and black pixels denote the side-bound and corner-linked sub-orders along the perimeter of the faces, and the grey denote the laced pixels within the faces. In image (24), two shapes can be seen. In image (25), the negative space can also be considered a shape.

(26) (27)

When the spaces are combined, as illustrated in image (26), notice that the contours of the shapes act like walls that prevent attributes from one shape mixing with attributes of another shape. The attributes of each shape would be its R,G, and B values of the pixels that construct it. Image (27) shows the bound, linked, and laced pixels of a more complicated shape that incorporates many different sub-orders and weight. The next section will show how the use of intermediate values can be used to soften these walls- allowing spaces to bleed into each other.

Depth

Spaces that appear to overlap with other spaces emit an intermediate value/color where those spaces overlap. Below in image (28), the white space A and black space B overlap to create the perception of a third space C. Three values (white, grey, and black) can be seen, however, the grey is simply an intermediary tone. The grey is a ratio of black and white. Revisit the Ratio section if needed. In other words, the third space is part of the white and the black space because it integrates attributes from both of those spaces into its own. Consider it a sub-space. In the same way there are sub-orders, there are sub-spaces.

(28) (29)

In image (28), spaces D and E overlap to create the impression of a smoother edge. So while the grey pixels seen at section F may appear isolated at first glance (and can be considered separated), they are in fact an extension of the sub-spacial dynamics between black and white. With the addition of red, green, and blue color channels, each of these adds another dimension to the sub-space. This allows for many different blends of space with various ratios and frequences.

Section A of image (29) shows black and white spaces producing various frequencies of sub-space patterns. The varying strengths of white versus black result in intermediate tones emerging in the image. Sections B, C, and D illustrate the color spaces and section E displays how they blend equally to create sub-spacial colors; yellow, cyan, and magenta. Seven pixel facets/faces can be identified in section E, with pixel sub-ordering along the edges describing their shapes.

Texture

By mixing two characteristics of space with each other in a juxtaposed manner, texture is created. Recall how there are two types of pixel orders, one that consist of pixels bound together and one where pixels are linked together. The intermediary orders (sub-orders) create a one-dimensional texture where the pixels alternate between linked and bound connections. Because the shift between linked and bound is drastic (a sharp corner versus a broad edge), the continuity is broken. This tactile relationship in space provides peaks and valleys where your awareness either sinks or rises, expands or contracts. This interplay stimulates a sense of friction or noise.

These shifts between one characteristic and another, if spaced across distances and also given depth, will produce texture. Distances between these changes determine the concentration of the texture (fine versus coarse). Depth of the shifts will determine the abrasiveness.

 

Glossary

 

Change Log

July 18, 2017:

• Changed "corner-bound" to "corner-linked" to re-emphasize the bound versus linked pixel connections and prevent confusion.
• Use of term "facetless" to help describe single pixels that do not create facets.
• Rewrote some parts in attempt to make things more understandable.