Pixel Paint

A grid of tappable squares. Each one holds a color. Tap to paint, change your brush color, and make pixel art. Simple to play with, and packed with SwiftUI grid fundamentals.

What you'll build

A square grid of cells — maybe 16×16 or 20×20 — where each cell is a colored square. Tap to paint with the current color. A row of color swatches lets you switch brushes.

Key concepts

2D array as state — Store the grid as a flat array of colors, indexed by row * columns + column.

let columns = 16
@State var cells: [Color] = Array(repeating: .white, count: 16 * 16)

LazyVGrid — SwiftUI's grid view. Pass a column layout and a ForEach over your data.

LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 1), count: columns), spacing: 1) {
    ForEach(0..<cells.count, id: \.self) { i in
        cells[i]
            .aspectRatio(1, contentMode: .fit)
            .onTapGesture {
                cells[i] = brushColor
            }
    }
}

@State var brushColor — The currently selected color. Tap a cell and it becomes brushColor.

.aspectRatio(1, contentMode: .fit) — Force each cell to be a square regardless of grid width.

Arrays and indices

A 2D grid stored as a 1D array is a classic pattern in game development and simulations. The formula row * width + col converts between 2D coordinates and a flat index. It's worth understanding deeply.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and paint something.