Systems & Biomedical Engineering Department SBE 306B: Computer Systems III (Computer Graphics) Dr. Ayman Eldeib Spring 2018 Introduction to With colors you can set a mood, attract attention, or make a statement. is a system of rules and guidance for mixing various colors. Color can be your most powerful design element if you learn to use it effectively. Being able to use colors consciously and harmoniously can help you create spectacular visualization and animation. How to calculate the color of a pixel? 1
3/25/2018 The Foundation of Color At its core, color is light. Light: electromagnetic phenomenon (different wavelength = different color). Light is composed of many different colors and the various mixtures of light compose the colors that we can see. Color: Interaction of light Color Wheel and eye-brain system. The Foundation of Color Primary Colors: Colors that can not be created by mixing other colors. Secondary Colors: Colors made by mixing primaries colors. Intermediate (Tertiary) Colors: Colors made by mixing primaries and secondary colors. Color Wheel 2
The Foundation of Color glbegin (GL_TRIANGLES); glcolor3f (1.0, 0.0, 0.0); // red glvertex2iv (p1); glcolor3f (0.0, 1.0, 0.0); // green glvertex2iv (p2); glcolor3f (0.0, 0.0, 1.0); // blue glvertex2iv (p3); glend ( ); An OpenGL Example Types of Color Theories Subtractive Theory The subtractive, or pigment theory deals with how white light is absorbed and reflected off of colored surfaces. Additive Theory The Additive, or light theory deals with radiated and filtered light. 3
Subtractive Black absorbs most light. White reflects most light. Colored Pigments absorb light and reflect only the frequency of the pigment color. All colors other than the pigment colors are absorbed so this is called subtractive color theory. The primary colors in Subtractive Theory are: Cyan ( C ) Magenta ( M ) Yellow ( Y ) Black ( K ) Used in Printing and Painting Additive Black radiates no light. White (sun) radiates all light. Video is the process of capturing and radiating light, therefore it uses Additive (Light) Theory not Subtractive (Pigment) Theory. The primary colors in Additive Theory are: Red ( R ) Green ( G ) Blue ( B ) The primary colors add together to make white. Light Theory is also called Additive Theory. Used in Television, theater lighting, computer monitors, and video production 4
The Color Wheel Colors on the wheel can be described using three parameters: Hue: degrees from 0 to 360 Saturation: brightness or dullness Value: lightness or darkness Hue The Color Wheel Hue or Spectral Color is represented as an angle to distinguish the dominant color (frequency). Primary Colors: 0 = Red 120 = Green 240 = Blue Secondary Colors: 60 = Yellow 180 = Cyan 300 = Magenta Angle Color 0 60 Red 60 120 Yellow 120 180 Green 180 240 Cyan 240 300 Blue 300 360 Magenta 5
3/25/2018 The Color Wheel Saturation Saturation or Chroma is the intensity of a color; i.e. defines the purity (vibrancy) of the color to indicate if it is mixed with other colors. A highly saturated color is bright and appears closer to the edge of the wheel. A more unsaturated color is dull. A color with no saturation is achromatic or in the grey scale. The Color Wheel Value Value represents the luminescent contrast value between black and white. 6
The Color Wheel 3D Three parameters to describe a color: Hue Chroma Value Tone = Shade + Tint What is the Tone? 7
Color Schemes Systematic ways of selecting colors Monochromatic Complementary Analogous Warm Cool Color Schemes Monochromatic One Hue (Color) and its values of Tint and Shade 8
Color Schemes Complementary (note spelling--not complimentary) Colors that are opposite on the wheel. Two colors when mixed produce white (gray in general). High Contrast Color Schemes Analogous A selection of colors that are adjacent. Minimal Contrast 9
Color Schemes Warm Right half of the wheel gives warmer colors. Warm colors make objects look closer in a painting or drawing. The warm colors found in fire and the Sun. Color Schemes Cool Left half of the wheel gives cooler colors. Cool colors make objects tend to recede in a composition. The cool colors found in snow and ice. 10
Color Spaces (or Models) The RGB Color Space - Computer Displays The HSV Color Space The HLS Color Space The HSB Color Space A color space is a method by which we can specify, create and visualize color. The CIE Color Space Color Standard The CMY Color Space - Printing The YIQ, YUV, YCrCb Color Space Television Opponent Colors Biological The color space is a 3D space; hence, any color can be defined as a 3D vector where each element in the vector represents one color component. RGB Color Spaces (or Models) Used in Video and computer graphics It is represented as the cube shown with Cartesian coordinates. Each of the three axes represents a primary color. Each point on or inside the cube represents a color where the coordinates of this point represent the components of the primary colors that contribute to the current color. Each component should have a value from 0 to 255 (or from 0.0 to 1.0). The grayscale from 0,0,0 to 255,255,255 (0,0,0 to 1,1,1) represents the shades of gray from black to white. 11
HSV Color Spaces (or Models) HSV (Hue, Saturation, Value) Saturation and Value are represented in % or within a range. Value represents the brightness of the color. Value is represented as the centerline of the cone. Value 0.0 (0) (black) is at the lower tip of the cone. Value 1.0 (100) (white) is at the center point of the upper circle. Shades of gray are represented along this line between black and white. The HSV color space is quite similar to the way in which humans perceive color, which is not always the case with RGB. RGB to HSV Transformation The conversion from a RGB to a HSV model is described by these formulas: v = max = max (r,g,b) min = min(r,g,b) s = c/v where: c = chroma = max (r,g,b) - min (r,g,b) h = depends on which of r,g,b is the maximum The meaning of the variables: r,g,b the red, green, blue components of the RGB model h,s,v - the hue, saturation, value components of HSV model The components of the RGB model (r,g,b), saturation (s) and value (v) should have values in the range [0,1], while the hue (h) should have values in the range [0,360] 12
HSV to RGB Transformation The conversion from a HSV to RGB a model is described by these formulas: The meaning of the variables: h,s,v - the hue, saturation, value components of HSV model r,g,b the red, green, blue components of the RGB model c - chroma m - the RGB component with the smallest value x - an intermediate value used for computing the RGB model The components of the RGB model (r,g,b), saturation (s) and value (v) should have values in the range [0,1], while the hue (h) should have values in the range [0,360] Gamma Correction A typical CRT has a non-linear voltage-to-light transfer function with a power law usually denoted by gamma. Power-Law Transformations Gamma Correction I = c * I 1/γ γ < 1 Useful for enhancing details in the darker regions of the image at the expense of detail in the brighter regions. γ > 1 Useful for enhancing details in the brighter regions of the image at the expense of detail in the darker regions. 13
Gamma Correction Original γ = 0.6 γ = 0.4 γ = 0.3 Gamma Correction Original γ = 3.0 γ = 4.0 γ = 5.0 14
Digital Image A digital image is composed of pixels which can be thought of as small dots on the screen. A digital image is an instruction of how to color each pixel. In the general case we say that an image is of size m- by-n if it is composed of m pixels in the vertical direction and n pixels in the horizontal direction. Let us say that we have an image on the format 512-by- 1024 pixels. This means that the data for the image must contain information about 524288 pixels. Digital Image Color images have 3 values per pixel; monochrome images have 1 value per pixel. grid of squares, each of which contains a single color each square is called a pixel (for picture element) 15
Digital Image Pixel A digital image, I, is a mapping from a 2D grid of uniformly spaced discrete points, {p = (r,c)}, into a set of positive integer values, {I( p)}, or a set of vector values}. At each column location in each row of I there is a value. The pair ( p, I( p) ) is called a pixel (for picture element). Digital Image Pixel p = (r,c) is the pixel location indexed by row, r, and column, c. I( p) = I(r,c) is the value of the pixel at location p. If I( p) is a single number then I is monochrome. If I( p) is a vector (ordered list of numbers) then I has multiple bands (e.g., a color image). 16
Digital Image 01 00 05 00 03 00 02 00 00 03 01 01 01 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 02 00 01 03 30 3A 38 39 2D 1D 15 10 0E 0C 0A 0A 0A 09 06 08 07 06 06 05 05 07 07 04 05 04 04 06 02 01 02 02 02 02 07 01 02 02 03 03 22 1B 16 14 0A 08 0B 0A 0D 0B 0B 0C 06 07 05 05 06 06 06 03 07 04 06 05 09 05 04 05 01 04 04 02 03 03 04 02 04 03 02 00 0F 0B 04 10 07 09 07 08 09 09 08 05 08 08 05 09 03 08 05 02 08 08 06 06 04 02 05 03 02 05 05 00 02 02 04 04 00 00 03 00 07 09 0E 0C 07 08 0A 0A 0B 0F 0A 0C 07 06 0B 07 0B 05 0B 08 09 07 03 08 04 04 02 00 04 02 04 00 04 03 08 00 06 09 04 00 0E 0C 09 09 08 08 07 08 09 09 0A 05 08 07 07 07 09 08 0A 08 09 06 0A 03 09 07 06 06 03 05 03 01 06 02 03 07 01 04 04 02 0C 0B 0A 05 08 09 0A 0C 0A 0A 08 0A 0A 06 08 06 06 04 06 02 06 07 04 04 04 06 09 05 05 08 06 04 05 04 06 01 0A 03 02 02 0B 14 0F 0F 0D 0A 0E 0A 0C 0C 0E 0A 0C 0B 09 0A 09 0A 0A 09 0B 0B 05 0C 0C 0A 04 07 06 03 05 07 04 05 03 02 01 06 03 02 10 12 0B 10 0A 0D 0D 0B 0D 0C 0B 0B 0C 0D 0B 0B 0A 0A 0A 0B 0C 17 15 1C 15 0D 08 09 08 05 05 05 04 02 05 04 04 00 04 01 15 0E 10 12 0C 0D 0C 0C 0A 0B 0B 09 0C 0F 09 09 0D 07 0B 08 15 60 5D 61 59 33 0D 0A 07 08 08 05 03 06 07 01 03 05 02 02 12 10 0F 0E 10 10 0B 0C 0F 0F 0E 0C 10 0D 15 10 09 12 11 12 50 68 66 89 71 5E 3F 08 09 0A 09 0A 03 03 02 05 05 04 02 01 11 12 0C 11 13 10 10 0B 10 0F 0C 11 11 13 0D 0F 0D 0D 0B 25 7A 7F 79 6D 80 6E 54 0C 0D 09 0A 06 04 02 05 00 05 04 03 01 10 0F 0D 12 0E 10 0E 0F 13 13 11 13 17 11 0F 14 11 11 14 39 84 88 7E 8C 73 7A 5C 1E 05 0A 0F 0E 0C 05 02 04 03 06 05 02 0F 15 0D 18 11 0D 11 14 10 12 12 14 19 13 17 13 16 16 20 73 68 87 89 93 8B 83 69 43 07 0A 12 0A 0B 06 06 03 04 05 03 02 13 14 14 16 11 13 13 17 12 17 17 28 1E 1A 17 19 14 12 4F 7D 74 85 91 93 8C 7F 6F 5F 0B 09 12 0D 0C 02 04 07 04 05 04 02 21 18 15 16 1D 15 18 1E 36 5B 29 2C 19 29 4F AF BC AF AB 9E A1 97 82 70 9F AE AD A5 92 16 10 07 0E 0A 0C 08 05 0B 05 01 17 1B 1A 1A 2B 1B 2A 32 34 46 2C 1B 26 4C 40 BA BB B5 AE 95 94 84 7A 8A 9A B9 BB AD 9C 8A 15 09 09 05 0B 0D 0F 0B 07 00 1A 18 1C 1E 27 21 1D 3F 4E 32 25 1B 1B 93 46 AF AB B1 AC A4 93 89 91 86 90 AA 9F 91 97 AD 7F 0C 0B 0E 0B 0C 0C 09 05 01 38 2C 24 2E 51 59 4B 30 27 39 2B 2B 24 29 69 37 25 29 82 97 A1 AB AC B2 A6 A6 A0 89 69 0F 10 1C 18 14 10 10 0F 0C 0F 03 21 2A 27 22 5C 44 31 3F 33 1F 37 24 23 36 27 24 2B 4D 50 85 90 96 86 A3 A5 99 8D 7A 4E 0E 1B 15 20 0F 0F 16 12 13 0B 01 1D 1F 2B 20 21 48 2F 40 2F 2D 2A 25 2B 2C 20 25 25 26 3E 55 5E 62 6D 6D 6E 68 5E 43 0D 10 21 18 32 1A 13 10 13 15 10 04 27 2F 2A 28 21 3B 45 2E 3A 40 33 2D 2F 1F 1E 1B 20 37 3C 3F 3C 34 30 24 17 0D 0B 0E 11 1E 23 1B 25 14 0D 10 0F 12 0F 04 22 27 37 33 1A 1B 35 4A 1D 20 2C 2F 1F 1F 3B 34 1A 2A 38 44 1E 0C 0C 06 0C 10 12 1B 21 21 34 32 20 0B 0E 10 0D 0D 0F 02 32 22 33 29 20 22 19 30 35 1D 1E 16 19 18 1C 16 18 23 39 10 13 0E 0E 1A 15 15 13 1A 18 2C 2E 19 0F 0D 10 0E 0E 14 0D 01 33 36 23 31 29 20 19 1B 1E 17 1C 1F 1F 1F 1C 31 23 1C 2F 13 11 16 10 12 16 13 19 1B 17 19 1D 13 14 10 10 12 11 12 0D 01 28 31 34 24 30 23 19 18 28 2A 1D 1F 1D 1B 1E 1B 26 31 39 16 14 13 14 13 15 1B 22 1A 1E 1B 15 13 16 0C 0D 11 0E 12 0D 00 29 20 1C 2E 25 28 28 22 1E 20 1F 1F 1D 1B 1C 29 22 43 37 17 10 15 15 12 10 14 15 1B 1E 15 1A 11 10 14 13 14 17 12 11 01 25 28 2A 23 23 29 26 1E 1D 34 38 1B 1B 22 26 18 1A 4C 33 1C 11 14 14 14 10 10 18 17 1E 29 20 1A 15 12 17 0E 14 12 12 Digital Image 17
Digital Image Digital Image Representing Digital Images The representation of an M N numerical array as a0,0 a0,1... a0, N 1 a1,0 a1,1... a 1, N 1 A =............ am 1,0 am 1,1... am 1, N 1 18
Digital Image Representing Digital Images The representation of an M N numerical array as f (0,0) f (0,1)... f (0, N 1) f (1,0) f (1,1)... f (1, N 1) f ( x, y) =............ f ( M 1,0) f ( M 1,1)... f ( M 1, N 1) Image File Header Format Fixed Format Fixed fields sequence. Predefined items Fixed size Field 1 Field 2 Field n 19
Image File Header Format Tagged Format Variable sequence of fields. Variable number of items Unlimited field size Variable size Tags have fixed size/format Tag 1 Field 1 Tag 2 Field 2 Tag i Field i... Image File Format There are a number of file formats in which one may store the images in files and retrieve them from files. These are known as image file format standards. Here we will present some of the most popularly used Image file format standards. Tagged Image Format (.tif,.tiff): The.tif format is a very broad format, which can handle anything from bitmaps to compressed color palette images. The tiff format supports several compression schemes, but is often used for uncompressed images as well. This format is popular, relatively simple, and allows color. 20
Image File Format JPEG (.jpg): It is the most widely used as a standard and includes a variable lossy encoding as part of the standard. Most images you find on the Internet are JPEG-images MPEG (.mpg): This format is extensively used throughout the Web and is used only for motion images. This uses compression, yielding only lossy videos. Graphics Interchange Format (.gif): This format supports 8-bit color palette images and is not very popular among the image processing researchers. Postscript (.ps,.eps,.epsf): This image format is mainly used while introducing images or figures in a book and for printing. In postscript format, gray level images are represented by decimal/hex numerals encoded in ASCII. Intensity image This is the equivalent to a "grayscale image". It represents an image as a matrix where every element has a value corresponding to how bright/dark the pixel at the corresponding position should be colored. There are two ways to represent the number that represents the brightness of the pixel: The double class (or data type). This assigns a floating number ("a number with decimals") between 0 and 1 to each pixel. The value 0 corresponds to black and the value 1 corresponds to white. The other class is called uint8 which assigns an integer between 0 and 255 to represent the brightness of a pixel. The value 0 corresponds to black and 255 to white. Binary image Image File Format This image format also stores an image as a matrix but can only color a pixel black or white (and nothing in between). It assigns a 0 for black and a 1 for white. In that sense, any pixel may be stored in 1 bit only. 21
Image File Format RGB image This is another format for color images. It represents an image with three matrices of sizes matching the image format. Each matrix corresponds to one of the colors red, green or blue and gives an instruction of how much of each of these colors a certain pixel should use. Therefore, a pixel requires 24 bits to store its color. (Hence comes the term 24- bit image.) The number of different colors that can be represented by one pixel is 224 = 16777216 different colors. Multiframe image In some applications we want to study a sequence of images. This is very common in biological, medical imaging, and animation. For these cases, the multiframe format is a convenient way of working with a sequence of images. Image File Format Indexed image This is a practical way of representing color images. An indexed image stores an image as two matrices. The first matrix has the same size as the image and one number for each pixel. The second matrix is called the color map (Look-Up Tables - LUT) and its size may be different from the image. The numbers in the first matrix is an instruction of what number to use in the color map matrix. For example, 8-bit Color Images in which the color at each pixel is represented using an 8-bit integer. This means that the maximum number of different colors that is associated with the pixel is 256. For each pixel, an index number is stored (in 8 bits). This introduces additional complexity into the image format as the LUT is usually attached to the image. When the image colors are altered, it will be required to generate a new LUT. 22