How to Pixel Art
How to Pixel Art: Understanding Dithering and Filtering
Pixel art lives and breathes through limitation. Working at a low resolution accentuates every individual pixel, turning what would normally be an artifact of digital images into an expressive element. But when scaling, sampling, or rendering pixel art, keeping that crisp precision can be tricky.
Scaling and Filtering
When scaling images down, most image editors or game engines smooth things out — but for pixel art, smoothing means blur. To preserve sharp edges, the texture sampler defines how pixels behave when up- or downscaling.
The simplest approach is Point Filtering (Nearest Pixels in TouchDesigner TOPs). It uses the color of the closest pixel t o the desired coordinate leading to sharp, blocky pixels instead of fuzzy transitions.
When the goal is realism rather than retro, higher-quality filters come into play:
Bilinear Filtering (Interpolate Pixels in TD TOPs) takes a weighted average of the four nearest pixels. This produces smoother transitions but blurs crisp pixel art.
Trilinear Filtering (Mipmap Pixels in TD TOPs) extends this idea by averaging between multiple MIP map levels as well, helping textures stay consistent at varying distances. MIP Maps are pre-calculated, progressively smaller versions of a texture. They prevent shimmering and aliasing in distant objects but can over-soften pixel art if used carelessly. Also it is about 33% heavier on the GPU than bilinear filtering.
#----- have a look at the touchdesigner network - images coming soon -----#
Anisotropic Filtering (in MATs, next to each parameter that takes a TOP as an input, there is a button) enhances detail on angled surfaces by reducing blur and aliasing — crucial for 3D scenes but unnecessary for pure pixel art. That's why this parameter can only be found in MATs.
If you’re emulating pixel-art visuals in 3D engines, switch your camera projection to orthographic. This removes perspective distortion, retaining that flat, 2D look.
Artifacts
Artifacts can stem from digital limitations or even wanted compression.
Aliasing
In TD when scaling up or down a random noise TOP set to nearest pixel for both input and viewer smoothness we can see some patternization happening. This is due to pixel stretching that behaves like a moiré‑style aliasing pattern.
Aliasing happens when a sampled signal (like an image) contains unwanted low-frequency artifacts that weren’t present in the original — moiré patterns or jagged edges.
In the example below, individual pixel are stretched into larger blocks, which creates a regular sampling grid over what is conceptually a high‑frequency signal. That grid can interact with the underlying noise frequencies and produce low‑frequency interference patterns, very similar to moiré, even though the source is “random”.
#----- have a look at the touchdesigner network - images coming soon -----#
You might have noticed that when the video was stopped the effect was almost unnoticeable. This effect can be masked in still images as the effect strength is quite weak (some pixels stretch only to 2 px width). Since our brain is more susceptable to temporal changes we can see this in videos though.
To keep pixels square and avoid irregular stretching a good rule of thumb is to scale by powers of two (2×, 4×, 8×) or avoid scaling at all if possible and set the resolution properly.
Pixel Quantization
Quantization occurs during color/depth reduction, where continuous tone values are snapped to discrete levels. With few levels, smooth gradients become visible bands of flat color - a posterization effect unrelated to spatial frequencies.
Dithering
Dithering solves those artifacts by intentionally adding controlled noise, breaking up those blocks so average pixel density simulates the original smooth gradients.
A classic example is converting grayscale images to black and white: pixels are distributed so the overall density of black reflects the original brightness — a 1-bit representation of continuous tones.
#----- have a look at the touchdesigner network - images coming soon -----#
One common technique, Bayer Dithering (or Ordered Dithering), uses a threshold matrix — a small, tiled grid of values that distribute error across pixels in a regular pattern. These matrices can be computed mathematically (using Bayer’s algorithm), but to save processing time, they are usually precomputed and stored as lookup tables in computer graphics applications.
The result is a pleasing, consistent texture that suggests depth and variation even within a tiny palette.
The Touchdesigner Of Doing Things
https://github.com/fishingforvisuals/TdWorkshop-Elipamanoke/tree/main/251123-Dithering