2D arrays · Raster images

Pixel Art

Place colored squares on a grid. The data structure behind every screen.

Every screen, every JPEG, every game sprite is a 2D array of color values. This demo lets you fill that array by hand. The grid you're drawing on is the same data structure your operating system holds in memory for every image on disk and every pixel on your monitor.

Pixel Art Grid

Paint a 2D array. Watch it become a 1D byte stream. See the math behind every image.

Size

Tool

Template

Pixel inspector

Hover a cell to inspect its position, byte index, and color values.

Image as data

Pixels: 16 × 16 = 256
Palette: 16 colors → 4 bits/pixel
Total: 1024 bits · 128 B
iPhone photo: ~34.9 MB (285,768× bigger)

Memory layout · row-major

The same image, linearized into a 1D byte stream — top row, then second row, then third, all stacked end-to-end. This is how the bytes actually sit in memory.

…and 128 more bytes follow.

Your image as a 2D array

[
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

What’s happening under the hood

›Each cell is a (row, column) coordinate mapping to a color value — the underlying type is array-of-array, the same shape JavaScript reaches for as Uint8ClampedArray on a canvas.
›Memory layout matters: row-major arrays make horizontal scans cache-friendly, vertical scans cache-hostile. This shows up as measurable speed differences in production graphics code.
›Real images add compression (JPEG, PNG, WebP) on top of this same raster substrate. The pixels are still there; the encoding gets cleverer.

Dig deeper

Phase 0 · How Computers Think

The concept you just explored is taught with full depth in the formal DURA curriculum.