Computers and Imaging Telecommunications 1 P. Mathys Two Different Methods Vector or object-oriented graphics. Images are generated by mathematical descriptions of line (vector) segments. Bitmap or raster graphics. Images are made up of individual dots or pixels which are arranged in rows and columns.
Vector Graphics: Example Outline of letter S specified by points that are connected using Bézier cubic spline curves. The letter S as it is printed after filling the outline specified on the left. Bitmap Graphics: Example The letter S is placed on a grid of pixels, each of which can be black or white. The letter S as it is printed, without the grid itself being visible.
Vector Graphics: Resizing Original size Enlarged by factor of 2 Enlarged by factor of 4 Resizing works well, but requires substantial computational resources. Bitmap Graphics: Resizing Original size Enlarged by factor of 2 Enlarged by factor of 4 Resizing is problematic due to spatial quantization effect of underlying grid.
Vector Graphics Good for storing images composed of lines, circles and polygons, or images that can be decomposed into simple geometrical objects. Can be easily rescaled and rotated. Cannot easily accommodate very complex images, such as photographs where color information may vary from pixel to pixel. Bitmap Graphics Are easy to edit in memory and display on TV monitors due to the arrangement of the pixels in a rectangular array. Pixel values can be modified individually. Uncompressed images can become very large and require a lot of memory. Resizing and rotation do not work very well and may distort the image significantly.
Bitmap versus Vector Graphics Vector graphics are well suited for graphs, e.g., in spreadsheets, and for scalable fonts, e.g., PostScript or TrueType fonts. Bitmap graphics are used for general purpose images and, in particular, photographs. On the WWW, bitmap graphics are by far the most popular and we will concentrate on them in the following slides. Bitmap Black and White Image Suppose we want to draw a B&W image on a computer screen. We first subdivide the screen into small rectangles or squares called pixels. A typical TV screen has about 300x400 = 120,000 pixels. A high resolution Computer monitor has about 1000x1300 = 1,300,000 pixels.
Screen with 9x13 = 117 Pixels x 0 1 2 3 4 5 6 7 8 9 10 11 12 y 0 Pixels (x,y) 1 2 3 4 5 6 (1,6) 7 8 (4,8) Black and White Image To draw a B&W image, we paint some of the pixels black and leave the rest white. For instance, the letter A in its simplest form, would look like this:
Black and White Image To make more fancy letters, we have to use more pixels as shown by the following improved letter A: What can m Bits Describe? In general, if we have m bits, we can represent m n = 2 different objects. Examples: 2 0 = 1, 2 1 = 2, 2 2 = 4, 2 3 = 8, 2 4 = 16
Powers of 2 Each additional bit doubles the number of objects that can be described. Suppose now we have n objects. How many bits do we need to describe them? The answer is m bits, where m is equal to x rounded up to the nearest integer, and x = log(n)/log(2) Colors Humans can distinguish about 10,000 colors simultaneously, but many more colors can be perceived, although not simultaneously. A truecolor display or printer uses 24 bits per pixel, corresponding to 16.8 million (2^24=16,777,216) different colors. The most common bitmap formats use either 1,4,8,16, or 24 bits per pixel.
Additive (RGB) Colors (Almost) all colors can be generated by combining light from red (R), green (G) and blue (B) sources with the right intensities. For example, adding R and G in equal amounts results in yellow, and adding R, G, and B in equal amounts results in white. Used for TV and Computer Displays Subtractive (CMY) Colors Starting from white light, we can use a yellow (Y) filter to remove blue, a cyan (C) filter to remove red, and a magenta (M) filter to remove green. In this way also (almost) all possible colors can be generated. Used in Photography and Printing
Subtractive (CMY) Colors White consists of equal amounts of red, blue and green, i.e., W = R+G+B. Cyan filter blocks red: W-R = R+G+B-R = G+B = C Magenta filter blocks green: W-G = R+G+B-G = R+B = M Yellow filter blocks blue: W-B = R+G+B-B = R+G = Y Additive (RGB) Colors Colors are described in the form of 3 numbers, e.g., (20,235,109), where the first number is the amount of red (R), the second is the amount of green (G), and the third is the amount of blue (B). Examples (in hex):
Additive Colors (R,G,B) (Almost) all visible colors can be made up from red, green, and blue components in the right proportions. If we use 8 bits for each, R, G, and B, then we can represent 2^24=16.7 Mio colors. The values of R, G, and B are then in the range 0..255 each. Black is (0,0,0), white is (255,255,255). In between, e.g., (128,128,128) lies gray. Photographic Image (R,G,B) R G B
R,G,B Components Photographic Image (C,M,Y) C M Y
C,M,Y Components Complementary Colors Suppose a specific color X is represented by X = (R,G,B) where R, G, B each take on values 0 255. Then the complementary color C(X) is C(X) = W-X = (255-R,255-G,255-B) Examples: Red = (255,0,0) ==> C(Red) = (0,255,255) = Cyan Green = (0,255,0) => C(Green) = (255,0,255) = Magenta Blue = (0,0,255) ==> C(Blue) = (255,255,0) = Yellow
True Color (24 bits/pixel) This image has about 50,000 different colors. Using Fewer Bits per Pixel To use fewer bits per pixel, the number of different colors must generally be reduced. If 8 bits or less are used per pixel, then the colors are usually defined in a palette. A palette is a mapping from an index (e.g. 0..255) to a 24-bit (R,G,B) value that is used to display the image. The palette must be stored in a file together with the image.
256 Color Palette, Optimized <-- Original 256 Color Palette, Windows <-- Original
16 Color Palette, Windows <-- Original 2 Color Palette <-- Original
Use of Palettes GIF files always use palettes with a maximum of 256 distinct colors. JPEG files do not use palettes. BMP files may or may not use palettes. When they use palettes, the maximum number of colors is 256. The quality of photographic images is usually degraded when palettes are used. Different Wavelengths
C.I.E. Committee International D Eclairage RGB Color Model
HSV Color Model Hue Saturation Value More About Color By adjusting the amounts of R, G, and B present in a pixel, most of the visible colors can be produced. Because there are 3 color components, we cannot show all possibilities in a 2- dimensional graph. The following slides show mixtures of any 2 color components (the third component is fixed at zero).
Mixing Red and Green (B=0) 0 51 102 153 204 255 0 51 102 153 204 255 Mixing Red and Blue (G=0) 0 51 102 153 204 255 0 51 102 153 204 255
Mixing Blue and Green (R=0) 0 51 102 153 204 255 0 51 102 153 204 255 Color Hue, Saturation, Value The R,G,B color model is not always the most convenient to describe the coloring of a pixel. Often it is more appropriate to talk about the more intuitive quantities color hue (H), color saturation (S), and brightness value (V). The result is the H,S,V model.
Color Hue Color hue corresponds to the average spectral wavelength of a color. The convention is to use an angle between 0 and 360 degrees (measured counterclockwise). Examples: Red: 0 deg. Green: 120 deg. Blue: 240 deg. Yellow: 60 deg. Cyan: 180 deg. Magenta: 300 deg. Color Hue from R,G,B Compute intermediate quantities I, Q as I = R - G/2 - B/2, Q = sqrt(3)*(g-b)/2 Then compute H in degrees as (atan is inverse tangent) H = (180/pi)*atan(Q/I) If I<0 and Q>0 add 180 to H If I<0 and Q<0 subtract 180 from H
Color Saturation, Value Color saturation is a measure for the purity of a color. Mathematically, the saturation S is defined as max{r,g,b} - min{r,g,b} S = --------------------------------- max{r,g,b} Value is a measure for brightness, defined by V = max{r,g,b}/255 (RGB) => (HSV) Example (RGB) = #6495ED (in hex) Hex => decimal: 64,95,ED => 100,149,237 I = 100-149/2-237/2 = -93 Q = (sqrt(3)/2)*(149-237) = -76.2 atan(-76.2/-93) = 39.3 deg H = 39.3-180 = -140.7 deg S = (237-100)/237 = 0.58, V = 237/255 = 0.93 (HSV) = (-141 deg, 0.58, 0.93)
Color Hue, Saturation (V=255) Hue Saturation YUV Model The YUV model defines a color space in terms of a luminance (Y), and two chrominance (U,V) components. Here Luminance: Y = 0.30*R + 0.59*G + 0.11*B, Chrominance (blue): U = 0.49*(B-Y), Chrominance (red): V = 0.88*(R-Y). Used for TV (PAL and NTSC). MPEG files can also use this model for (lossy) data compression.
Y,Cb,Cr Model A similar model, that was originally developed for color TV (and compatibility with black and white TV), is the luminance (Y), and chrominance (Cb,Cr) model. For HDTV and computer displays Luminance: Y = 0.21*R + 0.72*G + 0.07*B, Chrominance (blue): Cb = 0.54*(B-Y), Chrominance (red): Cr = 0.64*(R-Y). Older monitors use slightly different constants. JPEG and MPEG use (slight variants of) this model for lossy data compression. Image Processing, Enhancement By varying specific components in the R,G,B model, and/or in the H,S,V model, and/or in the Y,Cb,Cr model, images can be enhanced or modified. Examples include: Contrast reduction/enhancement, Brightness and gamma correction, Color component/hue/saturation correction, Image filtering (blur/sharpen). The following slides show some examples.
Original Image Contrast Reduced Note: Horizontal axis shows input in range 0...1, vertical axis shows corresponding output in range 0 1 for Y and R,G,B.
Luminance Increased What is shown here is a linear increase in brightness that affects dark pixels (value near 0) by the same amount as bright pixels (value near 1). Luminance Decreased What is shown here is a linear decrease in brightness that affects dark pixels (value near 0) by the same amount as bright pixels (value near 1).
Contrast Increased This makes bright pixels brighter and dark pixels darker. Note the non-linearity (where the curves go flat) which arises because output values >1 and <0 are not possible. Gamma Correction This is a non-linear brightness correction that increases the brightness of dark pixels more than of those pixels which are already bright. This usually works best to brighten a dark image.
Decrease in Color Saturation Hue and brightness value (V) are not affected by this. A reduction in color saturation just changes the image towards a black and white image. Color Hue Change: +45 deg. Originally, red (R) is at 0 degrees. Changing the hue by +45 degrees moves red towards yellow, green towards cyan and blue towards purple.
Color Hue Change: -30 deg. Originally, red (R) is at 0 degrees. Changing the hue by -30 degrees moves red towards purple, green towards yellow and blue towards cyan. Max. Increase in Value (V) Because V=max{R,G,B}, only one color component needs to be pushed to the maximum, and color hue and saturation are preserved.
Max. Increase in Luminance (Y) Because Y=0.3*R+0.59*G+0.11*B, all three color components need to be pushed to the maximum and the image becomes nearly white. Is the Display Linear? To find out, we make one half of the full brightness in 2 ways (shown here for gray): (a) We set (R,G,B)=(0.5,0.5,0.5). (b) We make a checkerboard pattern with equal areas of pure white and pure black. If brightness differs, display is non-linear.
Enlarged Test Pattern For a linear display characteristic the gray frame with (R,G,B) = (0.5,0.5,0.5) should appear to have the same brightness as the pure white/black checkerboard pattern. Gamma Correction A TV display has characteristic z = γ y where y is the input and z is the output of the display. Gamma correction uses y = 1/γ x where x is the input and y is the output of the correction. y y x x
Chart to Determine Gamma Resolution Do our eyes have the same resolution for the red, green and blue color components? No! The resolution is best for green and worst for blue. <-- Resolution chart in GIF format.
JPEG Adapts to Human Eye The JPEG image format makes use of our inability to distinguish fine details in the red and blue color components to compress the image data. The R and B components are low-pass filtered (and the excessive data is thrown away) when an image is converted to JPEG format. <-- Resolution chart in JPEG format.