Pixels and Frame Buffers

Chapter 2: Pixels and Frame Buffers

The fundamental building block of a raster digital image is the pixel. Understanding how pixels are stored, manipulated, and displayed is essential for computer graphics.

What is a Pixel?

The term "pixel" is short for PICture ELement. It is the smallest addressable element in a digital image or display device. Each pixel is a physical point in a grid, and it carries specific information about the color and intensity of that point.

On most modern displays, a single pixel is composed of three sub-pixels: Red, Green, and Blue (RGB). By varying the intensity of these three components, a wide range of colors can be represented.

Resolution

Resolution refers to the number of pixels across the width and height of an image or display. It's often expressed as Width x Height (e.g., 1920x1080).

  • Total Pixels: The product of width and height (e.g., 1920 x 1080 = 2,073,600 pixels, or approx. 2 Megapixels).
  • PPI/DPI: Pixels Per Inch or Dots Per Inch measures pixel density. Higher density results in sharper images.

Aspect Ratio

Aspect ratio is the proportional relationship between an image's width and its height. It is typically expressed as two numbers separated by a colon (W:H).

  • 16:9: The standard widescreen ratio for modern TVs and monitors (e.g., 1920x1080).
  • 4:3: The traditional television ratio (e.g., 1024x768).
  • 21:9: Ultra-widescreen monitors.
16:9 Aspect Ratio 4:3 Aspect Ratio

Frame Buffer

The frame buffer is a specialized region of memory (VRAM on a GPU) that stores the digital data for a single frame of video. It acts as a bridge between the CPU/GPU and the display device.

  1. The graphics hardware writes pixel data (color values) into the frame buffer.
  2. The display controller reads this data and converts it into signals for the display.

Double Buffering

To prevent "tearing" or flickering during the rendering process, double buffering is used.

  • Front Buffer: The one currently being read by the display.
  • Back Buffer: The one where the next frame is being rendered.
  • Once rendering is complete, the buffers are swapped (or "flipped").

Bit Depth

Bit depth (or color depth) determines how much information is stored for each pixel, which in turn determines the total number of colors available.

  • 1-bit: 2 colors (black and white).
  • 8-bit (Grayscale): 256 shades of gray.
  • 8-bit (Indexed Color): 256 specific colors from a larger palette (e.g., original GIF format).
  • 24-bit (True Color): 8 bits for Red, 8 for Green, 8 for Blue. Total = 224=16,777,2162^{24} = 16,777,216 colors.
  • 32-bit: 24 bits for RGB + 8 bits for the Alpha (transparency) channel.

Canvas Pixel Manipulation

In web graphics, the HTML5 <canvas> API allows direct access to pixel data.

// Accessing pixel data from a 2D canvas context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // A Uint8ClampedArray

// data is a 1D array where each pixel occupies 4 indices: R, G, B, A
// Example: Red component of the first pixel: data[0]
// Green component of the first pixel: data[1]
// Blue component of the first pixel: data[2]
// Alpha component of the first pixel: data[3]

// To modify a pixel at (x, y):
const x = 10, y = 20;
const index = (y * canvas.width + x) * 4;
data[index] = 255;     // R
data[index + 1] = 0;   // G
data[index + 2] = 0;   // B
data[index + 3] = 255; // A (Fully Opaque)

// Write back to canvas
ctx.putImageData(imageData, 0, 0);

Summary

The pixel is the irreducible unit of raster graphics. By organizing pixels into a grid, we define the resolution and aspect ratio of an image. The frame buffer provides the memory necessary to store and display these pixels, and bit depth determines the richness of the colors we can represent.

PreviousNext Chapter