Drawing with Pixels

Lines on a grid

An interactive lesson with 6 steps, about 5 minutes: you predict, drag and solve, with instant feedback on every answer. It runs in your browser and needs JavaScript.

What you’ll learn

• Screens are grids of pixels; lines become staircases of lit squares.
• A line lights max(|Δx|, |Δy|) + 1 pixels; anti-aliasing shades partial pixels.
• Raster images are pixel grids; vector graphics are equations redrawn at any size.

Steps

1. Which squares to fill?
2. Counting pixels
3. Softening the jaggies
4. A full-HD screen
5. Zooming in
6. A 4K frame