Skip to content

Menu

Add your art
GitHub
Theme
Browse the knowledge base

Rule

rules://11-clusters-and-noise

Clusters and noise

A sprite is read as shapes of colour, not as pixels. Speckle, orphan pixels, fat 2×2 clumps and parallel bands all add information nobody asked for, and at 1× the viewer reads them as dirt or as a ruler laid along the outline. Without this file an agent shades by "darker near the edge" and sprinkles detail dots; both are generated-art tells.

10 pixel templates rules/11-clusters-and-noise.md
On this page

Rules

#

A cluster is touching pixels of one colour. Orthogonal contact joins pixels; diagonal contact is weak.

  1. Design with clusters, not pixels. Aim for few, large, clean clusters. A region held together only diagonally, or shaped like a ragged puddle, should be merged, simplified or deleted. Squint: a few big masses of light and dark must survive. Clean shapes in 5 colours beat a noisy texture in 5 colours.
  2. Orphans. An orphan touches no same-colour pixel and is not AA or part of a curve. Ask of each: does it need to be alone? Delete it, merge it into a neighbour, or grow it into a 2–3 px shape (bar, L, 2×2).
  3. Allowed orphans: a specular highlight, the eye of a tiny sprite, a star or spark, an AA/buffer pixel hugging a longer cluster, the last frame of a particle. Budget at 16–32 px: at most one per object. Never random speckle, never near the face.
  4. validate only sees the worst orphans. strays flags opaque pixels with no opaque 4-neighbour (error above 3). A dark speck inside a fill has neighbours and passes; hunt those by eye.
  5. Noise = detail that serves nothing: random or filter dither, leftover sketch pixels, texture with no repeat, outline inlines. Remove before adding. Fewer colours with cleaner shapes first, then re-add form.
  6. Banding is boundaries that run the same length and end on the same row or column, so the grid shows. Types: hugging (outline and first shade run the same length), fat pixels (2×2 blobs, 2 px lines), skip-one (two bands with a gap still read as bands), 45° stacks (parallel 1 px diagonals), and the super pixel (every stripe ends exactly where the staircase steps, so a diagonal has the resolution of one fat pixel).
  7. Cure banding in this order: (a) stagger the breaks so ends do not line up (shift 1 px); (b) compress the bands so the step is crossed in 1–2 px at a place the eye expects a terminator; (c) dither or texture the join (rules://13-dithering-and-texture); (d) split a long gradient into small clumps per detail. validate banding reports a straight same-pair boundary of at least max(8, width/3) px, as a note only.
  8. Pillow shading (rings of shade that follow the outline inward) ignores the light. Pick a light direction (rules://02-shading-and-light), model the form, and END the shade abruptly at a terminator instead of blending back. Frontal light is allowed but still has to describe volume.
  9. Plane grouping. One value cluster per plane-facing direction; straight-edged clusters for flat planes, curved-edged clusters for round forms. Do not cut a sphere with a straight terminator or a box with a curved one.
  10. Big shapes first. Define the large light and shadow planes, only then the second-largest shadow shapes. Spotty isolated patches inside a lit plane are the beginner error.
  11. Unintentional squares. Where two regions of one colour touch, pixels clump into 2×2 blocks. Stagger colour changes brick-like; look for "imaginary squares" on every pass.
  12. Scatter (grass, pebbles, stars): quasi-random at uniform density, no two accents in one row or column, none touching, none clustered in one corner. Tile it 3×3 and look again for lattices.
  13. Texture = repeat + rest. Simplify to a few glyphs, re-stamp them, balance dense against empty (empty reads as implied texture), keep cluster size consistent within one object.
  14. Animation. Keep the cluster structure stable from frame to frame; a cape or hair that re-forms its clusters every frame flickers. Do not add orphans that exist on one frame only (see rules://05-animation).

By size

#
Size Cluster budget
8 Every pixel is a cluster. 2–3 colours. No shade clusters: one value step plus an accent pixel.
16 3 tones per material; every cluster ≥ 2 px except one highlight or eye. ≤ 1 orphan per object.
32 3 tones + outline + a highlight; 2–3 shade clusters per major part. Texture only as a repeated 2–3 px stamp.
64 Large clusters stay large; add texture as repeats on top of clean planes. Distant parts drop to 1–2 px clusters.

Templates

#

clusters-orphans-bad → clusters-orphans-fixed — 1 px chips and glints scattered over a fill, versus the same chips merged into 2–3 px blobs and one highlight cluster. The bad one passes validate strays.

clusters-orphans-bad · 14×10
  • O outline
  • F fill-mid
  • L fill-light
  • D fill-shadow
Grid source
O = outline    #2b1d2e
F = fill-mid   #d98d5f
L = fill-light #f2c28b
D = fill-shadow #a65a4e
---
...OOOOOOOO...
..OFFFFFFFFO..
.OFLFFFFFDFFO.
OFFFDFFFFFFFFO
OFFFFFFFLFFFFO
OFFFFFFDFFFLFO
OFFDFLFFFFFFFO
.OFFFFFFFFDFO.
..OFFFDFFFFO..
...OOOOOOOO...
clusters-orphans-fixed · 14×10
  • O outline
  • F fill-mid
  • L fill-light
  • D fill-shadow
Grid source
O = outline    #2b1d2e
F = fill-mid   #d98d5f
L = fill-light #f2c28b
D = fill-shadow #a65a4e
---
...OOOOOOOO...
..OFFFFFFFFO..
.OFLLFFFFDDFO.
OFLLDDFFFFDFFO
OFFFDFFFFFFFFO
OFFFFFFFFFFFFO
OFFFFFFDDFFFFO
.OFFFFFFDFFFO.
..OFFFFFFFFO..
...OOOOOOOO...

clusters-bands-aligned → clusters-bands-staggered — three tones under a steep 1:2 edge. Aligned: the light/mid and mid/shadow breaks step on the same rows as the outline, so all three boundaries stack into one ruled staircase (super pixel). Staggered: the light/mid break steps one row later than the outline, so the light band alternates 2 px / 1 px and the grid stops showing.

clusters-bands-aligned · 20×12
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.............OLLFFFF
.............OLLFFFF
............OLLFFFFD
............OLLFFFFD
...........OLLFFFFDD
...........OLLFFFFDD
..........OLLFFFFDDD
..........OLLFFFFDDD
.........OLLFFFFDDDD
.........OLLFFFFDDDD
........OLLFFFFDDDDD
........OLLFFFFDDDDD
clusters-bands-staggered · 20×12
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.............OLLFFFF
.............OLFFFFF
............OLLFFFFD
............OLFFFFFD
...........OLLFFFFDD
...........OLFFFFFDD
..........OLLFFFFDDD
..........OLFFFFFDDD
.........OLLFFFFDDDD
.........OLFFFFFDDDD
........OLLFFFFDDDDD
........OLFFFFFDDDDD

clusters-sphere-pillow → clusters-sphere-lit — concentric rings versus one light from the upper left: a highlight cluster, a mid, and a shadow that ends abruptly. Both use 3 tones and an outline.

clusters-sphere-pillow · 14×14
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.....OOOO.....
...OODDDDOO...
..ODDDFFDDDO..
.ODDFFFFFFDDO.
.ODFFFLLFFFDO.
ODDFFLLLLFFDDO
ODFFLLLLLLFFDO
ODFFLLLLLLFFDO
ODDFFLLLLFFDDO
.ODFFFLLFFFDO.
.ODDFFFFFFDDO.
..ODDDFFDDDO..
...OODDDDOO...
.....OOOO.....
clusters-sphere-lit · 14×14
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.....OOOO.....
...OOLLFFOO...
..OLLLLFFFFO..
.OLLLLFFFFFFO.
.OLLLFFFFFFFO.
OLLLFFFFFFFFDO
OLLFFFFFFFFFDO
OFFFFFFFFFFFDO
OFFFFFFFFFFDDO
.OFFFFFFFFDDO.
.OFFFFFFFDDDO.
..OFFFDDDDDO..
...OODDDDOO...
.....OOOO.....

clusters-scatter-aligned → clusters-scatter-staggered — 2 px accents on a 12×12 tile. Aligned accents form a lattice; staggered ones share no row, column or edge. Check any scatter tile tiled 3×3.

clusters-scatter-aligned · 12×12
  • G grass-mid
  • T grass-dark
Grid source
G = grass-mid  #4f9a4c
T = grass-dark #2e6a45
---
GGGGGGGGGGGG
GGGGGGGGGGGG
TTGGTTGGTTGG
GGGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGGG
TTGGTTGGTTGG
GGGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGGG
clusters-scatter-staggered · 12×12
  • G grass-mid
  • T grass-dark
Grid source
G = grass-mid  #4f9a4c
T = grass-dark #2e6a45
---
GGGGGGGGTTGG
GGGGGGGGGGGG
GGTTGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGTTGGGG
GGGGGGGGGGGG
TTGGGGGGGGGG
GGGGGGGGGGGG
GGGGGGGGGGTT
GGGGTTGGGGGG
GGGGGGGGGGGG

clusters-rock-noisy → clusters-rock-clean — the same 4 tones in the same proportions: shuffled (noise) and arranged as planes (a lit cluster upper left, a shadow cluster lower right).

clusters-rock-noisy · 18×13
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.....OOOOOOOO.....
....OFFFDFFFFO....
..OOFFFFLLFLFDOO..
.OLFFFFFDLFLLDLDO.
ODDLLFFLLFLLDDLFLO
OFFFDFFFFFFFLFLDDO
OFFFFDDFLFFFLFFFLO
OFLFFFFDFDFFDLFFFO
ODFDFLFDFDFDFFFFLO
.ODDFFFLFFFLFDFDO.
..OFLLLLDFFFFFFO..
...OOFLFFFFFFOO...
.....OOOOOOOO.....
clusters-rock-clean · 18×13
  • O outline
  • L fill-light
  • F fill-mid
  • D fill-shadow
Grid source
O = outline    #2b1d2e
L = fill-light #f2c28b
F = fill-mid   #d98d5f
D = fill-shadow #a65a4e
---
.....OOOOOOOO.....
....OLLLLFFFFO....
..OOLLLLLLFFFFOO..
.OLLLLLLLFFFFFFFO.
OLLLLLLLFFFFFFFFFO
OFLLLLLFFFFFFFFFFO
OFFLLLFFFFFFFFFFFO
OFFFFFFFFFFFFFDDDO
OFFFFFFFFFFFDDDDDO
.OFFFFFFFFFDDDDDO.
..OFFFFFFDDDDDDO..
...OODDDDDDDDOO...
.....OOOOOOOO.....

Procedure

#
  1. Flat-fill each material with its base colour; judge the silhouette first (rules://03-silhouette-and-form).
  2. Add the shadow as one cluster on the side away from the light, then the light as one cluster. Stop and look.
  3. look op ascii over the shaded area: count the clusters of each tone. More than ~3 per tone per part at 32 px means noise; merge.
  4. Hunt orphans: any glyph with no same-glyph orthogonal neighbour. Keep only the allowed kinds (rule 3).
  5. Hunt bands: scan for two edges that share a start and end column or row; shift one by 1 px (draw ops pixels + clear on a 1×1 region).
  6. look op preview at scale: 1; squint. Run validate (strays, banding).
  7. For animation, look op filmstrip: cluster layout of cloth and hair must not re-form between frames.

Mistakes

#
Symptom Cause Fix
Sprite looks gritty Many 1 px accents, random dither Merge into 2–3 px shapes; delete the rest
Shape looks like an onion Shade rings follow the outline (pillow) One light direction; terminator, not rings
Diagonal looks chunky Stripes end where the stair steps (super pixel) Shift each band's break 1 px
Flat plastic ball Gradient from even concentric rings Lit cluster + abrupt shadow cluster
Texture feels like wallpaper Lattice of accents, one density everywhere Stagger; add empty areas; vary stamp
Hair or cape flickers in motion Clusters re-form each frame Keep the cluster layout; move it whole
Square blocks in a slope Colour breaks aligned in columns Stagger breaks like bricks

Review

#
  • Each material has ≤ 3 tones and each tone forms a few connected clusters.
  • No orphan except highlight, eye, spark or AA pixel; at most one per object.
  • No two edges run the same length on the same row or column; no 2×2 on a 1 px line.
  • Shade follows a stated light direction; no rings hugging the outline.
  • Scatter has no lattice and no accent touching another.
  • Same cluster layout across animation frames.

Sources

#
  • Saint11, "Fundamentals", glossary entries "cluster" and "orphan pixel", banding figures.
  • Pixel Logic, Ch. 1 and Ch. 7 (shapes as mosaic tiles, noisy vs clean rock) and Ch. 2 (banding).
  • Silber, Pixel Art for Game Developers, Ch. 10 (banding, super pixel, pillow shading, scatter tiles).
  • Classic pixel tutorials: "Cure" banding types and Arne's banding cures.
  • Slynyrd, Pixelblog 2 "Texture" and 5 "Back to Basics"; Solarski, Drawing Basics and Video Game Art (hatch direction, grouping).