All examples · Post-processing

Handheld LCD

What this example shows

lcd() is the screen of a handheld: a grid between the pixels, a tint the panel could not help, and pixels slow to change, so anything moving leaves a ghost (ghosting). The ghost reads what the effect showed last frame, which costs two pictures the size of the canvas while it runs.

The grid is one real pixel wide around each game pixel, so it needs at least two real pixels per game pixel. This example runs at pixelRatio: 'device'; on a screen of density 1 there is no gap to draw and the grid is left out.

The green panel is two effects: colorAdjust({ saturation: 0 }) takes the colour out, and lcd() tints what is left. Click to change panel, ↑ ↓ for the ghosting and Space to switch it off.

Starting