# Raster Graphics & Color ## Raster Graphics We have been using the term [**raster**](https://en.wikipedia.org/wiki/Raster_graphics), what does it mean really? It basically means a **rectangular array of pixels**. **Raster image** is a device-independent way of describing what should be described. **Raster display** is a device-depend way of approximating raster image. Raster devices are prevalent for both output (display) and input. - **Input Devices**: *Digital Camera* (2D), *Flatbed Scanner* (1D) - **Output Devices**: *CRT* (Cathode ray tube), Ink-jet printer, LCD, LED [Bayer Mosaic](https://en.wikipedia.org/wiki/Bayer_filter) A raster image consists of pixels. Each pixel contains sub-pixels (usually 3, for R , G, and B) with adjustable **intensities**. *Resolution-dependent* ways of specifying intensity $I$ usually take the following form: - 8-bit unsigned int: A sub-pixel has intensity in range [0, 255] - 16-bit unsigned int: A sub-pixel has intensity in range [0, 65535] The *resolution-independent* way of specifying intensity has intensity $I$ in range [0,1] as a float, and it comes with some caveats: - $I=0.0$ has non-zero intensity due to 1) reflection off display surface, and/or 2) difficulty to turn display's pixel completely off. - ***[Black level](https://en.wikipedia.org/wiki/Black_level)***: Level of brightness of darkest pixel - ***[Contrast](https://en.wikipedia.org/wiki/Display_contrast)***: Maximum intensity / Black level How to adjust the intensities properly give rise to the discussion about ***gamma*** and ***alpha***, which will be discussed in this section. ### Gamma correction Checkout this article on [gamma vs. gamma correction](https://www.cambridgeincolour.com/tutorials/gamma-correction.htm) Human perception of light intensity is non-linear, therefore linearity is built into displays. For example pixel intensities $(0,0.5,1)$ might be displayed as $(0,0,25,1)$. We need ***gamma correction*** such that the displayed pixel intensities are (approximately) linear w.r.t. human eye perception, as opposed to being linear in a mathematical sense. We define gamma function $I=a^\gamma$, where - $I$ is the display intensity (a notion of voltage) - $\alpha$ is the input pixel value (a notion of current). #note Pure black (0) and pure white (1) are not affected by gamma correction. ### Finding monitor gamma Usually $\gamma \in [1.8,2.2]$. Note that $\alpha\in[0,1]$ and therefore maps to $I\in[0,1]$. To find the device-dependent $\gamma$, we need to place a black-white checkerboard (intensity nonadjustable) side by side with a 2D array of gray pixels with adjustable intensity $\alpha$. We set $\alpha$ such that the checkerboard and 2D gray pixel array has the same average intensity, at which time $I=0.5=\alpha^\gamma$. - First we solve for $\gamma$, given $I, \alpha$: $\gamma=\frac{\ln I}{\ln \alpha}=\frac{\ln 0.5}{\ln \alpha}$ - Then solve for pixel value $\alpha'$ s.t. $\alpha=I$. This step is called ***gamma correction***. Essentially we are asking - to display intensity $\alpha$, what should be the input pixel intensity $\alpha'$? $\begin{align*} I&=\alpha=\alpha'^{\gamma} \\ \rightarrow \alpha'&=\sqrt[\gamma]{I}=I^{1/\gamma}=\alpha^{1/\gamma} \\ \end{align*}$ ## Color ![[Pasted image 20221226102344.png]] Forget about 'Yellow+Blue=Green' - this is [subtractive color mixing](https://en.wikipedia.org/wiki/Subtractive_color) which is not suited for describing colors being emitted by the displays. What we care about instead is [additive color](https://en.wikipedia.org/wiki/Additive_color) mixing, where the 3 ***primary lights*** are red, green, and blue. It works like so: - R (1,0,0) + G (0,1,0) = Yellow (1,1,0) - G (0,1,0) + B (0,0,1) = Cyan (0,1,1) - B (0,0,1) + R (1,0,0) = Magenta (1,0,1) - R (1,0,0) + G (0,1,0) + B (0,0,1) = White (1,1,1) - Grayscale = $0.3 R + 0.6 G + 0.1 B$ We can represent additive RGB color using [color triangle](https://en.wikipedia.org/wiki/Color_triangle) or [color cube](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation). Notice that the RGB color triangle doesn't cover the entire [chromaticity space](https://en.wikipedia.org/wiki/Chromaticity), meaning that not all colors can be represented by the additive combination of RGB. ### Color matching functions Grassmann Law: See [note](https://cseweb.ucsd.edu/~alchern/teaching/cse167_2021/7-2Color.pdf) by Prof. Albert Chern $r=\int \bar{r}(\lambda) P(\lambda) d \lambda, \quad g=\int \bar{g}(\lambda) P(\lambda) d \lambda, \quad b=\int \bar{b}(\lambda) P(\lambda) d \lambda$ ![[Pasted image 20221226102213.png|600]] ### Alpha compositing See also [note](https://cseweb.ucsd.edu/~alchern/teaching/cse167_2021/7-2Transparency.pdf) by Prof. Albert Chern ![[Pasted image 20221226104148.png]] Recall that except for R, G, and B, a pixel can have an additional $a$ (or $\alpha$) $\in[0,1]$ attribute that specifies its opacity (i.e. the fraction of the pixel covered by the foreground). This is useful when partially overwriting a pixel (e.g. to show occlusion by translucent material). ***Alpha compositing*** calculates the correct weight to mix the ***foreground*** color and the ***background*** color. **Problem Setup**: We have foreground color and background color $c_f, c_b$ respectively. The correct color $c$ of the pixel can be calculated by: $\alpha_f c_f + (1-\alpha_f)c_b$