← Back to guides
Guides · Perception & Sampling

Pixels, Bias All the Way Down

Eye, sensor, pixel, sample. None of them agree.

DRAFT · skeleton · 4 widgets planned

Everything between the world and your screen is biased — your eyes, your sensor, your encoding, your pixels. The bugs you can’t explain are usually the moments two biases stopped agreeing.

[Frame: bias all the way down. Every link from photon to screen is tuned to something specific. Computers default to assuming neutrality, and that assumption is where everything breaks. The job isn’t to remove bias — it’s to know which biases are in play at each step.]

The eye is biased

[Visible spectrum as a thin slice of EM; cones peak in green with heavy L/M overlap; acuity concentrated in a tiny fovea while the brain edits the rest. You don’t perceive a uniform world — you perceive a reconstruction.]

Almost all of that sharpness lives in the fovea; everything else is the brain filling in.

Widget Acuity demo — mouse-follow blur stack pure HTML/CSS/JS, no canvas

A stack of progressively blurred versions of an image, layered in z. Cursor position drives concentric reveal masks: only the area near your pointer is sharp; the periphery softens. Feel how little of the frame your fovea actually resolves.

Image Pre-rendered blur stack (5 frames)

Source assets for the acuity demo: one sharp frame plus 4 progressively-blurrier JPEGs, pre-rendered offline for artistic control.

The sensor is biased (and on purpose)

[The Bayer pattern: two green per one red + one blue, because the eye is biased toward green. The sensor’s bias engineered to compensate for the eye’s bias. Demosaicing then invents the missing color at every pixel — “raw” capture is already three layers of assumption.]

The Bayer pattern samples color unevenly on purpose; demosaicing invents the rest.

Widget Bayer / debayer toggle

A scene shown three ways — raw Bayer (cyan-magenta dot pattern), naively debayered, and properly debayered. The aha: what you call a “pixel” is an interpolated guess from three sensor sites.

The pixel is biased

[A pixel isn’t a colored square — it’s a point sample of a continuous signal, and the “square” is just one reconstruction filter among many. Treat samples as tiles and edges break. Premultiplied alpha is where this surfaces most often.]

Treat a point sample like a tile and premultiplied alpha will make you pay for it at every edge.

Widget Premultiplied-alpha edge demo

A soft-edged object composited over a dark and a light background, side by side. Toggle premultiplied on/off; watch the dark fringe and bright halo appear. This is what the wrong mental model costs at every edge in every comp.

Even measuring a pixel is biased

[Adaptive Sampling Battleship. Anti-aliasing is the same bias lesson at pixel scale: a pixel value isn’t a measurement of “the color there,” it’s an estimate biased by where, how often, and with what strategy you sample inside the pixel. Lean into the game/hunt metaphor.]

Adaptive sampling is just attention with a budget: hunt where the answer is still contested.

Widget Subpixel battleship procedural canvas — diagonal edge only

One zoomed-in pixel with a diagonal edge running through it. The adaptive sampler runs in passes: cells where neighbors agree settle; contested cells subdivide and sample again. Toggle uniform vs adaptive at the same total sample count and watch adaptive converge visibly faster.

Bias is the medium

[The closer for this section is the closer for the whole guide: bias isn’t a flaw to fix, it’s the medium itself. Smart systems don’t pretend to be neutral — they deliberately concentrate attention where the answer is uncertain.]

[Closer line. To be written.]

Glossary

Every term used in this guide, defined once. In the prose, underlined-dotted terms show their short definition on hover or focus, and jump here on click.

Fovea
A small central region of the retina with dense cone packing. Only here is your vision sharp — the brain stitches the rest into a convincing illusion of a uniform, detailed world.
Bayer pattern
The color filter mosaic over most camera sensors: twice as many green sites as red or blue, because the eye is most sensitive to green. A bias engineered to compensate for a bias.
Demosaicing
The interpolation step that reconstructs a full-color image from the Bayer mosaic, guessing the two missing channels at every sensor site.
Point sample
A pixel is a point sample of a continuous signal, not a little colored square. The square is just one reconstruction filter among many — and treating samples as tiles breaks edges.
Premultiplied alpha
A compositing convention where RGB is stored already multiplied by alpha. Mixing colored samples is not the same math as layering colored tiles; getting this wrong fringes every soft edge.
Adaptive sampling
Sampling more where neighbors disagree and less where they agree. The same total budget converges faster by concentrating attention on contested regions.
← Back to guides