Making Shapes with Pixels
How do you draw a circle with squares?
How do you draw a circle with squares?
Your screen is a giant grid of tiny squares. Each pixel can only be ONE color - there's no "half a pixel." So how do we make smooth diagonal lines and curves?
Click pixels to toggle them on/off
Pixels are squares arranged in a grid. There's no way to place a pixel "between" grid positions.
Smart algorithms choose which pixels to light up so the pattern LOOKS like a smooth line or curve.
More pixels = smoother shapes. A 4K display has 8 million pixels to work with!
The Atari 2600 (1977) had a resolution of just 160x192 pixels - about 30,000 total. Your phone probably has over 2 million pixels!
In 1962, Jack Bresenham invented an algorithm to draw lines using only simple math (no division!). It's still used today in everything from games to printers.
Only uses addition and subtraction - no slow division or square roots needed!
It tracks an "error" value to decide whether to step diagonally or straight.
Bresenham developed this algorithm while working at IBM on a plotter that could only move in fixed steps - exactly like pixels!
Circles are even trickier than lines! The midpoint circle algorithm uses the circle's symmetry - calculate 1/8 of the circle, then mirror it 8 ways.
A circle looks the same from 8 directions. Calculate one octant, mirror it 7 times!
Mathematical circles have infinite resolution. Pixel circles are always approximations.
Early video games often used ovals instead of circles because they were faster to draw - and TV screens weren't perfectly square anyway!
See those jagged "stair-step" edges? That's called aliasing. Anti-aliasing adds partially-lit pixels to trick your eye into seeing smoother edges.
Pixels near edges get partial brightness based on how much of the "ideal" shape covers them.
Your brain blends the partial pixels together, perceiving a smoother edge than actually exists.
Anti-aliasing requires more calculations, which is why games let you turn it on/off.
MSAA, FXAA, TAA - these are all different anti-aliasing techniques! Games use different methods depending on speed vs quality needs.
Watch how the same circle looks at different resolutions. Higher resolution means more pixels to work with, making curves appear smoother.
Atari-era
Icon size
Retro game
High detail
64 pixels total - Circle uses ~50 pixels
A 4K display (3840x2160) has over 8 million pixels! Early Macintosh computers (1984) had only 175,104 pixels.
Try drawing shapes yourself! Select a tool and click on the canvas to see the algorithms in action.
Click to place pixels
You've discovered the clever math behind digital graphics! From Bresenham's lines to anti-aliased circles, now you know how computers turn squares into art.
Every image is built from a grid of single-color squares
Draws lines using only addition, still used after 60+ years
Circles are drawn by calculating 1/8 and mirroring
Partial-brightness pixels trick our eyes into seeing smooth edges
Put your new knowledge into practice!