COSC 3461: Module 7

# COSC 3461: Module 7

## COSC 3461: Module 7

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
##### Presentation Transcript

1. COSC 3461: Module 7 Graphical Display

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

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

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. The Raster 15” • 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”, …)

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 28 = 256 shades or grey or 256 colours • 24-bit (3 bytes): can distinguish among 224 = 16.8 million colours

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. 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. Video RAM • Why does video RAM matter? • Frame buffer architecture: Frame buffer memory Display set pixel values Application processes Display Controller turn contents of frame buffer into visible image

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 = 210 = 1024 bytes 1 MB = 220 = 1,048,576 bytes

11. Video RAM Amount needed is a function of resolution and image depth See previous slide for calculations

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. 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. 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. Dot Pitch Illustrated Pixel Dot Pitch (mm) Typical values range from 0.15 mm to 0.30 mm

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

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. A Pixel Image pixel

19. A Pixel Image

20. A Pixel Image

21. A Pixel Image

22. A Pixel Image

23. A Pixel Image pixel

24. Coordinate Systems • Device coordinates • Physical coordinates

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

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

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

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

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. Colour

31. Vision Basics

32. 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

33. 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

34. 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

35. 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

36. 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

37. Colour

38. Colour

39. Colour

40. 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?

41. 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

42. 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)

43. 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

44. RGB Model (2) Color Red Green Blue Red 255 0 0 Green 0 255 0 Blue 0 0 255 Yellow 255 255 0 Cyan 0 255 255 Magenta 255 0 255 White 255 255 255 Black 0 0 0

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

46. 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

47. 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

48. Java’s JColorChooser (1) Pre-definedpalette For a demo, seeDemoMenu2.java

49. Java’s JColorChooser (2) HSB For a demo, seeDemoMenu2.java