1. COSC 3461: Module 7 Graphical Display

2. 2 Issues for Graphical Representation How should the graphical images be represented (formally, internally)? How should imaged be presented (externally)?

3. 3 Frame Buffer Architecture Display Controller Frame buffer memory Application processes turn contents of frame buffer into visible image set pixel values

4. 4 Issues for Graphical Representation Consider the hardware for graphics: –Cathode Ray Tube (CRT) –Liquid Crystal Display (LCD) –Thin Film Transistor (TFT) –Pen plotter, laser printer

5. 5 The Raster The raster is the viewable area of the display Size of a display –typically given by the diagonal dimension of the raster –usually specified in inches (e.g., 19”, 17”, 15”, …) 15”

6. 6 Pixels Image composed of a discrete number of “points” Each point has a image depth Image depth is the number of bits used to represent each pixel –How many colours (or shades of grey) can be represented? –It is a function of image depth: 1 bit: can distinguish between black or white 8 bits (1 byte): can distinguish among 2 8 = 256 shades or grey or 256 colours 24-bit (3 bytes): can distinguish among 2 24 = 16.8 million colours

7. 7 Resolution Resolution is the number of pixels on a display Given as: n by m –n is the number of pixels across the display –m is the number of pixels down the display Typical resolutions range from… –640x480, 1024x768, 1280x1024 Total number of pixels is n  m –640  480 = 307,200 pixels –1,600  1,200 = 1,920,000 pixels

8. 8 Aspect Ratio Aspect ratio: –the ratio of the width to height of a display screen –w:h For a 640×480 display: –the aspect ratio is 4:3 (640:480) Related: –Landscape The width is greater than the height –Portrait The height is greater than the width

9. 9 Video RAM Why does video RAM matter? Frame buffer architecture: Display Controller Frame buffer memory Application processes turn contents of frame buffer into visible image set pixel values

10. 10 Video RAM Requirements Amount of video RAM required = total number of pixels × the number of bits/pixel Examples –640  480  8 = 2,457,600 bits = 307,200 bytes = 300 KB –1,600  1,200  24 = 46,080,000 bits = 5,760,000 bytes = 5,625 KB = 5.49 MB Note: 1 KB = 2 10 = 1024 bytes 1 MB = 2 20 = 1,048,576 bytes

11. 11 Resolution Bits per pixel 8 bit16 bit24 bit 640 x 480300 (Kb)600900 800 x 600468.75937.51406.25 1024 x 76876815362304 1152 x 1024115223043456 1280 x 1024128025603840 1600 x 1200187537505625 See previous slide for calculations Video RAM Amount needed is a function of resolution and image depth

12. 12 Quality of Images Refresh Rate –number of times an image is displayed in 1 second. –75 Hz recommended minimum (considered “flicker-free”) Convergence –the capacity of red, green, or blue electron beams in cathode ray tube (CRT) displays to strike the same point on a screen –misalignment of electron beams causes colour purity error –an issue for CRT, but not for LCD displays Dot Pitch

13. 13 LCD, TFT Liquid Crystal Display (LCD) –passive- and active-matrix variants –active-matrix LCDs depends on Thin Film Transistors (TFT) TFT display means the LCD is “active matrix” all TFT displays are LCD displays –some LCDs exist that are not TFT they are “dual scan” screens older laptops, no longer being manufactured http://electronics.howstuffworks.com/lcd.htm

14. 14 Dot Pitch Dot pitch is a measure of the diagonal distance between pixels on a display screen –pixels might be phosphor dots or liquid crystals

15. 15 Dot Pitch Illustrated Pixel Dot Pitch (mm) Typical values range from 0.15 mm to 0.30 mm

16. 16 Dot Pitch Calculation What is the dot pitch of 15” display with a resolution of 640 by 480? 640 480 Z Notes: 1.Z = (640 2 + 480 2 ) 1/2 = 800 2.1 mm = 0.039 inch Dot pitch= 15 / 800 = 0.01875 inches = 0.01875 / 0.039 mm = 0.481 mm

17. 17 Models for the Display of 2D Images Stroke Model –images composed of strokes; each stroke has a colour and a thickness –inadequate for realistic or complex images Region Model –strokes define closed regions, which are then filled Pixel Model

18. 18 A Pixel Image pixel

19. 19 A Pixel Image

20. 20 A Pixel Image

21. 21 A Pixel Image

22. 22 A Pixel Image

23. 23 pixel A Pixel Image

24. 24 Coordinate Systems Device coordinates Physical coordinates

25. 25 Device Coordinates Typically given in dots or pixels x horizontally (to the right or left) y vertically (up or down) Possible origins –Center –Bottom left –Upper left Window coordinates vs. component coordinates

26. 26 Component Java’s Coordinate System (0,0) x y (width – 1, height - 1)

27. 27 Example DemoMouseEvents.java (x, y) coordinate of pointer in component

28. 28 Device Coordinates What happens when the resolution of the display devices changes?

29. 29 Physical Coordinates Sometimes need to specify display coordinates in physical units –points, inches, feet, cm, meters The applications must perform conversions –for display, for printing

