05-830, User Interface Software, Spring, 2001
Lecture 10, March 7, 2001
Copyright © 2001 - Brad Myers

Previous Lecture . . . Next Lecture

Introduction to 2-D Graphics

Typically 0,0 in top left
- Comes from text handling
- Different from conventional axes
Coordinates of pixels:
- Center of pixel
- Corner of pixel
- Matters for lines

Which pixels are turned on for DrawRectangle (2,2, 8,8)?
- Suppose you draw another rectangle next to it?
- Suppose draw filled and outline rectangle with the same coordinates?
- What about for ellipse?
DrawLine has similar concerns
- Thick lines often go to both sides of the coordinates
DrawPolyline takes a sequence of points
- Endpoints of each segment drawn?
- Last end-point drawn?
- Closed vs. open; draw first point twice
Draw functions
- Replace (COPY)
- XOR
- And, OR, NOT, etc.
- Makes it important to do the points only once

LineStyles
- Width
- Solid, dashed, "double-dashed", patterned
  111000111000111000
- Cap-style: butt, round, projecting (by 1/2 linewidth):
Polylines
- End-caps: miter, round, bevel:
  - Miter = point, up to 11 degrees
  - Round = circle of the line width
  - Bevel = fill in notch with straight line
- Filled, what parts?
  - "Winding rule"
  - "odd parity rule"

Masking
- Extra picture to determine parts to draw
  - color+white or color+not-drawn
- Picture is repeated "tiled" to fill the space
  - origin of the tiles at window, screen or object
Clip Region
- Specify what parts are actually drawn
- Expensive to actually draw and for user to calculate part to draw
- So just specify clip region and let low-level algorithm clip

Color map, color table
Number of colors on screen vs. number of total colors
- 8 bits for each of 3 colors = 24 bits
- 2^24 colors, but screen has only 2^14 to 2^20 pixels
- so provide 16 to 256 colors in "video look-up table" or "color table" or "color map"
Color map tricks
- Color animation
- Position animation
- Cursors, etc.
- Transparency
Full color
- Extra planes
  - Z buffer
  - "Alpha" channel (transparency)
What color when XOR, AND?

RGB -- Additive color primaries
CMY -- Cyan, Magenta, Yellow
- complements of red, green, blue; substractive primaries
- colors are specified that are removed from white light, instead of added to black (no light) as in RGB
YIQ -- used in color TVs in US (NTSC)
- Y is luminance, what is shown on black and white TVs
- I and Q encode chromaticity
HSV -- Hue, Saturation and Value (brightness)
- user oriented, intuitive appear of artist's hint, shade, tone
- simple algorithm in text to convert, but not a linear mapping
Interpolating between colors can be done using different models, with different resulting intermediate colors

Baseline, descender, ascent, line spacing:
- extra space usually built into characters (height & width)
Kerning: overlapping of characters: VA, ff, V.
Stroke: Element of a character that would have originally been created with a single pen stroke
Leading: pronounced "ledding": vertical distance between lines of type, from baseline to baseline, measured in points. Term derives from thin strips of lead placed between lines in the days of hot-metal type setting.
Em: Equal to the font's point size. So an "Em-dash" in a 18 point font is 18points wide: (option-shift-underline)
En: Half font's point size. "En-dash" is 9 points wide in 18 point font: (option-underline)
Types of fonts:
- Bitmap fonts: look bad when scaled up. Best appearance at native resolution.
- Postscript fonts: by Adobe, described by curves and lines so look good at any resolution, often hard to read when small
- TrueType fonts: similar to Postscript: font is a program

Save an extra picture offscreen
- Smoother animations
- Save hidden parts of windows
= "Backing store"
Use two buffers for special effects, faster refresh
"Save-under" for pop-ups

Clipping rectangles
- Redrawing damaged parts
- Window refresh
Scrolling using coordinate transformations
- Using clipping rectangles or sub-windows