By Alex Hanson-White
http://www.alexhw.com
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
Position
Formation
Order
Direction
Value
Ratio
Weight
Space
Depth
Glossary

 

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-bound 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-bound pixels link two spaces, and a single pixel does not form space with any other pixel.

(7) (8)

In image (7), A and B are true pixel facets. B has a pixel that is corner-bound with A and C. C is not a true pixel facet because it is a single pixel that does not emphasize a form greater than itself. By creating concave pixel forms like facet B where a side appears to curve inwards, the rectangular shape is diminished. Facet A and pixel C are convex, having a rectangular appearance.

Large pixel facets, 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.

Order

Pixel order occurs where side-bound or corner-bound pixels continue the same connection with consecutive pixels. Image (9) illustrates these two types of ordering that pixels follow. The convex pixel facets on the left of the image convey side-bound ordering producing a horizontal and vertical arrangement of pixels whereas the corner-bound ordering on the right result with a diagonal arrangement.

(9) (10)

Linking multiple side-bound orders or binding multiple corner-bound 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-bound pixels. Sub-order B consists of three side-bound facets linked together with corner-bound pixels. Notice how corner-bound pixels can also function as side-bound pixels. All the pixels of sub-order D are both side-bound and corner-bound (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 with 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 is also present in sub-ordering.

Pixel orders can either consist of side-bound pixels or corner-bound 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-bound pixels. Image (21) illustrates the side-bound order represented as white and the corner-bound order represented as black. By adjusting the ratio of side-bound pixels to corner-bound pixels in the sub-ordering they reveal a gradation of orders between the white and black (side versus corner).

suborder_ratio.png(21)

The order on the left is one-hundred percent side-bound and the order on the right is one-hundred percent corner-bound. By alternating between side-bound and corner-bound 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 parts 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-bound 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. The edges of a long shaped facet is one such example. Image (22) illustrates how two sub-orders can overlap. 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.

(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 will be referred to as Laced pixels to help differentiate them from the pixels that have a specific order.

Space

Each pixel occupies a space in the grid. When pixels of similar value neighbor each other and become bound, each pixel space appears to blend together as one. These laced pixels create broad flat areas of color. Where laced pixels of one space border with laced pixels of another space notable changes occur. Value changes at the perimeter reveal the pixel orders and sub-orders. With any transition, there is always an order involved. The order is there to provide direction towards one frequency or another, and results with a sense of stability to the form being expressed.

(24) (25)

In image (24) and (25) the linked, bound, and laced pixels of spaces are illustrated. 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. Image (27) shows the bound, linked, and laced pixels of a more complicated shape that incorporates many different sub-orders and weight. Through the use of intermediate values, these walls can become softened- 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 both the white and the black space. 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.

 

Glossary

Bound pixels
Pixels of similar value that share an edge with each other. See Position for an illustration.
Corner-bound pixels
See Linked pixels.
Face
A face consists of bound pixels of similar rgb value and include any number of laced pixels. See Formation for an illustration.
Facet
A facet is two or more bound pixels of similar rgb value that don't include any laced pixels. See Formation for an illustration.
Laced pixels
Pixels that are both bound and linked in more than one direction. See Weight for an illustration.
Linked pixels
Pixels of similar value that share a corner with each other. See Position for an illustration.
Order
Pixels that continue a chain of side-bound connections or corner-bound connections. See Order for an illustration.
RGB
Red, blue, and green color values of a single pixel.
Side-bound pixels
See Bound pixels.
Sub-space
A blend of two or more spaces. See Depth for an illustration.
Sub-order
Pixel orders that combine with other orders to create lines that are not completely straight. See Order.