05-830, User Interface Software, Spring, 1997
Lecture 10,   March 12, 1997
Copyright © 1997 - Brad Myers

Introduction to 2-D Graphics

Why?

• To draw application-specific graphical objects
  • Lines, rectangles, text
• Mac, Windows, X have approximately the same model
• There are some complexities that are worth teaching

Coordinates

• 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

Primitives

• 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

• Anything XOR BLACK = inverted anything, XOR again and get original:
• AND useful for making holes

• Ellipse
  • Start angle, end angle, bounding box

Properties

• LineStyles
  • Width
  • Solid, dashed, "double-dashed", patterned
    111000111000111000
  • Cap-style: butt, not-last, round, projecting:
• Polylines
  • End-caps: miter, round, bevel:
  • 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

Colors

• Color map, color table
• Number of colors on screen vs. number of total colors
  • 8 bits for each of 3 colors = 24 bits
  • 224 colors, but screen has only 214 to 220 pixels
  • so provide 16 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
• What color when XOR, AND?

Color Models (from Foley&van Dam, 2nd edition, pp. 584-599)

• 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

Text

• 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, Apple format

RasterOp

• called "BitBlt", copyPixel in text
• Copy an area of the screen
• Combine with destination in various ways
• Useful for moving, scrolling, erasing & filling rectangles, etc.
• SmallTalk investigated using it for rotate, scaling, etc.
• Not nearly as useful in color

Double Buffering

• 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

Window Manipulation

• CreateWindow (10, 10, 100, 100)
  • Inside or outside?
  • Size of border?
• Move, change size, destroy, iconize, maximize, top, bottom, etc.

Special features

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

Back to 05-830 main page