C04 · From light to pixels
Pixels, arrays and transparency
An array has coordinates, channels, a numeric type and value meanings. Coloured squares are only a display.
Background if needed
Theory
Where a value is and what it means
x is column and y is row. Public coordinates start at 1, program indices at 0. RGB has three channels; a scalar map has one. A channel index is not a coordinate. Row-major interleaved storage places one cell's channels before the next column.
A mask indicates membership, a label region identity, and a derivative may be negative. The same number 1 has different meanings. Neither colour scale nor site theme should change the numeric array.
What does a cell store?
Switch channels, code average and mask. Coordinates match while number meanings change.
Exact values are in the point inspector
RGB; display range 0…1
Exact values are in the point inspector
Grayscale 0…1: black to white.
Inspect the selected point
What the plot shows
RGB holds three numbers per site; a scalar map holds one. A 0/1 mask indicates membership, not material colour.
Parameters and details
An image is stored as rows × columns × channels. An RGB plane contains measurements or codes; a mask contains membership. This rectangular mask is authored manually, not inferred from colours. The RGB mean here is arithmetic, not physical luminance. Public coordinates start at 1.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Neighbourhood is a convention too
Four neighbours share edges; eight include diagonals. Corner-touching shapes connect under 8-connectivity but not 4-connectivity. This matters for filling and object measurements. Manhattan distance counts horizontal and vertical steps; Euclidean distance measures straight length.
Two shapes or one?
Select a white source cell. Allow diagonal steps and check whether the fill reaches the other shape. Return to four neighbours: path rules change while the original cells stay the same.
Exact values are in the point inspector
Grayscale 0…1: black to white.
Exact values are in the point inspector
Grayscale 0…1: black to white.
Inspect the selected point
What the plot shows
Corner-touching shapes stay separate under 4-connectivity and join under 8-connectivity. Both are correct under their stated rules.
- Reachable cells
- 9
Parameters and details
Press a white source cell to start filling there. Four neighbours allow shared-edge steps; eight also allow diagonal steps. Selecting black background gives an empty region.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Invisible colour must not leak
α is coverage: 0 contributes nothing; 1 is opaque. Straight storage keeps RGB separate from α; premultiplied storage keeps α·RGB. A fully transparent cell then makes zero colour contribution when averaged.
Transparent cells here hide blue, while the shape is red. Averaging straight RGB creates a blue fringe. Both modes use linear light so the alpha error is isolated from colour encoding. Average α and α·RGB separately, then add background·(1−α).
Here averaging means adding contributions from a horizontal row of neighbours and dividing by its length. Select a cell at the red edge on the blue channel: correct mode gives invisible blue samples weight 0. Only the visible matte's blue contribution remains. The general filtering mechanism has its own later chapter.
A blue fringe around a red shape
Transparent cells contain invisible blue RGB. Switch filtering and matte; watch the edge.
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
- Add uncovered matte
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Inspect the selected point
What the plot shows
Filter α·RGB and α together. Invisible colour must not leak into the result.
Parameters and details
All colour arithmetic is linear light. Fully transparent pixels deliberately contain blue RGB. Wrong: average straight RGB, then multiply by average α. Correct: average α·RGB and α separately, then add background·(1−α). Invisible colours then cannot create a blue fringe.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Display and storage differ
A filter may produce −0.2 or 1.4. Floating-point storage preserves them; the screen is bounded, not the mathematical model. Display range is labelled and the inspector retains numbers. Ordinary 8-bit RGB needs explicit encoding, rounding and clipping.
Practice
Test the idea under another condition. Follow the task above the images; point inspection helps explain the result. This exploration is not scored.
Remove a blue fringe
Create a blue fringe with incorrect filtering, then remove it without changing colours. Check dark and light mattes.
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
- Add uncovered matte
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Inspect the selected point
What the plot shows
Filter α·RGB and α together. Invisible colour must not leak into the result.
Parameters and details
All colour arithmetic is linear light. Fully transparent pixels deliberately contain blue RGB. Wrong: average straight RGB, then multiply by average α. Correct: average α·RGB and α separately, then add background·(1−α). Invisible colours then cannot create a blue fringe.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Games
Remove a blue fringe
Which compositing method leaves this edge?
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
- Add uncovered matte
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Compare your result with the reference.
Inspect the selected point
What the plot shows
Filter α·RGB and α together. Invisible colour must not leak into the result.
Parameters and details
All colour arithmetic is linear light. Fully transparent pixels deliberately contain blue RGB. Wrong: average straight RGB, then multiply by average α. Correct: average α·RGB and α separately, then add background·(1−α). Invisible colours then cannot create a blue fringe.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Test your explanation
Question 1 of 5
Squares touch at a corner. Why does filling reach the second only with 8 neighbours?
Exact values are in the point inspector
Grayscale 0…1: black to white.
Exact values are in the point inspector
Grayscale 0…1: black to white.
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Exact values are in the point inspector
RGB linear → sRGB; display range 0…1
Choose one answer. It is checked immediately.
Limitations and references
Limits of this example
Alpha is a separate map, not a layered editor. Numeric compositing is independent of CSS filters or theme.