Interactive Demonstration
Understanding Aliasing
in Computer Graphics
Explore the most common sampling artifacts — jagged edges, moiré interference, temporal flicker — and how anti-aliasing techniques mitigate them.
Staircase Artifacts (Jaggies)
When a continuous diagonal or curved edge is rendered on a discrete pixel grid, the result is a staircase pattern. Anti-aliasing blends edge pixels with partial coverage to smooth the transition.
Each square represents one pixel. Notice how the aliased version has hard on/off pixels, while the anti-aliased version uses intermediate gray values at the boundary.
Moiré Interference Patterns
When two periodic patterns overlap at slightly different frequencies or angles, a low-frequency "phantom" pattern emerges. This is a spatial aliasing artifact caused by undersampling high-frequency detail.
Try small spacing values (3-6px) with slight rotation (2-8°) for the strongest moiré effect. This is why TV presenters avoid fine-striped shirts — the camera sampling creates these phantom patterns.
Temporal Aliasing (Wagon Wheel Effect)
When a rotating object is sampled at discrete time intervals (frames), its apparent motion can reverse or stall if the rotation speed approaches the sampling rate. This is the same effect that makes wagon wheels appear to spin backwards in film.
Watch the sampled wheel at various speeds. When the rotation frequency approaches half the frame rate (Nyquist limit), the wheel appears to slow, stop, or reverse direction.
Supersampling Anti-Aliasing (SSAA)
SSAA renders the scene at a higher resolution, then downsamples by averaging multiple sub-pixel samples per output pixel. More samples = smoother edges, but at significant computational cost.
Hover over any panel to see a magnified view. Notice how higher sample counts produce progressively smoother edges, with diminishing returns beyond 4x.
Pixel Inspector
Draw on the canvas and inspect individual pixel values. See how anti-aliased rendering distributes partial coverage across neighboring pixels to simulate sub-pixel precision.
Move your cursor over the source canvas. The magnified view shows the pixel grid around your cursor. With anti-aliasing on, edge pixels have varying alpha values instead of binary on/off.