Upload
calliope-petros
View
68
Download
0
Embed Size (px)
DESCRIPTION
COSC 3461: Module 7. Graphical Display. Issues for Graphical Representation. How should the graphical images be represented (formally, internally)? How should imaged be presented (externally)?. Frame Buffer Architecture. Frame buffer memory. Display. set pixel values. - PowerPoint PPT Presentation
Citation preview
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
Display
Display Controller
Frame buffer memory
Application processes
turn contents of frame buffer into visible image
set pixel values
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
• 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
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:
Display
Display Controller
Frame buffer memory
Application processes
turn contents of frame buffer into visible image
set pixel values
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 bytes1 MB = 220 = 1,048,576 bytes
11
Resolution
Bits per pixel8 bit 16 bit 24 bit
640 x 480 300 (Kb) 600 900
800 x 600 468.75 937.5 1406.25
1024 x 768 768 1536 2304
1152 x 1024
1152 2304 3456
1280 x 1024
1280 2560 3840
1600 x 1200
1875 3750 5625
See previous slide for calculations
Video RAMAmount needed is a function of resolution and image depth
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
manufacturedhttp://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
• What is the dot pitch of 15” display with a resolution of 640 by 480?
640
480
Z
Notes:1. Z = (6402 + 4802)1/2 = 8002. 1 mm = 0.039 inch
Dot pitch = 15 / 800
= 0.01875 inches
= 0.01875 / 0.039 mm
= 0.481 mm
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
pixel
A Pixel Image
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
Component
Java’s Coordinate System
(0,0)
x
y (width – 1, height - 1)
27
Example
DemoMouseEvents.java
(x, y)coordinate of pointer incomponent
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
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
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
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-wavelengthRed – perceived by long-wavelength cones Green – perceived by medium-wavelength conesBlue – perceived by short-wavelength cones
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
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
Colour
39
Colour
40
Colour
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
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
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
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
RGB Model (2)
Color Red Green BlueRed 255 0 0Green 0 255 0Blue 0 0 255Yellow 255 255 0Cyan 0 255 255Magenta 255 0 255White 255 255 255Black 0 0 0
46
RGB Model
black
blue red
green
cyancyan yellowyellow
white
magenta
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
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
Pre-definedpalette
For a demo, seeDemoMenu2.java
Java’s JColorChooser (1)
50
HSB
Java’s JColorChooser (2)
For a demo, seeDemoMenu2.java
51
RGB
Java’s JColorChooser (3)
For a demo, seeDemoMenu2.java
52
Microsoft Office
54
Paint Shop Pro
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
Illustration of Serifs
AB abAB 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
Illustration of Sans Serifs
CD cdCD cd
Arial
Lucida Console
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
Monospaced Illustrated
IM imIM im
Courier new
Lucida Console
60
Font Styles for Times New Roman
• Plain
• Italic
• Bold
• Italic + bold
Hello Java World
Hello Java World
Hello Java World
Hello Java World
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 World48 point font size
62
Font Spacing
63
Readability of Text
Consider:1. THE SMALL BOY RAN THROUGH THE
HOUSE2. The small boy ran through the house3. The small BOY ran through the house
Which takes longer to read? Which one has an important word?
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?