30. 30 Colour

31. 31 Vision Basics

32. 32

33. 33 Vision Basics photoreceptors are situated on the retina –two types: rods and cones several layers of cells cover the photoreceptors –when light enters eye, it passes through these layers of cells before it hits the photoreceptors –foveal and peripheral vision - correspond to different parts of the retina

34. 34 Areas of the Retina fovea –in center of retina, specialized for acute detailed vision top layer of cells are almost absent tight packing of receptors (cones, no rods) periphery of retina –proportion of rods to cones increase toward edge of retina

35. 35 Colour Hue is what we normally think of as colour –e.g., red vs. orange vs. yellow vs. green etc. –three types of cones: short-, medium-, and long-wavelength Red – perceived by long- wavelength cones Green – perceived by medium- wavelength cones Blue – perceived by short- wavelength cones

36. 36 Colour Intensity –also called luminance or brightness how much light/dark –rods are more sensitive to light than cones are not specialized to particular wavelengths, instead attuned to a broad spectrum of light

37. 37 Colour Dyschromatopsia –A condition in which the ability to perceive colours is not fully normal 5-8% of males, 0.5% of women red-green colour blindness most prevalent

38. 38 Colour

39. 39 Colour

40. 40 Colour

41. 41 Colour Ratio of cones to rods in human retina is 1:10 –what does this mean for relative sensitivity to variations in hue vs. intensity?

42. 42 Colour In video display, –saturation (also called chroma) is defined as the “purity” of a colour –the amount of hue in proportion to white High saturation  very intense Low saturation  washed out Zero saturation  white –in a video signal: chrominance refers to the hue and saturation information together luminance refers to brightness

43. 43 Colour Models for colour –additive model: Red-Green-Blue (RGB) Cyan-Magenta-Yellow (CMY) any colour is obtained by the addition/subtraction of basic components in specific proportions –tri-stimulus model: a non-linear transformation of RGB colour space Hue-Saturation-Intensity (HSI) Hue-Saturation-Value (HSV) Hue-Saturation-Brightness (HSB)

44. 44 Colour Red-Green-Blue (RGB) model –additive model –each of RED, GREEN, and BLUE individually specified Cyan-Magenta-Yellow (CMY) model –subtractive model –magenta plus yellow produces red –magenta plus cyan makes blue –cyan plus yellow generates green –the combination of cyan, magenta and yellow form black

45. 45 RGB Model (2) Color RedGreenBlue Red255 0 0 Green 0255 0 Blue 0 0255 Yellow255255 0 Cyan 0255255 Magenta255 0255 White255255255 Black 0 0 0

46. 46 RGB Model black blue red green cyan yellow white magenta

47. 47 Colour Hue-Saturation-Value (HSV) model –Each of hue, saturation, and brightness individually specified –artists sometimes prefer HSV model over alternative models (RGB, CMY) similarities to the way humans perceive colour

48. 48 Colour Choosers Use a colour chooser to control colour –also called colour picker Colour selected three ways: –From a pre-defined palette –By manipulating HSB values –By manipulating RGB values

49. 49 Pre-defined palette For a demo, see DemoMenu2.java Java’s JColorChooser (1)

50. 50 HSB Java’s JColorChooser (2) For a demo, see DemoMenu2.java

51. 51 RGB Java’s JColorChooser (3) For a demo, see DemoMenu2.java

52. 52 Microsoft Office

53. 53 Netscape Navigator, Microsoft IE

54. 54 Paint Shop Pro

55. 55 Text One of most common elements in interfaces Text has three primary attributes: –Font family e.g., Courier, Verdana, Palatino –Style (e.g., bold, italic, bold-italic) –Size and Spacing (e.g., 10 point, 24 point, etc)

56. 56 Illustration of Serifs AB ab Times roman Bookman oldstyle serifs A serif is a short line extending from and at an angle to the upper and lower strokes of a letter

57. 57 Illustration of Sans Serifs CD cd Arial Lucida Console

58. 58 Three Basic Types of Font Families Types with serifs: –e.g., Times Roman –Serif fonts facilitate human perception, distinguishing among letters Sans serif types: –e.g., Arial –Without serifs Monospaced or fixed-pitch types: –e.g., Courier –Each character occupies the same amount of horizontal space (cf. variable pitch)

59. 59 Monospaced Illustrated IM im Courier new Lucida Console

60. 60 Font Styles for Times New Roman Plain Italic Bold Italic + bold Hello Java World

61. 61 Font Size Font size is measured in points –72 points per inch, 1 point = 1 / 72 inch –The smallest typographical unit of measurement Hello Java World 48 point font size

62. 62 Font Spacing

63. 63 Readability of Text Consider: 1.THE SMALL BOY RAN THROUGH THE HOUSE 2.The small boy ran through the house 3.The small BOY ran through the house Which takes longer to read? Which one has an important word?

64. 64 Readability of Text Consider: 1.The small boy ran through the house. 2.The small boy ran through the house. Which one is easier to read on paper? Which one is produced better on-screen?