Pixel and Colors - CG Lecture Notes PDF

Pixel and Colors Pixel (picture element) A pixel is the smallest piece of information in an image. Pixels are normally arranged in a regular 2D grid, and are often represented using dots or squares. Pixel (picture element) ▪ Each pixel is a sample of an original image, where more s...

Pixel and Colors Pixel (picture element) A pixel is the smallest piece of information in an image. Pixels are normally arranged in a regular 2D grid, and are often represented using dots or squares. Pixel (picture element) ▪ Each pixel is a sample of an original image, where more samples typically provide a more accurate representation of the original. ▪ The intensity of each pixel is variable; in color systems, each pixel has typically three or four components such as red, green, and blue, or cyan, magenta, yellow, and black.  Resolution Resolution is the number of rows that appear from top to bottom of a screen and in turn the number of pixels or pixel elements that appear from left to right on each scan line. Based on this resolution only the effect of picture appears on screen. In other words greater the resolution greater will be the clarity of picture. That is resolution value is directly proportional to clarity of picture.  Most monitors can operate at several different resolutions. – 640 X 480 – 800 X 600 – 1024 X 768 – 1152 X 864 – 1280 X 1024 As the resolution increases, image on the screen gets smaller.  Aspect Ratio The aspect ratio of an image describes the proportional relationship between its width and its height. It is represented as two numbers separated by a colon as 4(Width):3(Height), 16:9 etc. A square has the smallest possible aspect ratio 1:1. For an ellipse, the aspect ratio denotes the ratio of the major axis to the minor axis. An ellipse with an aspect ratio 1:1 is a circle  Aspect Width Height Code Name ratio XGA eXtended Graphics Array 4:3 1024 768 XGA+ eXtended Graphics Array Plus 4:3 1152 864 WXGA Widescreen eXtended Graphics Array 16:9 1280 720 WXGA Widescreen eXtended Graphics Array 16:10 1280 800 SXGA Super eXtended Graphics Array 4:3 1280 960 (UVGA) SXGA Super eXtended Graphics Array 5:4 1280 1024 HD High Definition 16:9 1360 768 HD High Definition 16:9 1366 768 Widescreen eXtended Graphics Array WXGA+ 16:10 1440 900 Plus HD+ High Definition Plus 16:9 1600 900 UXGA Ultra eXtended Graphics Array 4:3 1600 1200 Widescreen Super eXtended Graphics WSXGA+ 16:10 1680 1050 Array Plus FHD (Full Full High Definition 16:9 1920 1080 HD) Widescreen Ultra eXtended Graphics WUXGA 16:10 1920 1200 Array QFHD Quad Full High Definition 16:9 2560 1440 Other  Pixel per Inch (PPI) Pixels per inch (PPI) is the measure of resolution in a digital image or video display. PPI measures the display resolution of a computer monitor or screen. 1920 19202 + 10802 = 𝑥 2 𝑥 = 2205 x 1080 2205 = = 440 𝑃𝑃𝐼 5 Screen Size (diagonally) =5 inch  Text mode Text mode is a personal computer display setting that divides the display screen into 25 rows and 80 columns in order to display text without images. In text mode, each box can contain one character. Text mode contrasts with graphics mode, which features an array of pixels instead of text boxes. Text mode is also known as character mode or alphanumeric mode.  Graphics mode Graphics mode is a computer display mode that generates image using pixels. Today, most users operate their computer in a graphics mode opposed to a text mode or command line environment.  A graphics pipeline A graphics pipeline can be divided into three Modeling main parts: Application, Geometry and Rasterization. Geometry Rasterize Display  Application ⦁The application step is executed by the software on the main processor (CPU), it cannot be divided into individual steps, which are executed in a pipelined manner. ⦁In the application step, changes are made to the scene as required, for example, by user interaction by means of input devices or during an animation. ⦁The new scene with all its primitives, usually triangles, lines and points, is then passed on to the next step in the pipeline.  Geometry The geometry step is responsible for the majority of the operations with polygons and their vertices , can be divided into the following five tasks. It depends on the particular implementation of how these tasks are organized as actual parallel pipeline steps. object  Rasterization Rasterization is the task of taking an image described in a vector graphics format (shapes) and converting it into a raster image (pixels or dots) for output on a video display or printer, or for storage in a bitmap file format. It refers to both rasterization of models and 2D rendering primitives such as polygons, line segments, etc.  Images Type Bitmapped vs Vector There are two basic types of Images: – Bitmapped (Raster) and – Vector Bitmap Images Bitmaps are an image type most appropriate for photo-realistic images and complex drawings require fine details. A bitmap image is simple information matrix describing the individual dots of an image called pixels. The bit-depth determines the number of colors that can be displayed by an individual pixel. We can grab a bitmap image from a screen, scan it with a scanner , download it from a website, or capture it from a video capture device. Limitations: Large file sizes Inabilty to scale or resize the image easily while maintaining quality. Some common bitmap graphics programs are: – Photoshop , Paint Shop Pro, GIMP , Photo-Paint, Graphic Converter Exaggerated Example of a Bitmap Image Bitmap Image: Issues Vector Images Vector images are most appropriate for lines ,boxes, circles, polygons and other graphic shapes that can be mathematically expressed in angles, co-ordinates and distances. A vector images can be filled with color and patterns and we can select it as a single object. Vector drawn objects use a fraction of memory space required to describe and store the same object in bitmap form. For the web, pages that use the vector graphics use plug-ins such as Flash, and download faster when used for animation draw faster than bitmaps. Most drawing programs can export a vector drawing as a bitmap but converting bitmap to vector drawn object is difficult. Limitations: Vector images cannot be used for photo-realistic images. Plug-ins are required. Some of these programs include: – Corel Draw , Adobe Illustrator, Acrobat Vector Graphics Bitmap vs. Vector Image Formats Bitmap vs. Vector Images Color Models  Monochromatic images Image processing - static images - time t is constant Monochromatic static image - continuous image function f(x,y) – arguments - two co-ordinates (x,y) Digital image functions - represented by matrices – co-ordinates = integer numbers – Cartesian (horizontal x axis, vertical y axis) – OR (row, column) matrices Monochromatic image function range – lowest value - black – highest value - white Limited brightness values = gray levels  Chromatic images Colour – Represented by vector not scalar Red, Green, Blue (RGB) Hue, Saturation, Value (HSV) luminance, chrominance (Yuv , Luv) S=0 Green Hue degrees: Red Red, 0 deg Green 120 deg Green Blue 240 deg V=0  Color models,cont’d Different meanings of color: painting wavelength of visible light human eye perception  Physical properties of light Visible light is part of the electromagnetic radiation (380-750 nm) 1 nm (nanometer) = 10-10 m (=10-7 cm) 1 Å (angstrom) = 10 nm Radiation can be expressed in wavelength (λ) or frequency (f), c=λf, where c=3.1010 cm/sec  Physical properties of light White light consists of a spectrum of all V visible colors I B G Y O R  Physical properties of light All kinds of light can be described by the energy of each wavelength The distribution showing the relation between energy and wavelength (or frequency) is called energy spectrum  Physical properties of light This distribution may indicate: 1) a dominant wavelength (or frequency) which is the color of the light (hue), ED 2) brightness (luminance), intensity of the light (value), the area A 3) purity (saturation), ED – EW Contributions from other frequencies produce white light of energy density Ew  Physical properties of light Energy spectrum for a light source with a dominant frequency near the red color  Material properties The color of an object depends on the so called spectral curves for transparency and reflection of the material The spectral curves describe how light of different wavelengths are refracted and reflected  Properties of reflected light Incident white light upon an object is for some wavelengths absorbed, for others reflected E.g. if all light is absorbed => black If all wavelengths but one are absorbed => the one color is observed as the color of the object by the reflection  Color definitions Complementary colors - two colors combine to produce white light Primary colors - (two or) three colors used for describing other colors Two main principles for mixing colors: additive mixing subtractive mixing  Additive mixing pure colors are put close to each other => a mix on the retina of the human eye (cp. RGB) overlapping gives yellow, cyan, magenta and white the typical technique on color displays  Subtractive mixing color pigments are mixed directly in some liquid, e.g. ink each color in the mixture absorbs its specific part of the incident light the color of the mixture is determined by subtraction of colored light, e.g. yellow absorbs blue => only red and green, i.e. yellow, will reach the eye (yellow because of addition)  Subtractive mixing,cont’d primary colors: cyan, magenta and yellow, i.e. CMY the typical technique in printers/plotters connection between additive and subtractive primary colors (cp. the color models RGB and CMY) Additive/subtractive mixing  Human color seeing The retina of the human eye consists of cones (7-8M),”tappar”, and rods (100-120M), ”stavar”, which are connected with nerve fibres to the brain  Human color seeing,cont’d Theory: the cones consist of various light absorbing material The light sensitivity of the cones and rods varies with the wavelength, and between persons The ”sum” of the energy spectrum of the light the reflection spectrum of the object the response spectrum of the eye decides the color perception for a person  Overview of color models The human eye can perceive about 382000(!) different colors Necessary with some kind of classification sys- tem; all using three coordinates as a basis: 1) CIE(commission Internationale de l’Ḗclairage) standard 2) RGB color model 3) CMY color model (also, CMYK) 4) HSV color model 5) HLS color model  CIE standard Commission Internationale de L’Eclairage (1931) not a computer model each color = a weighted sum of three imaginary primary colors  XYZ color space The CIE XYZ color space was Since the human eye has three derived from a series of types of color sensors that respond experiments done in the late to different ranges of wavelengths, a full plot of all visible colors is a 1920s by W. David Wright and three-dimensional figure. However, John Guild. Their experimental the concept of color can be divided results were combined into the into two parts: brightness and specification of the CIE RGB chromaticity. For example, the color space, from which the color white is a bright color, while CIE XYZ color space was the color grey is considered to be a derived. less bright version of that same white. In other words, the chromaticity of white and grey are the same while their brightness differs.  The CIE XYZ color space was deliberately designed so that the Y parameter was a measure of the brightness or luminance of a color. The chromaticity of a color was then specified by the two derived parameters x and y, two of the three normalized values which are functions of all three tristimulus values X, Y, and Z. Thus color cλ = Xx+Yy+Zz, where x,y,z represent vectors in 3D additive color space and X, Y, Z designate the amounts of the standard primaries needed to match cλ. It is convenient to normalize the amounts against luminance (X+Y+Z). Any color can now be represented with the x and y amounts. Since normalization is done against luminance, parameters x & y are called chromaticity values because they depend on only hue and purity.  CIE standard When x and y is plotted in the visible spectrum we obtain the CIE chromaticity diagram. Labelled according to wavelength in nanometers from red end to violet end of spectrum.  RGB model Our eyes perceive color through stimulation of visual pigments in the cones of retina. These visual pigments have a peak sensitivity at wavelengths of about 630nm (red), 530nm (green)and 450nm (blue). By comparing intensities in a light source, we perceive the color of light. This theory of vision is the basis of displaying color on a monitor and is known as thre RGB color model.  RGB model all colors are generated from the three primaries various colors are obtained by changing the amount of each primary additive mixing (r,g,b), 0≤r,g,b≤1  RGB model,cont’d the RGB cube 1 bit/primary => 8 colors, 8 bits/primary => 16M colors  CMY model cyan, magenta and yellow are comple- mentary colors of red,green and blue, respectively subtractive mixing the typical printer technique  CMY model,cont’d almost the same cube as with RGB; only black white the various colors are obtained by reducing light, e.g. if red is absorbed => green and blue are added, i.e cyan  RGB vs CMY If the intensities are represented as 0≤r,g,b≤1 and 0≤c,m,y≤1 (also coordinates 0-255 can be used), then the relation between RGB and CMY can be described as:  CMYK model For printing and graphics art industry, CMY is not enough; a fourth primary, K which stands for black, is added. Conversions between RGB and CMYK are possible, although they require some extra processing.  HSV model HSV stands for Hue-Saturation-Value described by a hexcone derived from the RGB cube  HSV model,cont’d Hue (0-360°); ”the color”, cp. the dominant wave- length (128) Saturation (0-1); ”the amount of white” (130) Value (0-1); ”the amount of black” (23)  HSV model,cont’d The numbers given after each ”primary” are estimates of how many levels a human being is capable to distinguish between, which (in theory) gives the total number of color nuances: 128*130*23 = 382720 In Computer Graphics, usually enough with: 128*8*15 = 16384  HLS model Another model similar to HSV L stands for Lightness  RGB to HSI Conversion First, we convert RGB color space image to HSI space beginning with normalizing RGB values: Each normalized H, S and I components are then obtained by,  For convenience, h, s and i values are converted in the ranges of [0,360], [0,100], [0, 255], respectively , by:  HSI to RGB Conversion The result r, g and b are normalized values, which are in the ranges of [0,1], therefore, they should be multiplied by 255 for displaying.  Color models Some more facts about colors: The distance between two colors in the color cube is not a measure of how far apart the colors are perceptionally! Humans are more sensitive to shifts in blue (and green?) than, for instance, in yellow